如何在HTML的onclick方法中高效传递JavaScript对象？

问题根源 #

你直接把JSON序列化后的字符串塞进onclick属性里，会因为字符串中的双引号和onclick的属性引号冲突，导致浏览器解析出错，参数无法正确传递。

方法一：修复字符串转义问题 #

先把序列化后的字符串转义双引号，再用单引号包裹传入函数，最后在函数内解析回对象：

1. 修改Append_html_block函数里的序列化逻辑：

function Append_html_block(object) {
    var generated_html = document.getElementById("custom_DIV");
    // 转义双引号，避免和HTML属性的引号冲突
    var stringifiedObj = JSON.stringify(object).replace(/"/g, '"');

    generated_html.innerHTML += `
    <table class="sensor-values-table">
        <tr>
        <td class="top-item" style="width:90%;">${object.LabelStr}</td>
            <td>
                <button style="border:none;background-color:inherit;" onclick="Expand_selection('${stringifiedObj}')">
                </button>
            </td>
        </tr>
    </table>
<br>
`;
}

2. 在Expand_selection函数里解析字符串为对象：

function Expand_selection(objStr) {
    var obj = JSON.parse(objStr);
    // 这里就可以使用obj的所有属性了
    console.log(obj.TypeID, obj.DivId);
}

方法二：使用事件绑定（更推荐） #

放弃内联onclick，通过DOM元素绑定事件，利用闭包直接传递原对象，无需序列化：

function Append_html_block(object) {
    var generated_html = document.getElementById("custom_DIV");
    
    // 创建表格元素
    var table = document.createElement('table');
    table.className = 'sensor-values-table';
    
    var tr = document.createElement('tr');
    
    var td1 = document.createElement('td');
    td1.className = 'top-item';
    td1.style.width = '90%';
    td1.textContent = object.LabelStr;
    
    var td2 = document.createElement('td');
    var button = document.createElement('button');
    button.style.border = 'none';
    button.style.backgroundColor = 'inherit';
    
    // 绑定点击事件，直接使用原对象
    button.addEventListener('click', function() {
        Expand_selection(object);
    });
    
    td2.appendChild(button);
    tr.appendChild(td1);
    tr.appendChild(td2);
    table.appendChild(tr);
    
    generated_html.appendChild(table);
    generated_html.appendChild(document.createElement('br'));
}

此时Expand_selection可以直接接收对象：

function Expand_selection(obj) {
    // 直接使用obj的属性
    console.log(obj.TypeID, obj.LabelStr);
}

这种方法避免了字符串转义的麻烦，也更符合现代JS的事件处理规范，减少潜在的语法问题。

内容的提问来源于stack exchange，提问作者TheBestPlayer