摘要：事件處理程序事件偵聽(tīng)器的設(shè)定級(jí)級(jí)首先講級(jí)事件處理程序?qū)κ录姆绞奖环Q(chēng)為事件處理程序或事件偵聽(tīng)器，但這兩者之間是有區(qū)別的。此外，不能對(duì)事件目標(biāo)事件類(lèi)型執(zhí)行階段都相同的對(duì)象注冊(cè)多個(gè)相同的事件偵聽(tīng)器。

關(guān)于這一篇章有太多對(duì)于我來(lái)說(shuō)雜且亂的知識(shí)點(diǎn)，單單是分別DOM層級(jí)劃分我看過(guò)的文章就有（0,2,3）的，（0,2）的，由于自己知識(shí)掌握還很薄弱所以只能參考別人文章結(jié)合自己理解來(lái)寫(xiě)，這其中也涉及到一點(diǎn)W3C標(biāo)準(zhǔn)制定史的發(fā)展，不了解的像我這樣的小白肯定會(huì)一頭霧水啦。

JavaScript中，最重要的就是對(duì)事件進(jìn)行處理。Web應(yīng)用也是通過(guò)事件驅(qū)動(dòng)程序設(shè)計(jì)其功能的。在事件驅(qū)動(dòng)程序設(shè)計(jì)中，需要注冊(cè)不同事件的處理方式。
在注冊(cè)了事件的處理方式后，瀏覽器就會(huì)在該事件發(fā)生時(shí)執(zhí)行所注冊(cè)的處理方式。所注冊(cè)的處理方式被稱(chēng)作事件處理程序、事件句柄或事件監(jiān)聽(tīng)器。
JavaScript程序設(shè)計(jì)的基本內(nèi)容之一就是獲取需要對(duì)事件進(jìn)行捕捉的元素，并針對(duì)該元素注入相應(yīng)的事件處理程序。

對(duì)事件的方式被稱(chēng)為事件處理程序或事件偵聽(tīng)器，但這兩者之間是有區(qū)別的。

設(shè)定方法不同

支持處理元素?cái)?shù)量不同

詳細(xì)點(diǎn)，說(shuō)一些對(duì)事件處理進(jìn)行設(shè)定的方式

指定為HTML元素的屬性（DOM 0級(jí)）

指定為DOM 元素的屬性（DOM 0級(jí)）

通過(guò)EventTarget.addEventListener進(jìn)行設(shè)定（DOM 2級(jí)）

這個(gè)例子中，通過(guò)字符串對(duì)onclick事件處理程序?qū)⒁獔?zhí)行的JavaScript代碼進(jìn)行了設(shè)定。如果包含代碼，可以分號(hào)分隔，當(dāng)然，事件另外定義一個(gè)函數(shù)之后再執(zhí)行該函數(shù)的方式也不會(huì)有問(wèn)題。

設(shè)定步驟簡(jiǎn)單，確保事件處理程序會(huì)在載入時(shí)被設(shè)定。如果使用第二種方式（DOM元素屬性），元素被載入時(shí)，其事件處理程序可能還沒(méi)有注冊(cè)，這時(shí)用戶(hù)執(zhí)行任何本應(yīng)觸發(fā)事件的操作，也沒(méi)有效果。

小應(yīng)用：如果事件處理程序返回一個(gè)false值，則會(huì)取消該事件的默認(rèn)行為，（啥是默認(rèn)行為，比如點(diǎn)擊a標(biāo)簽會(huì)跳轉(zhuǎn)鏈接，表單的提交等這些就屬于默認(rèn)行為），例如：當(dāng)onsubmit事件處理程序返回一個(gè)false，表單內(nèi)容不會(huì)被發(fā)送，，這可以發(fā)現(xiàn)內(nèi)容有誤時(shí)返回false取消表單數(shù)據(jù)發(fā)送?；蛘呦裣旅娲a，取消頁(yè)面跳轉(zhuǎn)。

        BAIDU.com
        

例：
        

            click me!
        
        

我們?cè)贒IV上設(shè)置CSS樣式方便我們查看，此時(shí)目標(biāo)元素就是DIV。隨著事件流入.....到目標(biāo)元素，發(fā)現(xiàn)我們的button雖然設(shè)置了事件偵聽(tīng)器，卻沒(méi)有執(zhí)行。因?yàn)榇藭r(shí)button已經(jīng)不是目標(biāo)元素，事件流經(jīng)過(guò)時(shí)，它是處于流入階段也就是捕獲階段的，但button是冒泡階段調(diào)用，所以不會(huì)執(zhí)行button,“忽略了它”。之后便是老套路：DIV-BODY-DOCUMENT.
接下來(lái)我們看看捕獲階段：
            var div = document.getElementById("div");
            var btn = document.getElementById("btn");
            // 由內(nèi)之外
            btn.addEventListener("click",function(e){
                alert("Now to the element BUTTON");
            },true);
            div.addEventListener("click",function(e){
                alert("Now to the element DIV");
            },true);
            document.body.addEventListener("click",function(e){
                alert("Now to the element BODY");
            },true);
            document.documentElement.addEventListener("click",function(e){
                alert("Now to the element DOCUMENT");
            },true);
            // click me!        DOCUMENT-BODY-DIV-BUTTON
點(diǎn)擊click，事件流流入，事件目標(biāo)是button，則到button之前是捕獲階段，恰好這些元素剛好是在捕獲階段設(shè)定事件偵聽(tīng)器，則按照DOM數(shù)規(guī)則，由外至內(nèi)一層一層執(zhí)行。但是注意：事件目標(biāo)button是在目標(biāo)階段執(zhí)行的，不是捕獲也不是冒泡，不信？我們用eventPhase來(lái)測(cè)試：
            btn.addEventListener("click",function(e){
                alert("Now to the element BUTTON");
                alert(e.eventPhase);
            },false);
            // 不論是true還是false，只要點(diǎn)擊的是button元素，eventPhase都是返回2
找到規(guī)律了嗎？也沒(méi)有什么規(guī)律，腦子里能模擬出DOM樹(shù)就都清楚了。
            btn.addEventListener("click",function(e){
                alert("Now to the element BUTTON");
            },false);
            div.addEventListener("click",function(e){
                alert("Now to the element DIV");
                alert(e.eventPhase);
            },true);
            document.body.addEventListener("click",function(e){
                alert("Now to the element BODY");
            },false);
            document.documentElement.addEventListener("click",function(e){
                alert("Now to the element DOCUMENT");
            },true);
            // click me!        DOCUMENT-DIV(2)-BODY
目標(biāo)節(jié)點(diǎn)是DIV，那事件流流入最深處就是DIV，DIV就是事件目標(biāo)，則button根本不會(huì)執(zhí)行，不管它是捕獲還是冒泡，因?yàn)樗幱贒OM樹(shù)最深處。

如何取消事件流傳播？
1.Event.stopPropagation()



終止事件在傳播過(guò)程的捕獲、目標(biāo)處理或起泡階段進(jìn)一步傳播。調(diào)用該方法后，該節(jié)點(diǎn)上處理該事件的處理程序?qū)⒈徽{(diào)用，事件不再被分派到其他節(jié)點(diǎn)。


該方法將停止事件的傳播，阻止它被分派到其他 Document 節(jié)點(diǎn)。在事件傳播的任何階段都可以調(diào)用它。注意，雖然該方法不能阻止同一個(gè) Document 節(jié)點(diǎn)上的其他事件句柄被調(diào)用，但是它可以阻止把事件分派到其他節(jié)點(diǎn)。
            btn.addEventListener("click",function(e){
                alert("Now to the element BUTTON");
                e.stopPropagation();
            },false);
            div.addEventListener("click",function(e){
                alert("Now to the element DIV");
            },false);
            document.body.addEventListener("click",function(e){
                alert("Now to the element BODY");
            },false);
            document.documentElement.addEventListener("click",function(e){
                alert("Now to the element DOCUMENT");
            },false);
            // click me!        BUTTON
            
此時(shí)只會(huì)在button執(zhí)行一次事件偵聽(tīng)器，之后的傳播被阻止了。


但是如果你點(diǎn)擊的是DIV，那依然會(huì)往上一層一層執(zhí)行事件偵聽(tīng)器，設(shè)置stopPropagation()的是button。
以此類(lèi)推...

2. event.stopImmediatePropagation()

如果你希望阻止當(dāng)前節(jié)點(diǎn)上的其他回調(diào)函數(shù)被調(diào)用的話(huà)，你可以使用更激進(jìn)的event.stopImmediatePropagation()方法。
MDN:如果某個(gè)元素有多個(gè)相同類(lèi)型事件的事件監(jiān)聽(tīng)函數(shù),則當(dāng)該類(lèi)型的事件觸發(fā)時(shí),多個(gè)事件監(jiān)聽(tīng)函數(shù)將按照順序依次執(zhí)行.如果某個(gè)監(jiān)聽(tīng)函數(shù)執(zhí)行了 event.stopImmediatePropagation()方法,則除了該事件的冒泡行為被阻止之外(event.stopPropagation方法的作用),該元素綁定的后序相同類(lèi)型事件的監(jiān)聽(tīng)函數(shù)的執(zhí)行也將被阻止。
看MDN這段話(huà)我再試著理解理解，一直再說(shuō)這事件傳播，傳播，到底是只有跨節(jié)點(diǎn)的事件處理程序被觸發(fā)才能叫傳播，同節(jié)點(diǎn)上，多個(gè)時(shí)間偵聽(tīng)器這個(gè)不能算是傳播，這樣理解就好了。
            btn.addEventListener("click",function(e){
                alert("1");
            },false);
            btn.addEventListener("click",function(e){
                alert("2");
                e.stopPropagation();
                // e.stopImmediatePropagation() 
                alert("2-1");
            },false);
            btn.addEventListener("click",function(e){
                alert("3");
            },false);
            div.addEventListener("click",function(e){
                alert("div");
            },false)
對(duì)于e.stopPropagation()而言，它能阻止的是所有階段的事件偵聽(tīng)器傳播，結(jié)果就是調(diào)用該方法的節(jié)點(diǎn)上所有的時(shí)間偵聽(tīng)器可以觸發(fā)，但是傳播被終止，也就是DIV沒(méi)有了。彈出1-2-（2-3）-3，這些都是btn節(jié)點(diǎn)上的。
換到e.stopImmediatePropagation() ，那它就是精確到節(jié)點(diǎn)內(nèi)的事件偵聽(tīng)器了
            document.documentElement.addEventListener("click",function(e){
                alert("document")
            },true)
            btn.addEventListener("click",function(e){
                alert("1");
            },false);
            btn.addEventListener("click",function(e){
                alert("2");
                e.stopImmediatePropagation(); // 這里往后的節(jié)點(diǎn)內(nèi)事件偵聽(tīng)器不能執(zhí)行
                //    e.stopPropagation();
                alert("2-1");
            },false);
            btn.addEventListener("click",function(e){
                alert("3");
            },false);
            div.addEventListener("click",function(e){
                alert("div");
            },false)
            // document/1/2/2-1
            // 阻止事件流中當(dāng)前節(jié)點(diǎn)的和所有后續(xù)節(jié)點(diǎn)的事件監(jiān)聽(tīng)器的執(zhí)行。即影響當(dāng)前結(jié)點(diǎn)的事件監(jiān)聽(tīng)器
這就是MDN：該元素綁定的后序相同類(lèi)型事件的監(jiān)聽(tīng)函數(shù)的執(zhí)行也將被阻止，這句話(huà)的意思了。

默認(rèn)操作Event.preventDefault()

在默認(rèn)情況下，點(diǎn)擊a描點(diǎn)元素后，將會(huì)跳轉(zhuǎn)至鏈接頁(yè)面。而如果在這時(shí)執(zhí)行了Event.preventDefault()方法，則不會(huì)發(fā)生這一行為。這個(gè)方法作用等同于讓一個(gè)指定為了HTML標(biāo)簽屬性或DOM屬性的事件處理程序返回一個(gè)false值。
        segmentfault
        
不過(guò)也有一些事件無(wú)法通過(guò)使用preventDefault()方法來(lái)中止。blur事件就是其中之一，它是一個(gè)焦點(diǎn)移動(dòng)至其他元素時(shí)被觸發(fā)的事件。
stopPropagation()和preventDefault()方法不僅能夠用于事件冒泡階段，在其他階段中也能夠使用這些方法。

IE
IE瀏覽器下，綁定/刪除（attachEvent/detachEvent）、阻止事件冒泡（cancelBubble）、阻止事件的默認(rèn)行為（returnValue）、用于獲取事件的目標(biāo)（srcElement）等等需要另外探討，大體相同。到時(shí)候我另開(kāi)一篇來(lái)繼續(xù)學(xué)習(xí)。

Event接口對(duì)象

關(guān)于target和currentTarget
這兩個(gè)屬性在不同情況下指向也不盡相同，先來(lái)看看概念

target：事件屬性可返回事件的目標(biāo)節(jié)點(diǎn)（觸發(fā)該事件的節(jié)點(diǎn)），如生成事件的元素、文檔或窗口。

currentTarget 事件屬性返回其監(jiān)聽(tīng)器觸發(fā)事件的節(jié)點(diǎn)，即當(dāng)前處理該事件的元素、文檔或窗口。
在捕獲和起泡階段，該屬性是非常有用的，因?yàn)樵谶@兩個(gè)節(jié)點(diǎn)，它不同于 target 屬性。



event.currentTarget指向事件所綁定的元素，而event.target始終指向事件發(fā)生的元素。
        

            

                click me!
            
        
        
          
不管你在哪個(gè)節(jié)點(diǎn)注冊(cè)事件偵聽(tīng)器，引發(fā)這一系列程序的"罪魁禍?zhǔn)?是button,所以target指向它。如果button節(jié)點(diǎn)換成a描點(diǎn)元素，你再點(diǎn)擊a，target就指向a（理解為事件目標(biāo)也行）
而currentTarget指向的是這個(gè)事件流三個(gè)階段中，事件偵聽(tīng)器綁定的元素。

由于我只是初步了解了一下，重點(diǎn)在應(yīng)用，沒(méi)有幾個(gè)實(shí)實(shí)在在的前端練習(xí)是不行的。

目前我只是簡(jiǎn)單了解而已，靈活運(yùn)用這些方法需要不斷的敲敲敲，練項(xiàng)目造輪子。這里引幾個(gè)文章吧

DOM事件簡(jiǎn)介
stopImmediatePropagation應(yīng)用

事件綁定的幾種方式、stopImmediatePropagation和stopPropagation的區(qū)別 

Javascript DOM Event對(duì)象方法詳解 - 博客頻道 - CSDN.NET