jsバインディングイベント和解縛りイベントの方法

イベントをバインドする方法

要素関数

カスタム関数

//  1
function myAlert(){
alert("  ");
}

要素.onイベント=function(){/イベント処理関数コード}

document.getElementById("demo").onclick=function(){
alert(“  ”); 
}

この方式はJavaScriptコードにイベントを結びつけることで、JavaScriptコードとHTMLタグを分離し、文書構造が明確で、管理と開発に便利です.他の人が追加したクリックイベントによって上書きされるかもしれません.4.バインディングイベント監聴関数addEvent Listener(1)は、直接要素バインディングイベントの場合、この要素の最後の処理関数は、前の関数をカバーします.以下の通り、出力3333のみで、前の処理関数は実行されません.

  
  


    

  var btn = document.getElementById("btn");
  btn.onclick=function () {
    console.log("1111");
  };
  btn.onclick=function () {
    console.log("2222");
  };
  btn.onclick=function () {
    console.log("3333");
  };

(2)解決方法:addEvent Listener(atachEvent)1オブジェクト.addEvent Listener(「イベントタイプ」、イベントハンドリング関数、false);GoogleとNARUTOはサポートしていますが、IE 8はサポートしていません.最後のパラメータはクリックイベントが発生する時を制御しますか?それとも捕獲段階ですか?2オブジェクト.atachEvent(「onのイベントタイプ」、イベントハンドリング関数)–Googleはサポートしていません.火狐はサポートしていません.IE 8はサポートしています.

  
  


    

  var btn = document.getElementById("btn");
  btn.addEventListener("click",function () {
    console.log("1111");
  },false);
  btn.addEventListener("click",function () {
    console.log("2222");
  },false);
  btn.addEventListener("click",function () {
    console.log("3333");
  },false);

結果:1111、2222、3333全部出力
(4)互換コード

  //     .       ,      ,     ,      
  function addEventListener(element,type,fn) {
    if(element.addEventListener){
      element.addEventListener(type,fn,false);
    }else if(element.attachEvent){
      element.attachEvent("on"+type,fn);
    }else{
      element["on"+type]=fn;
    }
  }

(5)addEventListenerとatachEventの違い(1)メソッド名が異なります(2)パラメータ個数が異なります.addEvent Listenerの3つのパラメータ、atachEventの2つのパラメータ(3)addEventListener Google、ファイアフォックス、IE 11サポート、IE 8がサポートされていません.atachEvent Googleフォックスはサポートされていません.IE 11はサポートされていません.addEventListenerの中のthisは現在バインディングされているイベントの対象で、atachEventの中のthisはwindow(5)addEvent Listenerの中のイベントのタイプ(イベントの名前)はonがなく、atechEventの中のイベントのタイプ(イベントの名前)はonがあります.
事件の解決方法

オブジェクト.onイベント名=null

 
 






 document.getElementById("btn").onclick=function () {
   alert("111");
 };
 document.getElementById("btn2").onclick=function () {
   //1.    
   document.getElementById("btn").onclick=null;
 };

オブジェクト.removeEventListener(「onなしイベントタイプ」、関数名、false)

オブジェクト.removeEventListener(「onなしイベントタイプ」、関数名、false);(火狐、Google)

オブジェクト.detachEvent(「onイベントタイプ」、関数名)(IE)

注意:紐付けを解くイベントは、命名関数

でなければならない.

  
  





  function f1() {
    alert("111");
  }
  document.getElementById("btn").addEventListener("click",f1,false);
  //                       
  document.getElementById("btn2").onclick=function () {
    //       ,          ,      
    document.getElementById("btn").removeEventListener("click",f1,false);
  };

互換関数

function removeEventListener(element,type,fnName) {
    if(element.removeEventListener){
      element.removeEventListener(type,fnName,false);
    }else if(element.detachEvent){
      element.detachEvent("on"+type,fnName);
    }else{
      element["on"+type]=null;
    }
  }

ps:どのような方法でイベントを結びつけるかは、対応する方法で事件を解くべきです.