为什么用setAttribute设置的onclick属性无法在IE中工作？

Question

今天就遇到这个问题，以防其他人遇到同样的问题。

var execBtn = document.createElement('input');
execBtn.setAttribute("type", "button");
execBtn.setAttribute("id", "execBtn");
execBtn.setAttribute("value", "Execute");
execBtn.setAttribute("onclick", "runCommand();");

原来要让IE在动态生成的元素上运行onclick，我们不能使用setAttribute。相反，我们需要使用包装要运行的代码的匿名函数在对象上设置onclick属性。

execBtn.onclick = function() { runCommand() };

错误提示：

你可以做

execBtn.setAttribute("onclick", function() { runCommand() });

但根据@scunliffe，它将以非标准模式在IE中中断。

你根本做不到

execBtn.setAttribute("onclick", runCommand() );

因为它会立即执行，并将runCommand（）的结果设置为onClick属性值，所以您也无法执行

execBtn.setAttribute("onclick", runCommand);

Answer 1

要使此功能在FF和IE中均有效，您必须同时编写两种方式：

    button_element.setAttribute('onclick','doSomething();'); // for FF
    button_element.onclick = function() {doSomething();}; // for IE

UPDATE ：这是证明有时 _是_必须使用的setAttribute！如果您需要从HTML中获取原始的onclick属性并将其添加到onclick事件中，则可以使用此方法，以便不会被覆盖：

// get old onclick attribute
var onclick = button_element.getAttribute("onclick");

// if onclick is not a function, it's not IE7, so use setAttribute
if(typeof(onclick) != "function") { 
    button_element.setAttribute('onclick','doSomething();' + onclick); // for FF,IE8,Chrome

// if onclick is a function, use the IE7 method and call onclick() in the anonymous function
} else {
    button_element.onclick = function() { 
        doSomething();
        onclick();
    }; // for IE7
}