資訊專欄INFORMATION COLUMN
摘要：見下圖更直觀在事件流中，事件的目標在捕獲階段不會接受到事件，這意味著在捕獲階段，事件從到后就停止了。下一個階段是目標階段，于是事件在上發生，并在事件處理中被看成是冒泡階段的一部分，然后，冒泡階段發生，事件又傳回。
CONTENTS
DOM事件流
事件冒泡
阻止冒泡
事件捕獲
事件委托
DOM事件流1.什么是事件流？
事件流所描述的是從頁面中接受事件的順序
2.DOM事件流的三個階段？
事件流包括三個階段：事件捕獲階段、處于目標階段、事件冒泡階段
3.DOM事件流三個階段的執行順序？
首先發生的事件捕獲，為截取事件提供機會，然后是目標接受事件，最后是事件冒泡階段，所以可以在最后一個階段對事件作出響應。見下圖更直觀：
在dom事件流中，事件的目標在捕獲階段不會接受到事件，這意味著在捕獲階段，事件從 document? 到? div 后就停止了。下一個階段是目標階段，于是事件在 div 上發生，并在事件處理中被看成是冒泡階段的一部分， 然后，冒泡階段發生，事件又傳回document。
事件冒泡1.什么是事件冒泡？
當事件發生后，這個事件就要開始傳播（從里向外或者從外向里）
2.為什么要傳播？
? ? ? ? 因為事件源本身（可能）并沒有處理事件的能力，即處理事件的函數（方法）并未綁定在該事件源上。例如我們點擊一個按鈕時，就會產生一個click事件，但這個按鈕本身可能不能處理這個事件，事件必須從這個按鈕傳播出去，從而到達能夠處理這個事件的代碼中（例如我們給按鈕的onclick屬性賦一個函數的名字，就是讓這個函數去處理該按鈕的click事件），或者按鈕的父級綁定有事件函數，當該點擊事件發生在按鈕上，按鈕本身并無處理事件函數，則傳播到父級去處理。
小案例代碼如下：
?
Document
?
當我們點擊按鈕button時，事件時這樣傳播的：
(1) button
(2) div
(3) body
(4) html
(5) document
阻止冒泡1.為什么要阻止冒泡？
例如：document上有A事件，div有B事件，div里面的span有C事件，如果不給span和div加阻止事件冒泡的話，點擊span時就會觸發到div的B事件、document的A事件，當點擊span時不想觸發div和document的事件就要加上阻止事件冒泡，div也是一樣的道理，如果我們不想讓點擊某個事件時父級受到影響，這時就應阻止冒泡。
eg：不加阻止冒泡事件，代碼如下：
css代碼：
? ?
js+html代碼：
?
?
效果如下：
如圖可以看出當點擊? box1? 時，只會提示‘您點擊了box1’? 而點擊? ?box2? 時，竟然輸出了兩句提示，如果我們不想要這種效果，我們只想要在點擊了哪個按鈕后就執行該按鈕的命令，也就是說阻止冒泡。
下面給出上述小案例的阻止冒泡方法：一句代碼搞定，改變 box2? 的觸發事件，代碼如下：
?
box2.onclick = function(e){
console.log("您點擊了box2");
e.stopPropagation();
}
效果圖如下：這樣就實現阻止冒泡
2.阻止冒泡的方法。
①event.stopPropagation()方法?（這個方法小編在上面已經給出了例子，這里就不在給出具體的例子）
這是阻止事件的冒泡方法，不讓事件向documen上蔓延，但是默認事件仍然會執行，當你調用這個方法的時候，如果點擊一個連接，這個連接仍然會被打開，
②event.preventDefault()方法
這是阻止默認事件的方法，調用此方法是，連接不會被打開，但是會發生冒泡，冒泡會傳遞到上一層的父元素；
下面給大家一個小例子：看圖說話，在下面的空白處，無論我怎么點擊右鍵，無論在什么位置點擊，都會出現默認的東西，如果我們不想要這種默認的東西怎么辦呢？繼續看圖下面的案例，馬上帶你飛，走起-------
eg：阻止瀏覽器右鍵默認事件
css代碼：
?html+js代碼：
- 刷新
- 刪除
- 命名
效果如下：
③?return false（這里的例子就不贅述了，有心的小伙伴可以動手試試）
這個方法比較暴力，他會同時阻止事件冒泡也會阻止默認事件；寫上此代碼，連接不會被打開，事件也不會傳遞到上一層的父元素；可以理解為return false就等于同時調用了event.stopPropagation()和event.preventDefault()
事件捕獲事件捕獲和事件冒泡是剛好相反的，事件捕獲是指不太具體的節點應該更早的接收到事件，而最具體的節點應該最后接收到事件
案例走起：
css代碼：
? ?
html+js代碼：
?
?
動態效果如下：
當我點擊最里面的 box3 時，我們可以看到最外層的事件先被觸發，最后才是我們點擊的 box3? 事件被觸發，這便是事件捕獲。?事件委托
1.什么是事件委托？
事件委托又名事件代理，JavaScript高級程序設計上講：事件委托就是利用事件冒泡，只指定一個事件處理程序，就可以管理某一類型的所有事件。
官方語言太抽象，其實就是一個生活中的原理--------班級收作業
收作業有兩種方法：一是誰寫完了自己去交個老師。二是寫完了統一交給班長，讓班長交給老師，現實當中，我們大都采用第二種方法。這就可以理解為委托，無論是誰交給老師，目的只有一個就是作業能夠正常上交。
2.為什么要用委托？
一般來說，dom需要有事件處理程序，我們都會直接給它設事件處理程序就好了，那如果是很多的dom需要添加事件處理呢？比如我們有100個li，每個li都有相同的click點擊事件，可能我們會用for循環的方法，來遍歷所有的li，然后給它們添加事件，那這么做會存在什么影響呢？在JavaScript中，添加到頁面上的事件處理程序數量將直接關系到頁面的整體運行性能，因為需要不斷的與dom節點進行交互，訪問dom的次數越多，引起瀏覽器重繪與重排的次數也就越多，就會延長整個頁面的交互就緒時間，這就是為什么性能優化的主要思想之一就是減少DOM操作的原因；如果要用事件委托，就會將所有的操作放到js程序里面，與dom的操作就只需要交互一次，這樣就能大大的減少與dom的交互次數，提高性能；
每個函數都是一個對象，是對象就會占用內存，對象越多，內存占用率就越大，自然性能就越差了（內存不夠用，是硬傷，哈哈），比如上面的100個li，就要占用100個內存空間，如果是1000個，10000個呢，那只能說呵呵了，如果用事件委托，那么我們就可以只對它的父級（如果只有一個父級）這一個對象進行操作，這樣我們就需要一個內存空間就夠了，是不是省了很多，自然性能就會更好。
3.事件委托原理
事件委托是利用事件的冒泡原理來實現的，何為事件冒泡呢？就是事件從最深的節點開始，然后逐步向上傳播事件，舉個例子：頁面上有這么一個節點樹，div>ul>li>a;比如給最里面的a加一個click點擊事件，那么這個事件就會一層一層的往外執行，執行順序a>li>ul>div，有這樣一個機制，那么我們給最外面的div加點擊事件，那么里面的ul，li，a做點擊事件的時候，都會冒泡到最外層的div上，所以都會觸發，這就是事件委托，委托它們父級代為執行事件。
4.事件委托怎么實現？
小案例繼續走：
代碼如下：
效果見下圖：
當用事件委托的時候，根本就不需要去遍歷元素的子節點，只需要給父級元素添加事件就好了，其他的都是在js里面的執行，這樣可以大大的減少dom操作，這才是事件委托的精髓所在。
5.委托總結
那什么樣的事件可以用事件委托，什么樣的事件不可以用呢？適合用事件委托的事件：click，mousedown，mouseup，keydown，keyup，keypress。
值得注意的是，mouseover和mouseout雖然也有事件冒泡，但是處理它們的時候需要特別的注意，因為需要經常計算它們的位置，處理起來不太容易。
不適合的就有很多了，舉個例子，mousemove，每次都要計算它的位置，非常不好把控，在不如說focus，blur之類的，本身就沒用冒泡的特性，自然就不能用事件委托了。
好了，今天就到這里，下次我想介紹一下事件綁定，歡迎大家關注和閱讀，以上純屬個人見解，如有不對的地方，萬望指正，不勝感謝！
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116925.html
摘要：事件流指的是從頁面接收事件的順序。級事件規定方法的第三個參數設為，表示事件在捕獲階段觸發。目前支持事件捕獲流的瀏覽器有，，，，。事件流根據級事件規定，事件流應該包括三個階段，事件捕獲階段，處于目標階段和事件冒泡階段。 什么是事件？（敲黑板） 事件，就是文檔或瀏覽器窗口發生的一些特定的交互瞬間。（by 《JavaScript高級程序設計》）比如鼠標點擊，雙擊，滾動條滑動... 什么是事件...
摘要：可以使用偵聽器或處理程序來預訂事件，以便事件發生時執行相應的代碼。響應某個事件的函數稱為事件處理程序或事件偵聽器。可以刪除通過級方法指定的事件處理程序。 JavaScript和HTML之間的交互是通過事件實現的。 事件：文檔或瀏覽器窗口中發生的一些特定的交互瞬間。 可以使用偵聽器（或處理程序來預訂事件），以便事件發生時執行相應的代碼。 1. 事件流 事件流：從頁面中接收事件的順序。 ...
摘要：捕獲型事件流事件的傳播是從最不特定的事件目標到最特定的事件目標。鼠標移入元素范圍內觸發，該事件不冒泡，即鼠標移到其后代元素上時不會觸發。 事件通常與函數配合使用，這樣就可以通過發生的事件來驅動函數執行，事件是可以被 JavaScript 偵測到的行為 綁定事件 首先我們要先綁定事件 綁定事件有三種 1）在DOM元素中直接綁定，我們可以在DOM元素上綁定onclick、onmouseov...
摘要：捕獲型事件流事件的傳播是從最不特定的事件目標到最特定的事件目標。鼠標移入元素范圍內觸發，該事件不冒泡，即鼠標移到其后代元素上時不會觸發。 事件通常與函數配合使用，這樣就可以通過發生的事件來驅動函數執行，事件是可以被 JavaScript 偵測到的行為 綁定事件 首先我們要先綁定事件 綁定事件有三種 1）在DOM元素中直接綁定，我們可以在DOM元素上綁定onclick、onmouseov...
摘要：事件流級事件規定的事件流包括三個階段事件捕獲階段處于目標階段和事件冒泡階段。事件處理程序的名字以開頭，如等。如使用級方法指定的事件處理程序被認為是元素的方法。 事件流 事件流描述的是從頁面中接收事件的順序。IE的事件流是事件冒泡流，而Netscape Communicator的事件流是事件捕獲流。 事件冒泡 即事件開始時由最具體的元素接收，然后逐級向上傳播到較為不具體的節點。如： ...
閱讀 2337·2021-11-16 11:52
閱讀 2322·2021-11-11 16:55
閱讀 750·2021-09-02 15:41
閱讀 2981·2019-08-30 15:54
閱讀 3142·2019-08-30 15:54
閱讀 2251·2019-08-29 15:39
閱讀 1507·2019-08-29 15:18
閱讀 968·2019-08-29 13:00
