jsのバインディングイベントとアンバインドイベントについて詳しく解説

この記事では主にjsのバインディングイベントとアンバインドイベントに関する関連知識を紹介します。非常に良い基準値を持っています。以下のエディターで見てみましょう

jsで複数のイベントをバインドするために使用されるメソッドは2つあります:attachEventとaddEventListenerですが、これら2つのメソッドには違いがあります

attachEventメソッドはIE678のみをサポートしており、他のブラウザとは互換性がありません

addEventListenerメソッド

addEventListenerメソッド

addEventListenerメソッド

addEventListenerメソッド

addEventListenerメソッド

addEventListenerメソッド

p.addEventListener('click',fn);

p.addEventListener('click',fn2);
function fn(){ console.log("春雨绵绵"); }

function fn2(){
        console.log("到处潮湿");
      }

attachEventメソッド

p.attachEvent('onclick',fn);
p.attachEvent('onclick',fn2);
function fn(){ console.log("春雨绵绵"); }
function fn2(){
        console.log("到处潮湿");
      }

注:attachEvent によってバインドされたイベントメソッドにはonがあり、addEventListenerによってバインドされるイベントにはonがありません

以下にIE、Firefox、Googleと互換性のあるメソッドを書きました

var p=document.getElementsByTagName("p")[0];
      addEvent('click',p,fn)
      function addEvent(str,ele,fn){
        ele.attachEvent?ele.attachEvent('on'+str,fn):ele.addEventListener(str,fn);
      }
      function fn(){
        console.log("春雨绵绵");
      }

これで互換性の問題は完全に解決されます

バインディングイベントがある場合、その場合はバインド解除イベントが必要ですが、アンバインド イベントはバインド イベントと同じです

ele.detachEvent("onclick",fn);

removeEventListener的写法:

ele.removeEventListener("click",fn);

detachEvent メソッドは IE678 のみをサポートしており、他のブラウザとは互換性がありません

removeEventListenerメソッド Firefox および Google と互換性あり、IE8 以下とは互換性なし

🎜🎜🎜🎜detachEvent メソッドの記述:🎜🎜🎜🎜ele.detachEvent("onclick",fn);🎜 🎜 🎜🎜方法RemoveEventListener:🎜🎜🎜🎜ele.removeEventListener("click",fn);🎜🎜参考までに互換性メソッドを以下に書きました、実装も非常に簡単です🎜

function remove(str,ele,fn){
        ele.detachEvent?ele.detachEvent("on"+str,fn):ele.removeEventListener(str,fn);
      }

🎜 🎜🎜注: イベント AttachEvent をバインディングする場合でも、イベント detachEvent を削除する場合でも、RemoveEventListenser と addEventListenser を追加する必要はありません🎜🎜🎜。

以上がjsのバインディングイベントとアンバインドイベントについて詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。