Atitit. Js 冒泡事件阻止 事件捕獲 事件傳遞 事件代理

Atitit.  ​​Js冒泡事件阻止

​​ 事件捕獲   事件傳遞

 事件代理

1.事件冒泡1

2.事件捕獲1

3.同時支援了事件捕獲階段和事件冒泡階段ddEventListener的第三個參數1

4.事件代理3

5.冒泡還是捕獲？3

6.Js

冒泡事件阻止3

6.1.傳回false5

7.事件冒泡 使處理函數有範圍較大的觸發面積，在“拖拽效果”腳本中是必須的5

8.refe6

8.1.1.淺談事件冒泡與事件捕獲

- ac黃部落格精選

- SegmentFault6

1. 事件冒泡

微軟提出了名為事件冒泡(event bubbling)的事件流。事件冒泡可以形象地比喻為把一顆石頭投入水中，泡泡會一直從水底冒出水面。也就是說，事件會從最内層的元素開始發生，一直向上傳播，直到document對象。

2. 事件捕獲

網景提出另一種事件流名為事件捕獲(event capturing)。與事件冒泡相反，事件會從最外層開始發生，直到最具體的元素

作者::  ★(attilax)>>>   綽号:老哇的爪子 （ 全名：：Attilax Akbar Al Rapanui 阿提拉克斯 阿克巴 阿爾 拉帕努伊 ） 漢字名：艾龍

3. 同時支援了事件捕獲階段和事件冒泡階段ddEventListener的第三個參數

W3C模型

　　W3c明智的在這場争鬥中選擇了一個擇中的方案。任何發生在w3c事件模型中的事件，首是進入捕獲階段，直到達到目标元素，再進入冒泡階段

　　如果使用者單擊元素2，則接下來會發生：

　　（事件在這裡就像一個觀光客，由外至内遊覽，逐漸接近被觸發的主要元素，然後又反向離開）

　　單擊事件首先進入捕獲階段開始（逐漸接近元素2的方向）。檢視元素2的祖先元素中是否有在捕獲階段有onclick處理函數的

　　發現元素1有一個，于是doSomething2被執行

　　事件檢查到目标自己（元素2），捕獲階段沒有發現更多的處理函數了。事件開始進入冒泡階段，想當然執行doSomething（），這個綁定于元素2冒泡階段的函數。

　　事件向遠離元素2的方向，檢視是否有任何祖先元素在冒泡階段綁定了一個處理函數。沒有這樣的情況，是以什麼也沒有發生

　　相反的情況是：

“DOM2級事件”中規定的事件流同時支援了事件捕獲階段和事件冒泡階段，而作為開發者，我們可以選擇事件處理函數在哪一個階段被調用。

addEventListener方法用來為一個特定的元素綁定一個事件處理函數，是JavaScript中的常用方法。addEventListener有三個參數：

element.addEventListener(event, function, useCapture)

第一個參數是需要綁定的事件，第二個參數是觸發事件後要執行的函數。而第三個參數預設值是false，表示在事件冒泡的階段調用事件處理函數，如果參數為true，則表示在事件捕獲階段調用處理函數。請看​​例子​​。

4. 事件代理

使用事件代理的好處不僅在于将多個事件處理函數減為一個，而且對于不同的元素可以有不同的處理方法。假如上述清單元素當中添加了其他的元素（如：a、span等），我們不必再一次循環給每一個元素綁定事件，直接修改事件代理的事件處理函數即可。

5. 冒泡還是捕獲？

對于事件代理來說，在事件捕獲或者事件冒泡階段處理并沒有明顯的優劣之分，但是由于事件冒泡的事件流模型被所有主流的浏覽器相容，從相容性角度來說還是建議大家使用事件冒泡模型。

6. ​​Js冒泡事件阻止

​​

1. 事件目标

現在，事件處理程式中的變量event儲存着事件對象。而event.target屬性儲存着發生事件的目标元素。這個屬性是DOM API中規定的，但是沒有被所有浏覽器實作 。jQuery對這個事件對象進行了必要的擴充，進而在任何浏覽器中都能夠使用這個屬性。通過.target，可以确定DOM中首先接收到事件的元素（即實際被單擊的元素）。而且，我們知道this引用的是處理事件的DOM元素，是以可以編寫下列代碼：

$(document).ready(function(){

 $('#switcher').click(function(event){

  $('#switcher .button').toggleClass('hidden');

  })

 })

  if(event.target==this){

  }

此時的代碼確定了被單擊的元素是<div id="switcher"> ，而不是其他後代元素。現在，單擊按鈕不會再

折疊樣式轉換器，而單擊邊框則會觸發折疊操作。但是，單擊标簽同樣什麼也不會發生，因為它也是一個後代元素。實際上，我們可以不把檢查代碼放在這裡，而是通過修改按鈕的行為來達到目标 。

2. 停止事件傳播

事件對象還提供了一個.stopPropagation()方法，該方法可以完全阻止事件冒泡。與.target類似，這個方法也是一種純JavaScript特性，但在跨浏覽器的環境中則無法安全地使用 。不過，隻要我們通過jQuery來注冊所有的事件處理程式，就可以放心地使用這個方法。

下面，我們會删除剛才添加的檢查語句event.target == this，并在按鈕的單擊處理程式中添加一些代碼：

 $('#switcher .button').click(funtion(event){

  //……

   event.stopPropagation();

 }) 

  同以前一樣，需要為用作單擊處理程式的函數添加一個參數，以便通路事件對象。然後，通過簡單地調用event.stopPropagation()就可以避免其他所有DOM元素響應這個事件。這樣一來，單擊按鈕的事件會被按鈕處理，而且隻會被按鈕處理。單擊樣式轉換器的其他地方則可以折疊和擴充整個區域。

3. 預設操作

如果我們把單擊事件處理程式注冊到一個錨元素，而不是一個外層的<div>上，那麼就要面對另外一個問題：當使用者單擊連結時，浏覽器會加載一個新頁面。這種行為與我們讨論的事件處理程式不是同一個概念，它是單擊錨元素的預設操作。類似地，當使用者在編輯完表單後按下Enter鍵時，會觸發表單的submit事件，在此事件發生後，表單送出才會真正發生。

如果我們不希望執行這種預設操作，那麼在事件對象上調用.stopPropagation()方法也無濟于事，因為預設操作不是在正常的事件傳播流中發生的。在這種情況下，.preventDefault()方法則可以在觸發預設操作之前終止事件 。

提示 當在事件的環境中完成了某些驗證之後，通常會用到.preventDefault()。例如，在表單送出期間，我們會對使用者是否填寫了必填字段進行檢查，如果使用者沒有填寫相應字段，那麼就需要阻止預設操作。我們将在第8章詳細讨論表單驗證。

事件傳播和預設操作是互相獨立的兩套機制，在二者任何一方發生時，都可以終止另一方。如果想要同時停止事件傳播和預設操作，可以在事件處理程式中傳回false，這是對在事件對象上同時調用.stopPropagation()和.preventDefault()的一種簡寫方式。

6.1. 傳回false

7. 事件冒泡 使處理函數有範圍較大的觸發面積，在“拖拽效果”腳本中是必須的

設定頁面？——使處理函數有範圍較大的觸發面積，在“拖拽效果”腳本中是必須的。一般來說在某一個元素層上發生mousedown事件意味着選擇了這個元素，并且使它能夠響應mousemove事件。雖然mousedown通常綁定于這個元素層上以避免浏覽器 bug，但是其他兩者的事件函數的範圍必須是整個頁面（？）

　　記住浏覽器學的第一法則（First Law of Browserology）是：一切皆有可能（anythingcan happen），并且是在你起碼有點準備的時候。是以有可能發生的是，使用者拖拽時，大幅度在頁面上移動他的滑鼠，腳本卻不能在大幅度中做出反應，以至于鼠 标也就不再停留在元素層上了

　　如果onmouseover處理函數綁定在元素層上，這個元素層不會再對滑鼠的移動有任何反應，這會讓使用者覺得奇怪

　　如果onmouseup處理函數綁定在元素層上，事件也不能被觸發，後果是，使用者想放下這個元素層後，元素層持續對滑鼠移動做出反應。這會引起（使用者）更多的迷惑（？）

　　是以在這個例子中，事件冒泡非常的有用，因為将你的處理函數放在頁面層能保證他們一直能被執行

8. refe

8.0.1. ​​淺談事件冒泡與事件捕獲- ac黃部落格精選

- SegmentFault

事件冒泡與事件捕獲 事件冒泡和事件捕獲分别由微軟和網景公司提出,這兩個概念都是為了解決頁面中事件流(事件發生順序)的問題。{代碼...}

上面的代碼當中一個...

淺談事件冒泡與事件捕獲 - ac黃部落格精選 - SegmentFault.html