與dom事件流相關的二三事

Anleb 發(fā)布于2019-08-23 12:54 / 1867人閱讀

摘要：但對于整個事件流上的別的元素來說，執(zhí)行順序還會受到另外一個因素的影響。以上面的場景為例，在捕獲階段執(zhí)行的事件，如果執(zhí)行，則事件流終止，不會到達目標階段，的世界則不會被執(zhí)行執(zhí)行結果為線上參考事件流

向dom綁定事件的事件的三種方式

行內綁定

js內綁定

btnDom.onclick = function clickHandler() {
    console.log("click");
}

事件監(jiān)聽器綁定

btnDom.addEventListener("click", e => {
    console.log("click");
})

DOM事件流

什么是DOM事件流？

DOM結構是一個樹形結構，當一個DOM元素產生一個事件，該事件會在當前節(jié)點與根節(jié)點之間的路徑傳播，路經的所有節(jié)點都會接收到該事件，這就是DOM事件流

DOM事件流的三個階段

捕獲階段（capture）：從ducoument流向目標節(jié)點

目標階段: 到達

冒泡階段：從目標階段冒泡到document節(jié)點

關于這三個階段的流程，文檔上有個圖片，描述的十分詳細

事件的執(zhí)行順序

對于target來說，事件執(zhí)行，一直會在目標階段。但對于整個事件流上的別的元素來說，執(zhí)行順序還會受到另外一個因素的影響。

我們來看一個例子，首先dom結構如下

為其綁定事件

fa.addEventListener("click", e => {
  console.log("click fa")
})

ch.addEventListener("click", e => {
  console.log("click ch")
})

此時點擊ch，打印出的結果是

"click ch"
"click fa"

先執(zhí)行了ch的事件，后執(zhí)行了fa的事件，因此我們可以得知，fa的事件，是在冒泡階段被執(zhí)行的。

addEventListener方法，可以傳入第三個參數，useCapture，boolean，來決定這個執(zhí)行階段。默認為false，也就是在冒泡階段，如果設置為true，則會在捕獲階段

fa.addEventListener("click", e => {
  console.log("click fa")
}, true)

ch.addEventListener("click", e => {
  console.log("click ch")
}, true)

執(zhí)行結果為

"click fa"
"click ch"

stopPropagation

在事件流的任何一個事件，都可以調用event的stopPropagation方法，來停止事件流。以上面的場景為例，在捕獲階段執(zhí)行fa的事件，如果執(zhí)行stopPropagation，則事件流終止，不會到達目標階段，ch的世界則不會被執(zhí)行

fa.addEventListener("click", e => {
  console.log("click fa")
  e.stopPropagation();
}, true)

ch.addEventListener("click", e => {
  console.log("click ch")
}, true)

執(zhí)行結果為

"click fa"

線上demo

demo

參考

事件流

云服務器 GPU云服務器 DOM事件 dom事件管理 dom事件冒泡 DOM元素事件

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

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

前端渲染過程的二三事

摘要：前端渲染過程的二三事本文不會介紹整個前端渲染過程的步驟，只是記錄最近閱讀的文章的些許思考和感悟。那么現(xiàn)在我們可以明白這個問題的關鍵所在了，因為在大部分頁面中是擁有的，而由于其解析順序，那么在事件之前必定已經成功構造樹。前端渲染過程的二三事本文不會介紹整個前端渲染過程的步驟，只是記錄最近閱讀的文章的些許思考和感悟。（文章地址一（系列）,文章地址二）希望大家在閱讀這篇文章之前能將上述...

Rindia 2019-08-23 13:03 評論0 收藏0
微信小程序開發(fā)中的二三事之網易云信IMSDK DEMO

摘要：傳統(tǒng)的網頁編程采用的三劍客來實現(xiàn)，在微信小程序中同樣有三劍客。觀察者模式不難實現(xiàn)，重點是如何在微信小程序中搭配其特有的生命周期來使用。交互事件傳統(tǒng)的事件傳遞類型有冒泡型與捕獲型，微信小程序中自然也有。本文由作者鄒永勝授權網易云社區(qū)發(fā)布。簡介為了更好的展示我們即時通訊SDK強悍的能力，網易云信IM SDK微信小程序DEMO的開發(fā)就提上了日程。用產品的話說就是: 云信 IM 小程序 S...

weij 2019-06-28 11:05 評論0 收藏0
數組方法的二三事

摘要：常用的數組方法刪除數組的最后一個元素，返回被刪除的元素，原數組長度減。原數組發(fā)生了變化，但沒有創(chuàng)建新的數組。將指定數組進行排序，返回排好序的數組。顛倒數組元素的順序，返回逆序后的數組。數組，對于每一個前端人員來說是非常常見且重要的數據結構之一，也是面試常常出現(xiàn)的題目，掌握數組的方法能幫助我們更高效地處理問題。不過在數組的學習中，我們常常會混淆數組本身的方法和Javascript提供的...

VincentFF 2019-08-23 14:37 評論0 收藏0
分表后需要注意的二三事

摘要：分表字段的選擇。問題產生之前提到在分表應用上線前我們需要將原有表的數據遷移到新表中，這樣才能保證業(yè)務不受影響。雖說凌晨的業(yè)務量下降，但依然有少部分的請求過來，也會出現(xiàn)各種數據庫異常。 showImg(https://segmentfault.com/img/remote/1460000019462791?w=496&h=285); 前言本篇是上一篇《一次分表踩坑實踐的探討》，所以還沒...

dongxiawu 2019-08-19 11:43 評論0 收藏0