[解決済み] 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() };

BAD IDEAS

することができます。

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

が、@scunliffe によれば、非標準モードの IE では壊れるとのことです。

全くできない

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

というのは、すぐに実行されて runCommand() の結果が onClick 属性の値に設定されてしまうからです。

execBtn.setAttribute("onclick", runCommand);

解決方法は？

をFFとIEの両方で動作させるには、両方の方法で記述する必要があります。

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

謝辞 この記事 .

アップデイト : これは、時にはそれが は を使用する必要があります。 この方法は、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
}