---
tags: jQuery,javascript
---

# jQuery中事件觸發之物件參數傳遞

這是一個演示如何在 jQuery 中安全地傳遞複雜物件參數的測試專案。

## 專案概述

本專案展示了如何將 JavaScript 物件轉換為 JSON 字串，並透過 URI 編碼確保在 HTML 屬性中安全傳遞參數。這在動態生成 HTML 元素並需要傳遞複雜資料結構時特別有用。

- ✅ 物件到 JSON 字串的轉換
- ✅ URI 編碼確保 HTML 屬性安全性

## 技術實現

### 核心流程

1. **物件定義**：建立包含不同資料類型的參數物件
2. **JSON 序列化**：使用 `JSON.stringify()` 將物件轉為字串
3. **URI 編碼**：使用 `encodeURIComponent()` 確保字串在 HTML 屬性中安全
4. **HTML 生成**：動態建立包含編碼參數的按鈕元素
5. **參數解析**：在事件處理函數中解碼並還原原始物件

### 程式碼說明

const args = {
    a: 123,
    b: "456",
    c: [
        123, "456"
    ]
}

// 1. 物件轉成JSON字串
const argsString = JSON.stringify(args)

// 2. 對JSON字串進行URI編碼, 以確保在HTML屬性中是安全的
const encodedArgString = encodeURIComponent(argsString)

// 3. 產生html字串
// ps. onclick所使用的函數參數需要用單引號包裹, 以避免與JSON字串內部的雙引號衝突
const htmlString = `<button onclick="testFunction1('${encodedArgString}')">Click me 1!</button>`

$("body").append(htmlString)

function testFunction1(argString) {
    try {
        const decodeString = decodeURIComponent(argString)
        const parsedParams = JSON.parse(decodeString);
        console.log("成功解析參數物件:", parsedParams);
    } catch (e) {
        console.error("解析 JSON 字串失敗:", e);
    }
}

## 技術要點

### 為什麼需要 URI 編碼？
- JSON 字串包含雙引號，直接放在 HTML 屬性中會造成語法錯誤
- URI 編碼確保特殊字元不會破壞 HTML 結構
- 提供安全的資料傳遞機制

### 引號使用注意事項
- onclick 屬性使用雙引號包裹
- 函數參數使用單引號包裹，避免與 JSON 內部雙引號衝突
- 這種搭配確保 HTML 語法正確性

## 資料屬性 (Data Attributes) 方法

除了使用 onclick 事件外，我們也可以使用 HTML5 的 data attributes 配合 jQuery 事件監聽器來實現相同功能。

### 實現方式

// 1. 建立按鈕元素並設定 data attribute
const $button2 = $('<button>Click me 2!</button>')
    .attr('data-params', argsString) // 直接使用JSON字串，不需要URI編碼
    .addClass('data-button')

$("body").append($button2)

// 2. 使用 jQuery 事件監聽器
$(document).on('click', '.data-button', function() {
    testFunction2($(this))
})

function testFunction2($element) {
    try {
        const jsonString = $element.attr('data-params');
        const parsedParams = JSON.parse(jsonString);
        console.log("方法2 (data attributes) - 成功解析參數物件:", parsedParams);
    } catch (e) {
        console.error("方法2 (data attributes) - 解析 JSON 字串失敗:", e);
    }
}

### Data Attributes 的優勢

- ✅ **不需要 URI 編碼**：data attributes 可以直接儲存 JSON 字串
- ✅ **更好的分離**：HTML 結構與 JavaScript 邏輯分離
- ✅ **事件委派**：支援動態添加的元素
- ✅ **更簡潔的 HTML**：避免內聯 JavaScript 代碼

## 兩種方法比較

| 特性 | onclick 方法 | Data Attributes 方法 |
|------|-------------|---------------------|
| **編碼需求** | 需要 URI 編碼 | 不需要編碼 |
| **HTML 複雜度** | 較複雜（內聯 JS） | 較簡潔 |
| **程式碼分離** | HTML/JS 混合 | 完全分離 |
| **事件委派** | 不支援 | 天然支援 |
| **除錯難度** | 較困難 | 較容易 |
| **效能** | 略快（直接調用） | 略慢（需查找元素） |
| **維護性** | 較差 | 較好 |

### 建議使用場景

**使用 onclick 方法當：**
- 需要最佳效能
- 簡單的靜態頁面
- 不需要事件委派

**使用 Data Attributes 方法當：**
- 需要更好的程式碼組織
- 動態生成大量元素
- 需要事件委派功能
- 重視程式碼維護性

## 總結

兩種方法都能有效地傳遞複雜物件參數，選擇哪種方法主要取決於專案需求和程式碼架構偏好。Data Attributes 方法在現代 Web 開發中更受推薦，因為它提供了更好的程式碼分離和維護性。