JavaScript事件の捕獲、命中、泡が発生することを簡単に話します.

DOM事件の行為

キャプチャフェーズ(capture phase):最下層の要素

まで、最上層の要素から.

ヒットフェーズ:このイベントがtarget要素に成功すれば、イベント処理

が行われる.

発泡段階:イベントは最外層から上に移動し、父要素のイベントハンドリング関数

を順次トリガする.
DOM規格では、一連のJavaScriptイベントおよびイベントインターフェースが定義されており、DOM Level 0 Eventは、イベントをサポートするためのOclickのような属性を提供しており、DOM Level 2 EventはaddEventListener、removeEventListener、dispatchEvent、そしてIE 9のattacheventを提供している.
この二つのイベント処理モデルの違い:

前者(onclick)は、一回限りのイベント処理であり、DOM要素の属性を操作することによって達成されるので、一つの処理関数

だけを紐付けることができる.

後者(addEvent Listener)は、複数のイベント処理関数を追加するだけでなく、イベント捕獲

をサポートする.
DOM Level 0 Event
DOM Level 0 EventはNetscapeブラウザからサポートされています.最初はHTMLにOclick属性を書き込むことによってイベントバインディングを完了します.

    onclick


    function test(){}

その後、Web技術の進歩により、JavaScriptでイベントを定義し、結びつけることができました.その後、イベント処理とページ展示の分離ができます.JavaScriptをサポートしていないブラウザで、検索エンジンから見れば、ページはより互換性があります.

document.getElementById("test").onclick = function(){}

もちろん、後の時間バインディングは前のイベントのバインディングを失敗させる問題もあります.
addEvent Listener
2000年11月、W 3 CはDOM(Document Object Model)Level 2 Eventを発表し、より複雑なイベント処理モデルを提供しました.

el.addEventListener("click",func,false)

9より小さいバージョンのIEでは、イベント処理関数は、atachEventによって追加されるが、IE 11からは、atacheventはサポートされていない.
任意の複数のイベント処理関数をaddEventListenerで追加し、3番目のパラメータを使用して、サブ要素からのイベントをキャプチャするかどうかを設定します.デフォルト値はfalseです.

el.addEventListener("click",function(){},true)
el.addEventListener("click",function(){},true)

この二つの事件はいずれも実行される.
removeveEvent Listener
DOM Level 2 Eventはまた、イベント処理関数を除去するために、removevevevevevevent Listener(type,listener[,useCapture]]を提供しています.calbackは必須パラメータです.captureのデフォルト値はfalseです.
同じ傍受イベントがそれぞれ「イベントキャプチャ」と「イベントバースト」で登録された場合、全部で2回、この2回のイベントはそれぞれ除去されます.両者は干渉しません.

var div = document.getElementById("div")
var listener = function (event){}
div.addEventListener("click",listener,false)
div.removeEventListener("click",listener,false)

捕獲と発泡
最初にイベント処理の3つの段階が与えられました.捕獲、ターゲット、泡が発生します.addEventListenerの3つ目のパラメータを使ってtrueを使用すると、キャプチャ段階のイベント処理関数が追加されます.そうでなければ、発泡段階のイベント処理関数が追加されます.
現在のオブジェクトがターゲット自身である場合、追加されたイベント処理関数は対象フェーズのみで機能し、3番目のパラメータは無効です.
DisplatEvent
target.DisplatEventは、targetからイベントイベントイベントイベントを配信するために使用されます.例えば、click DOMイベントを作成することができます.

var event = new MouseEvent("click",{ 
    view:window, 
    bubbles:true, 
    cancelable:true
})
balabala.dispatchEvetne()

jquery Eventソース
jqueryの中のbind、delegate、liveなどはすべて.on()を通じて実現したので、声明を見にきます:

.on(events[,selector][,data],handler)

eventsは、複数のイベントであってもよく、スペース分離

selectorが指定されている場合、現在のイベントハンドラはselectorからのイベント

をプロキシします.

データが指定されたら、event.dataを通じて

を転送します.

add: function(elem,types,handler,data,selector){ 
     ...
     if(elem.addEventListener){ 
      elem.addEventListener(type,listener,false)
     } 
     ...
     }

より低いバージョンでは、jqueryはIEをいくつかサポートする.

if(elem.addEventListener){
      elem.addEventListener(type,eventHandle,false)
}else if(element.attachEvent){
      element.attachEvent("on"+type,eventHandle)
}

注意すべきことは、jqueryのon方法の実現において、addEventListenerの第3のパラメータは常にfalseであり、jqueryイベントエージェントは、イベントの泡によって実現され、イベント捕捉メカニズムを使用していないことである.
onとはoffを考えていますが、その声明は次の通りです.

.off(events[,selector][,handler])

off方法は、イベント処理関数を除去するためにremoveEventListener方法を呼び出します.

jQuery.removeEventm = funciton(elem,type,handle){
     if(elem.removeEventListener){
        elem.removeEventListener(type,listener,false)
      }
}