HTML 随 element.setAttribute("onclick","alert('Test');") 和 element.onclick = "alert('Test');";答案

【问题标题】：HTML changes with element.setAttribute("onclick","alert('Test');") and element.onclick = "alert('Test');";HTML 随 element.setAttribute("onclick","alert('Test');") 和 element.onclick = "alert('Test');";
【发布时间】：2010-02-09 15:42:59
【问题描述】：

比较以下案例时，我感到很惊讶：

button = document.getElementById("addSugerenciaButton");

if (button != null) {
   button.onclick = "post_to_url('" + addSugerenciaURL + "', idBuzon', '" + id + "');";
}

button = document.getElementById("removeBuzonButton");

if (button != null) {
    button.onclick = function() {
        if (!confirm(removeSugerenciaMessage)) {
            return false; 
        };
        post_to_url(removeBuzonURL, 'idBuzon', id);
    };
}

button = document.getElementById("editBuzonButton");

if (button != null) {
    button.setAttribute("onclick","post_to_url('" + editBuzonURL + "', 'idBuzon', '" + id + "');");
}

只是后者似乎改变了 HTML（至少使用 Firebug 进行检查），而其余的虽然也可以正常工作，但它们没有在 editBuzonButton 元素中显示任何 onclick 事件。

任何想法为什么会发生这种情况？

【问题讨论】：

标签： javascript onclick setattribute

【解决方案1】：

是的。 setAttribute 将属性添加到 Element DOM 节点。对于onclick 属性，还有一个副作用，即添加onclick 事件处理程序，这是通过将属性值“编译”到javascript 函数中来实现的。

直接给元素的onclick属性赋值函数会附加处理程序，但不会自动向DOM节点添加属性。

现在可能有浏览器不区分添加属性和直接附加处理程序。但请记住，虽然修改文档可能会创建可编写脚本的对象作为副作用，但反过来不一定是这样：根据您碰巧使用的浏览器，以编程方式创建 DOM 结构可能会或可能不会更改文档底层的 HTML .

【讨论】：

【解决方案2】：

虽然我们都知道在 HTML 元素中设置 onclick 事件最标准的方法是通过element.onclick = "alert('Example');";，

错了。

你应该使用addEventListener / attachEvent。

例如：

if (element.addEventListener) {
    element.addEventListener('click', handler, false); 
} else if (el.attachEvent) {
    element.attachEvent('onclick', handler);
}

【讨论】：

你说得对，JQuery和Prototype就是这样实现的，所以请让我编辑一下我的问题。
他并不完全正确。如果您知道不需要多个事件处理程序，则使用属性而不是 addEventListener / attachEvent 添加事件处理程序没有任何问题。事实上，它通常更可取：首先，它在浏览器之间几乎统一处理（除了 IE 要求通过window.event 访问事件对象）；其次，this 始终是原始元素的引用（与attachEvent 不同）；第三，防止事件的默认动作是return false;而不是evt.preventDefault()/evt.returnValue = false的问题。
@Tim：我不是说它有问题；我的意思是这不是最好的方法。
由于我给出的原因，有时更简单的方法是最好的。
我对你的答案做了一个简单的空白编辑，这样我就可以删除我一年前毫无根据的反对票。

【解决方案3】：

在浏览器中的 JavaScript 中，如果可以避免属性，最好不要与属性有任何关系，这几乎总是可以的。在事件处理程序属性的情况下，IE 的行为与所有其他浏览器不同（有关此问题的讨论，请参阅Why does an onclick property set with setAttribute fail to work in IE?）。尽可能使用属性，除非有可能需要多个事件处理程序，否则最简单的选择是使用旧的 DOM0 事件处理程序属性并确保为它们分配一个函数。在这种情况下，使用您的最后一个示例：

button.onclick = function() {
    post_to_url(editBuzonURL, 'idBuzon', id);
};

【讨论】：