成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Javascript事件流

pcChao / 2995人閱讀

摘要：見下圖更直觀在事件流中，事件的目標(biāo)在捕獲階段不會接受到事件，這意味著在捕獲階段，事件從到后就停止了。下一個階段是目標(biāo)階段，于是事件在上發(fā)生，并在事件處理中被看成是冒泡階段的一部分，然后，冒泡階段發(fā)生，事件又傳回。

CONTENTS

DOM事件流

事件冒泡

阻止冒泡

事件捕獲

事件委托

DOM事件流

1.什么是事件流？

事件流所描述的是從頁面中接受事件的順序

2.DOM事件流的三個階段？

事件流包括三個階段：事件捕獲階段、處于目標(biāo)階段、事件冒泡階段

3.DOM事件流三個階段的執(zhí)行順序？

首先發(fā)生的事件捕獲，為截取事件提供機會，然后是目標(biāo)接受事件，最后是事件冒泡階段，所以可以在最后一個階段對事件作出響應(yīng)。見下圖更直觀：

在dom事件流中，事件的目標(biāo)在捕獲階段不會接受到事件，這意味著在捕獲階段，事件從 document? 到? div 后就停止了。下一個階段是目標(biāo)階段，于是事件在 div 上發(fā)生，并在事件處理中被看成是冒泡階段的一部分， 然后，冒泡階段發(fā)生，事件又傳回document。

事件冒泡

1.什么是事件冒泡？
當(dāng)事件發(fā)生后，這個事件就要開始傳播（從里向外或者從外向里）

2.為什么要傳播？

? ? ? ? 因為事件源本身（可能）并沒有處理事件的能力，即處理事件的函數(shù)（方法）并未綁定在該事件源上。例如我們點擊一個按鈕時，就會產(chǎn)生一個click事件，但這個按鈕本身可能不能處理這個事件，事件必須從這個按鈕傳播出去，從而到達能夠處理這個事件的代碼中（例如我們給按鈕的onclick屬性賦一個函數(shù)的名字，就是讓這個函數(shù)去處理該按鈕的click事件），或者按鈕的父級綁定有事件函數(shù)，當(dāng)該點擊事件發(fā)生在按鈕上，按鈕本身并無處理事件函數(shù)，則傳播到父級去處理。

小案例代碼如下：

?



    
    Document


    

        
    




?

當(dāng)我們點擊按鈕button時，事件時這樣傳播的：

(1) button

(2) div

(3) body

(4) html

(5) document

阻止冒泡

1.為什么要阻止冒泡？

例如：document上有A事件，div有B事件，div里面的span有C事件，如果不給span和div加阻止事件冒泡的話，點擊span時就會觸發(fā)到div的B事件、document的A事件，當(dāng)點擊span時不想觸發(fā)div和document的事件就要加上阻止事件冒泡，div也是一樣的道理，如果我們不想讓點擊某個事件時父級受到影響，這時就應(yīng)阻止冒泡。

eg：不加阻止冒泡事件，代碼如下：

css代碼：

?
   

?

js+html代碼：

?

    

        

    

    


?

效果如下：

如圖可以看出當(dāng)點擊? box1? 時，只會提示‘您點擊了box1’? 而點擊? ?box2? 時，竟然輸出了兩句提示，如果我們不想要這種效果，我們只想要在點擊了哪個按鈕后就執(zhí)行該按鈕的命令，也就是說阻止冒泡。

下面給出上述小案例的阻止冒泡方法：一句代碼搞定，改變 box2? 的觸發(fā)事件，代碼如下：

?
box2.onclick = function(e){
            console.log("您點擊了box2");
            e.stopPropagation();
        }

效果圖如下：這樣就實現(xiàn)阻止冒泡

2.阻止冒泡的方法。

①event.stopPropagation()方法?（這個方法小編在上面已經(jīng)給出了例子，這里就不在給出具體的例子）

這是阻止事件的冒泡方法，不讓事件向documen上蔓延，但是默認事件仍然會執(zhí)行，當(dāng)你調(diào)用這個方法的時候，如果點擊一個連接，這個連接仍然會被打開，

②event.preventDefault()方法

這是阻止默認事件的方法，調(diào)用此方法是，連接不會被打開，但是會發(fā)生冒泡，冒泡會傳遞到上一層的父元素；

下面給大家一個小例子：看圖說話，在下面的空白處，無論我怎么點擊右鍵，無論在什么位置點擊，都會出現(xiàn)默認的東西，如果我們不想要這種默認的東西怎么辦呢？繼續(xù)看圖下面的案例，馬上帶你飛，走起-------

eg：阻止瀏覽器右鍵默認事件

css代碼：

?html+js代碼：


  

      
    
          
  • 刷新
    • 
          
  • 刪除
    • 
          
  • 命名
    •

效果如下：

③?return false（這里的例子就不贅述了，有心的小伙伴可以動手試試）

這個方法比較暴力，他會同時阻止事件冒泡也會阻止默認事件；寫上此代碼，連接不會被打開，事件也不會傳遞到上一層的父元素；可以理解為return false就等于同時調(diào)用了event.stopPropagation()和event.preventDefault()

事件捕獲

事件捕獲和事件冒泡是剛好相反的，事件捕獲是指不太具體的節(jié)點應(yīng)該更早的接收到事件，而最具體的節(jié)點應(yīng)該最后接收到事件

案例走起：

css代碼：

?


?

html+js代碼：

?

    

        

            

        

    

    


?

動態(tài)效果如下：

當(dāng)我點擊最里面的 box3 時，我們可以看到最外層的事件先被觸發(fā)，最后才是我們點擊的 box3? 事件被觸發(fā)，這便是事件捕獲。?
事件委托

1.什么是事件委托？
事件委托又名事件代理，JavaScript高級程序設(shè)計上講：事件委托就是利用事件冒泡，只指定一個事件處理程序，就可以管理某一類型的所有事件。
官方語言太抽象，其實就是一個生活中的原理--------班級收作業(yè)
收作業(yè)有兩種方法：一是誰寫完了自己去交個老師。二是寫完了統(tǒng)一交給班長，讓班長交給老師，現(xiàn)實當(dāng)中，我們大都采用第二種方法。這就可以理解為委托，無論是誰交給老師，目的只有一個就是作業(yè)能夠正常上交。
2.為什么要用委托？

一般來說，dom需要有事件處理程序，我們都會直接給它設(shè)事件處理程序就好了，那如果是很多的dom需要添加事件處理呢？比如我們有100個li，每個li都有相同的click點擊事件，可能我們會用for循環(huán)的方法，來遍歷所有的li，然后給它們添加事件，那這么做會存在什么影響呢？
在JavaScript中，添加到頁面上的事件處理程序數(shù)量將直接關(guān)系到頁面的整體運行性能，因為需要不斷的與dom節(jié)點進行交互，訪問dom的次數(shù)越多，引起瀏覽器重繪與重排的次數(shù)也就越多，就會延長整個頁面的交互就緒時間，這就是為什么性能優(yōu)化的主要思想之一就是減少DOM操作的原因；如果要用事件委托，就會將所有的操作放到j(luò)s程序里面，與dom的操作就只需要交互一次，這樣就能大大的減少與dom的交互次數(shù)，提高性能；


每個函數(shù)都是一個對象，是對象就會占用內(nèi)存，對象越多，內(nèi)存占用率就越大，自然性能就越差了（內(nèi)存不夠用，是硬傷，哈哈），比如上面的100個li，就要占用100個內(nèi)存空間，如果是1000個，10000個呢，那只能說呵呵了，如果用事件委托，那么我們就可以只對它的父級（如果只有一個父級）這一個對象進行操作，這樣我們就需要一個內(nèi)存空間就夠了，是不是省了很多，自然性能就會更好。

3.事件委托原理

事件委托是利用事件的冒泡原理來實現(xiàn)的，何為事件冒泡呢？就是事件從最深的節(jié)點開始，然后逐步向上傳播事件，舉個例子：頁面上有這么一個節(jié)點樹，div>ul>li>a;比如給最里面的a加一個click點擊事件，那么這個事件就會一層一層的往外執(zhí)行，執(zhí)行順序a>li>ul>div，有這樣一個機制，那么我們給最外面的div加點擊事件，那么里面的ul，li，a做點擊事件的時候，都會冒泡到最外層的div上，所以都會觸發(fā)，這就是事件委托，委托它們父級代為執(zhí)行事件。

4.事件委托怎么實現(xiàn)？

小案例繼續(xù)走：

代碼如下：

效果見下圖：

當(dāng)用事件委托的時候，根本就不需要去遍歷元素的子節(jié)點，只需要給父級元素添加事件就好了，其他的都是在js里面的執(zhí)行，這樣可以大大的減少dom操作，這才是事件委托的精髓所在。

5.委托總結(jié)

那什么樣的事件可以用事件委托，什么樣的事件不可以用呢？
適合用事件委托的事件：click，mousedown，mouseup，keydown，keyup，keypress。


值得注意的是，mouseover和mouseout雖然也有事件冒泡，但是處理它們的時候需要特別的注意，因為需要經(jīng)常計算它們的位置，處理起來不太容易。


不適合的就有很多了，舉個例子，mousemove，每次都要計算它的位置，非常不好把控，在不如說focus，blur之類的，本身就沒用冒泡的特性，自然就不能用事件委托了。

好了，今天就到這里，下次我想介紹一下事件綁定，歡迎大家關(guān)注和閱讀，以上純屬個人見解，如有不對的地方，萬望指正，不勝感謝！

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/116925.html

相關(guān)文章

  • JavaScript-淺談DOM事件流

    摘要：事件流指的是從頁面接收事件的順序。級事件規(guī)定方法的第三個參數(shù)設(shè)為，表示事件在捕獲階段觸發(fā)。目前支持事件捕獲流的瀏覽器有，，，，。事件流根據(jù)級事件規(guī)定，事件流應(yīng)該包括三個階段，事件捕獲階段，處于目標(biāo)階段和事件冒泡階段。 什么是事件？（敲黑板） 事件，就是文檔或瀏覽器窗口發(fā)生的一些特定的交互瞬間。（by 《JavaScript高級程序設(shè)計》）比如鼠標(biāo)點擊，雙擊，滾動條滑動... 什么是事件...

    haitiancoder 評論0 收藏0

  • 《JavaScript高級程序設(shè)計》學(xué)習(xí)筆記：JavaScript中的事件流和事件處理程序

    摘要：可以使用偵聽器或處理程序來預(yù)訂事件，以便事件發(fā)生時執(zhí)行相應(yīng)的代碼。響應(yīng)某個事件的函數(shù)稱為事件處理程序或事件偵聽器?？梢詣h除通過級方法指定的事件處理程序。 JavaScript和HTML之間的交互是通過事件實現(xiàn)的。 事件：文檔或瀏覽器窗口中發(fā)生的一些特定的交互瞬間。 可以使用偵聽器（或處理程序來預(yù)訂事件），以便事件發(fā)生時執(zhí)行相應(yīng)的代碼。 1. 事件流 事件流：從頁面中接收事件的順序。 ...

    Rocko 評論0 收藏0

  • javascript 事件流 捕獲與冒泡

    摘要：捕獲型事件流事件的傳播是從最不特定的事件目標(biāo)到最特定的事件目標(biāo)。鼠標(biāo)移入元素范圍內(nèi)觸發(fā)，該事件不冒泡，即鼠標(biāo)移到其后代元素上時不會觸發(fā)。 事件通常與函數(shù)配合使用，這樣就可以通過發(fā)生的事件來驅(qū)動函數(shù)執(zhí)行，事件是可以被 JavaScript 偵測到的行為 綁定事件 首先我們要先綁定事件 綁定事件有三種 1）在DOM元素中直接綁定，我們可以在DOM元素上綁定onclick、onmouseov...

    DC_er 評論0 收藏0

  • javascript 事件流 捕獲與冒泡

    摘要：捕獲型事件流事件的傳播是從最不特定的事件目標(biāo)到最特定的事件目標(biāo)。鼠標(biāo)移入元素范圍內(nèi)觸發(fā)，該事件不冒泡，即鼠標(biāo)移到其后代元素上時不會觸發(fā)。 事件通常與函數(shù)配合使用，這樣就可以通過發(fā)生的事件來驅(qū)動函數(shù)執(zhí)行，事件是可以被 JavaScript 偵測到的行為 綁定事件 首先我們要先綁定事件 綁定事件有三種 1）在DOM元素中直接綁定，我們可以在DOM元素上綁定onclick、onmouseov...

    aboutU 評論0 收藏0

  • JavaScript 事件——“事件流和事件處理程序”的注意要點

    摘要：事件流級事件規(guī)定的事件流包括三個階段事件捕獲階段處于目標(biāo)階段和事件冒泡階段。事件處理程序的名字以開頭，如等。如使用級方法指定的事件處理程序被認為是元素的方法。 事件流 事件流描述的是從頁面中接收事件的順序。IE的事件流是事件冒泡流，而Netscape Communicator的事件流是事件捕獲流。 事件冒泡 即事件開始時由最具體的元素接收，然后逐級向上傳播到較為不具體的節(jié)點。如： ...

    Amio 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<