JS DOM Event

WelliJhon 發(fā)布于2019-08-20 16:46 / 3215人閱讀

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

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

主要的有，DOM層級事件處理、事件流、熟練一些事件處理方法等 簡介

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

事件處理程序/事件偵聽器的設(shè)定（DOM 0級/DOM 2級） 首先講DOM 0級事件處理程序

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

設(shè)定方法不同

支持處理元素數(shù)量不同

詳細點，說一些對事件處理進行設(shè)定的方式

指定為HTML元素的屬性（DOM 0級）

指定為DOM 元素的屬性（DOM 0級）

通過EventTarget.addEventListener進行設(shè)定（DOM 2級）

1. 首先是第一個，指定為HTML元素的屬性

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

優(yōu)點：

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

注意：這里的onclick全都是以小寫字母書寫。HTML不會區(qū)分大小寫字母，所以改寫為onClick也沒有問題。但是XHTML會區(qū)分大小寫字母，所以最好還是使用全部小寫的onclick，提高兼容性。

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

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

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



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


該方法將停止事件的傳播，阻止它被分派到其他 Document 節(jié)點。在事件傳播的任何階段都可以調(diào)用它。注意，雖然該方法不能阻止同一個 Document 節(jié)點上的其他事件句柄被調(diào)用，但是它可以阻止把事件分派到其他節(jié)點。
            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
            
此時只會在button執(zhí)行一次事件偵聽器，之后的傳播被阻止了。


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

2. event.stopImmediatePropagation()

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

默認操作Event.preventDefault()

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

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

Event接口對象

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

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

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



event.currentTarget指向事件所綁定的元素，而event.target始終指向事件發(fā)生的元素。
        
            
                
            
                
          
不管你在哪個節(jié)點注冊事件偵聽器，引發(fā)這一系列程序的"罪魁禍首"是button,所以target指向它。如果button節(jié)點換成a描點元素，你再點擊a，target就指向a（理解為事件目標(biāo)也行）
而currentTarget指向的是這個事件流三個階段中，事件偵聽器綁定的元素。
由于我只是初步了解了一下，重點在應(yīng)用，沒有幾個實實在在的前端練習(xí)是不行的。

目前我只是簡單了解而已，靈活運用這些方法需要不斷的敲敲敲，練項目造輪子。這里引幾個文章吧

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

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

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