Javascriptイベントのメカニズム

私たちがよく言っているJavascriptのイベントはキャプチャ段階と実行段階と発泡段階に分けられています.対応するのは様々な基準があります.IEに代表される時間バースト機構とNetscapeに代表される時間補足機構.
1:事件の泡が噴き出した事件の処理過程は、事件が始まった時に、最も具体的な元素から最も具体的でない要素まで、つまり事件の伝播経路はサブ元素-父元素-父元素で、底から上へ実行します.
2:事件の補填事件の補填過程と泡が発生する過程は逆で、トップから下に向かって実行して、最初は最も具体的でない要素が事件を受信して、その後ずっと下に行って最も具体的な元素まで実行します.
3:イベント処理は2つの異なるイベントメカニズムが存在するため、対応するものは2つの異なるイベントバインディング機構3.1が存在します.W 3 C規格に適合する標準ブラウザバインディング機構は、DOM 2レベルイベント処理機構とも言われています.対応するイベントの指定と削除の方法は、addEventListenerとremoveveveveveveveventListenerです.function addEventListener(イベント名、イベント動作は、キャプチャフェーズにバインドされていますか?)function removeveveveventListener(イベント名、イベントアクション、キャプチャフェーズにバインドされていますか?)addEventListener追加イベントを採用するとき、複数のイベントを追加することができます.以下の通りです.

var btn = document.querySelector("#btn");
btn.addEventListener("click",function(){
  alert(this.id);
}, false);
btn.addEventListener("click", function(){
  alert("double operation");
}, false);

上記2つのイベントを追加した後、定義された順序で、すなわちIDを先に実行して、double operationを実行します.イベント実行中にイベントの流れを継続することを禁止する場合、event.stopPropgation()3.2:IEを使用するイベントバインディング機構をIEイベントハンドラと呼び、IEが使用するイベントハンドリング方法はatachEventとdetachEventである.function atachEvent(「on」＋イベント名、イベント動作)function detachEvent(「on」＋イベント名、イベント動作)は、atachEventを採用する際に、複数回のイベントを追加することができます.以下の通りです.

var btn = document.querySelector("#btn");
btn.attatchEvent("onclick",function(){
  alert("clicked");
});
btn.attatchEvent("onclick", function(){
  alert("double operation");
}, false);

なお、現在インストールされているイベントの実行順序は、定義されている順序とは逆である.すなわち、まずdouble operationが現れ、その後、clickedが現れる.実行中にイベントをキャンセルしたい場合は、event.ccerBbble=trueを採用することができます.現在のイベント処理機構の中のthisはwindow下に結合されていることに留意されたい.3.3:DOM 0級イベントハンドラは従来の方式と比較して、一つの関数を一つのイベントハンドラの属性に割り当てます.

var btn = document.querySelector("#btn");
btn.onclick=function(){
  alert("clicked");
}

イベントをキャンセルするとbtn.onclick=nullで一つのイベントだけを結びつけることができます.
4:ブラウザをまたぐイベントの処理

var EventUtil = {
  addHandler:function(element, type, handler){
    if(element.addEventListener){
      element.addEvnetListener(type, handler, false);
    }else if(element.attachEvent){
      element.attatchEvent("on" + type, handler);
    }else{
      element["on"+type] = handler;
    }
  },
  removeHandler:function(element, type,handler){
    if(element.removeEventLisntener){
        element.removeEventListener(type, handler, false);
    }else if(element.detachEvent){
        element.detachEvent("on"+type, handler);
    }else{
      element["on" + type] = null;
    }
  },
  getEvent:function(event){
    return event ? event || window.event;
  },
  getTarget:function(event){
    return event.target || event.srcElement;
  },
  preventDefault:function(event){
    if(event.preventDefault){
      event.preventDefault();
    }else{
      event.returnValue = false;
    }
  },
  stopPropagation:function(event){
    if(event.stopPrapagation){
      event.stopPropagation();
    }else{
      event.cancelBubble = true;
    }
  }
}