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

はい。setAttributeElement DOM ノードに属性を追加します。属性については、属性値を javascript 関数に「コンパイル」することによって作成されるイベント ハンドラーonclickも追加するという、隠れた副作用があります。onclick

要素のプロパティに関数を直接割り当てると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 に答える