jsイベントの追加と削除

1907 ワード

イベントの追加
一般的にdom要素にイベントを追加する方法は、次のとおりです.
var dom = document.getElementById("xxx")
dom.onclick=method

しかし、domに複数のバインドイベントを追加するとしたら?
dom.onclick=method1
dom.onclick=method2
dom.onclick=method3

このように書くとmethod 3のみが有効であることがわかり、この場合はonclickではなくattachEventaddEventListenerを使用します.
attachEvent
IEブラウザでは、attachEventメソッドを使用してイベントを追加
dom.attachEvent("onclick",method1);
dom.attachEvent("onclick",method2);
dom.attachEvent("onclick",method3);

注意しなければならないのは、イベントに接頭辞on、例えばonclick onsubmit onchange、実行順序method3 > method2 > method1、ツッコミのないIE...
addEventListener
IE以外のブラウザでW 3 C規格のaddEventListenerメソッドをサポート
dom.addEventListener("click",method1,false);
dom.addEventListener("click",method2,false);
dom.addEventListener("click",method3,false);

実行順序method1 > method2 > method3、3番目のパラメータは、イベントがキャプチャまたはバブルフェーズで実行されるかどうかを指定します.デフォルトfalse:イベントはバブル(子から親)フェーズで実行され、true:イベントはキャプチャ(親から子)フェーズで実行されます.
イベントの削除
removeEventListener addEventListenerは削除イベントremoveEventListenerに対応し、登録イベントを削除するには2つの方法パラメータが同じである必要がある.
dom.removeEventListener("click",method1,false);

detachEvent attachEventは削除イベントdetachEventに対応し、登録イベントを削除するには2つの方法パラメータが同じである必要がある.
dom.attachEvent("onclick",method1);

参考記事:
https://www.cnblogs.com/leihe... https://blog.csdn.net/weixin_...