4

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

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

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

4

3 回答 3

8

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

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

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

于 2010-02-09T15:48:12.980 回答
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);
}
于 2010-02-09T15:48:41.550 回答
1

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

button.onclick = function() {
    post_to_url(editBuzonURL, 'idBuzon', id);
};
于 2010-02-09T17:22:40.637 回答