Javascript 冒泡、捕獲、事件代理

JerryZou 發布于2019-08-23 15:10 / 1827人閱讀

摘要：開工荒了兩天，趕緊開始為什么寫事件代理冒泡捕獲，首先冒泡和捕獲是事件的核心基礎，事件代理原理來自冒泡和捕獲。感謝閱讀，歡迎吐槽謝謝

2019開工荒了兩天，趕緊開始！

為什么寫事件代理、冒泡、捕獲，首先冒泡和捕獲是js事件的核心基礎，事件代理原理來自冒泡和捕獲。

此文章略過標準瀏覽器和非標準瀏覽器的事件流講解，原因很簡單我們現在已經幸福了，已經不考慮IE6、7、8了

直接說現代瀏覽器事件流，用兩張圖看看什么是冒泡什么是捕獲，其實從字面意思大概能看出一個是向外一個是向內。

標準事件流

1、捕獲階段（先從最外層向內查找）
2、目標階段（找到事件元（當前點擊的dom））
3、冒泡階段（向上冒泡傳遞事件）

事件冒泡

先演示下冒泡

事件捕獲

看看效果

事件委托

我理解的事件委托的好處有兩點
1、減少事件綁定次數
2、可以給未知元素綁定事件（例如動態渲染的List）

其原理就是利用事件冒泡向外傳遞的特性，下面代碼解析一下：
同樣忽略低版本瀏覽器獲取當前target兼容性問題

老規矩，看看效果

最后順便說一下事件對象功能很全的，看下圖能獲取到很多當前dom的周邊，可以搞好多其它的事情。

感謝閱讀，歡迎吐槽！謝謝！

GPU云服務器云服務器 Javascript事件代理冒泡事件事件冒泡事件冒泡機制

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/101635.html

javascript事件基礎知識

摘要：可選，布爾值，指定事件是否在捕獲或冒泡階段執行，默認冒泡。適用范圍參數介紹必須，字符串，事件名稱。必須，指定事件觸發時執行的函數。事件冒泡事件冒泡與事件捕獲恰恰相反，事件冒泡順序是由內到外進行事件傳播，直到根節點。什么是事件 javascript與HTML之間交互就是通過事件實現的，事件就是文檔或瀏覽器窗口中發生的一些特定的交互瞬間。事件在瀏覽器中是以對象的形式存在的，即event，...

ad6623 2019-08-26 13:36 評論0 收藏0
DOM事件之捕獲、冒泡

摘要：隊列的實質是數組。事件在默認執行的過程中是先捕獲后冒泡，第三個參數只是讓它在什么狀態下觸發。用方法，綁定的其他事件也將不會執行。 DOM 0 知識點 function print(){ console.log(1) } X.onclick = print; //是對的 Y.onclick = print(); Z.o...

馬忠志 2019-08-22 17:27 評論0 收藏0
JavaScript 事件代理和委托

摘要：原文地址事件代理和委托在中這個詞經常出現，看字面的意思，代理委托。模型將事件處理流程分為三個階段一事件捕獲階段，二事件目標階段，三事件起泡階段。事件目標當到達目標元素之后，執行目標元素該事件相應的處理函數。原文地址：JavaScript 事件代理和委托在javasript中delegate這個詞經常出現，看字面的意思，代理、委托。那么它究竟在什么樣的情況下使用？它的原理又是什么？在...

littlelightss 2019-08-22 10:39 評論0 收藏0
JavaScript系列事件

摘要：推薦使用該方式進行事件的注冊，可以對同一節點注冊多個事件處理函數。當前冒泡流是被大多瀏覽器支持，因此大多賦為。阻斷事件的冒泡流或者事件捕獲流。資料推薦紅寶書阮一峰事件模型一步，一步前進の一步 showImg(https://segmentfault.com/img/bVbfVGO?w=830&h=328); 事件是文檔或者瀏覽器窗口中發生的一些交互瞬間。JS注冊事件處理程序來預訂事件...

周國輝 2019-08-23 11:29 評論0 收藏0
javascript 事件代理，原理和問題

摘要：可以用于事件處理函數中阻止冒泡行為。事件代理的原理和問題在我們了解了事件流之后，事件代理的原理就很好理解了，其實就是事件冒泡會觸發容器的相關事件并執行監聽函數。給注銷事件綁定。如果此事件正在執行，會立即停止。有如下 html 片段 11111111111 22222222222 33333333333 要對 li 添加 click 事件。通常做法： var...

SolomonXie 2019-08-19 18:35 評論0 收藏0