HTML中使用element.setAttribute("onclick","alert('Test');")和element.onclick = "alert('Test');"有什么区别？

Question

当我比较以下情况时，我感到惊讶：

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事件。

这是为什么呢？有任何想法吗？

- Juan Carlos Blanco Martínez

Answer 1

是的。 setAttribute 将属性添加到元素DOM节点中。对于onclick 属性，还有一个副作用，即在幕后也添加了一个onclick事件处理程序，该事件处理程序是通过将属性值“编译”为JavaScript函数而创建的。

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

现在可能有一些浏览器没有区分添加属性和直接附加处理程序之间的区别。但请记住，尽管修改文档可能会创建可脚本化对象作为副作用，但反过来并不一定成立：根据您使用的浏览器，以编程方式创建DOM结构可能会更改底层HTML文档或者不会更改。

- Roland Bouman

Answer 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);
}

- SLaks

---

你说得完全正确，这是 JQuery 和 Prototype 中实现的方式，所以请允许我编辑我的问题。 - Juan Carlos Blanco Martínez

他并不完全正确。如果你知道你不需要多个事件处理程序，使用属性而不是addEventListener/attachEvent添加事件处理程序是没有问题的。事实上，这通常更可取：首先，它在各种浏览器中几乎统一处理（除了IE需要通过window.event访问事件对象）；其次，this始终是对原始元素的引用（与attachEvent不同）；第三，阻止事件的默认操作只需要return false;而不是evt.preventDefault()/evt.returnValue = false。 - Tim Down

@Tim：我并不是说这有什么问题；我是说这不是最好的做法。 - SLaks

有时候，简单的方法是最好的，出于我所提到的原因。 - Tim Down

我对你的回答进行了微不足道的空格编辑，以便删除我一年前不必要的负评。 - Tim Down

Answer 3

在浏览器中的 JavaScript 中，如果可能的话最好不要涉及属性，因为你几乎总是可以避免它。在事件处理程序属性的情况下，IE 的行为与所有其他浏览器不同（请参见为什么使用 setAttribute 设置的 onclick 属性在 IE 中无法工作？进行讨论）。尽可能使用属性，除非有可能需要多个事件处理程序，最简单的选择是使用旧的 DOM0 事件处理程序属性，并确保将它们分配给一个函数。在这种情况下，使用您的最后一个示例即可：

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

- Tim Down