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

为什么会发生这种情况？

Answer 1

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

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

现在有可能是浏览器没有区分添加属性和附加处理程序directy。但请记住，虽然修改文档可能会创建脚本对象作为副作用，但反过来情况并非如此：根据您碰巧使用的浏览器，以编程方式创建DOM结构可能会也可能不会更改文档下的HTML

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

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

HTML更改为element.setAttribute（“onclick”，“alert（'Test'）;”）和element.onclick =“alert（'Test'）;”;

3 个答案: