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

今天遇到这个问题,发布以防其他人有同样的问题.

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

Shaike Katz.. 41

要使这个工作在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
}

但是`getAttribute` /`setAttribute`的优点是什么呢？使用`.onclick`属性而不是get和set都可以在所有浏览器中使用,并且不会引入麻烦的范围差异. (4认同)

button_element.onclick = function()..适用于IE和Firefox.就此而言,它也适用于Opera,Safari和Chrome.是否需要setAttribute(对于Firefox)？ (3认同)

`onclick`方式在FF和IE中运行良好.没有理由使用`setAttribute`版本. (3认同)

---

scunliffe.. 10

有一个大的属性的集合,你不能在IE中设置使用().setAttribute其中包括每一个内联事件处理程序.

详情请见此处:

http://webbugtrack.blogspot.com/2007/08/bug-242-setattribute-doesnt-always-work.html

1> Shaike Katz..：

---

要使这个工作在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
}

---

但是`getAttribute` /`setAttribute`的优点是什么呢？使用`.onclick`属性而不是get和set都可以在所有浏览器中使用,并且不会引入麻烦的范围差异.

---

button_element.onclick = function()..适用于IE和Firefox.就此而言,它也适用于Opera,Safari和Chrome.是否需要setAttribute(对于Firefox)？

---

`onclick`方式在FF和IE中运行良好.没有理由使用`setAttribute`版本.

2> scunliffe..：

---

有一个大的属性的集合,你不能在IE中设置使用().setAttribute其中包括每一个内联事件处理程序.

详情请见此处:

http://webbugtrack.blogspot.com/2007/08/bug-242-setattribute-doesnt-always-work.html

3> 小智..：

---

效果很好!

现在使用两种方式似乎都是不必要的:

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

显然适用于所有当前的浏览器.

在Windows上的当前Firefox,IE,Safari,Opera,Chrome中进行了测试; Ubuntu上的Firefox和Epiphany; 没有在Mac或移动系统上测试过.

克雷格:我试试"document.getElementById(ID).type ='password';

有没有人用不同的引擎检查"AddEventListener"方法？