資訊專欄INFORMATION COLUMN
摘要：但對于整個事件流上的別的元素來說，執(zhí)行順序還會受到另外一個因素的影響。以上面的場景為例，在捕獲階段執(zhí)行的事件，如果執(zhí)行，則事件流終止，不會到達目標階段，的世界則不會被執(zhí)行執(zhí)行結(jié)果為線上參考事件流
向dom綁定事件的事件的三種方式
行內(nèi)綁定
js內(nèi)綁定
btnDom.onclick = function clickHandler() {
console.log("click");
}
事件監(jiān)聽器綁定
btnDom.addEventListener("click", e => {
console.log("click");
})
DOM事件流
什么是DOM事件流？
DOM結(jié)構(gòu)是一個樹形結(jié)構(gòu)，當一個DOM元素產(chǎn)生一個事件，該事件會在當前節(jié)點與根節(jié)點之間的路徑傳播，路經(jīng)的所有節(jié)點都會接收到該事件，這就是DOM事件流
DOM事件流的三個階段
捕獲階段（capture）：從ducoument流向目標節(jié)點
目標階段: 到達
冒泡階段：從目標階段冒泡到document節(jié)點
關(guān)于這三個階段的流程，文檔上有個圖片，描述的十分詳細
事件的執(zhí)行順序
對于target來說，事件執(zhí)行，一直會在目標階段。但對于整個事件流上的別的元素來說，執(zhí)行順序還會受到另外一個因素的影響。
我們來看一個例子，首先dom結(jié)構(gòu)如下
為其綁定事件
fa.addEventListener("click", e => {
console.log("click fa")
})
ch.addEventListener("click", e => {
console.log("click ch")
})
此時點擊ch，打印出的結(jié)果是
"click ch" "click fa"
先執(zhí)行了ch的事件，后執(zhí)行了fa的事件，因此我們可以得知，fa的事件，是在冒泡階段被執(zhí)行的。
addEventListener方法，可以傳入第三個參數(shù)，useCapture，boolean，來決定這個執(zhí)行階段。默認為false，也就是在冒泡階段，如果設(shè)置為true，則會在捕獲階段
fa.addEventListener("click", e => {
console.log("click fa")
}, true)
ch.addEventListener("click", e => {
console.log("click ch")
}, true)
執(zhí)行結(jié)果為
"click fa" "click ch"
stopPropagation
在事件流的任何一個事件，都可以調(diào)用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í)行結(jié)果為
"click fa"線上demo
demo
參考事件流
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/99086.html
摘要：前端渲染過程的二三事本文不會介紹整個前端渲染過程的步驟，只是記錄最近閱讀的文章的些許思考和感悟。那么現(xiàn)在我們可以明白這個問題的關(guān)鍵所在了，因為在大部分頁面中是擁有的，而由于其解析順序，那么在事件之前必定已經(jīng)成功構(gòu)造樹。 前端渲染過程的二三事 本文不會介紹整個前端渲染過程的步驟，只是記錄最近閱讀的文章的些許思考和感悟。（文章地址一（系列）,文章地址二） 希望大家在閱讀這篇文章之前能將上述...
摘要：傳統(tǒng)的網(wǎng)頁編程采用的三劍客來實現(xiàn)，在微信小程序中同樣有三劍客。觀察者模式不難實現(xiàn)，重點是如何在微信小程序中搭配其特有的生命周期來使用。交互事件傳統(tǒng)的事件傳遞類型有冒泡型與捕獲型，微信小程序中自然也有。 本文由作者鄒永勝授權(quán)網(wǎng)易云社區(qū)發(fā)布。 簡介為了更好的展示我們即時通訊SDK強悍的能力，網(wǎng)易云信IM SDK微信小程序DEMO的開發(fā)就提上了日程。用產(chǎn)品的話說就是: 云信 IM 小程序 S...
摘要：常用的數(shù)組方法刪除數(shù)組的最后一個元素，返回被刪除的元素，原數(shù)組長度減。原數(shù)組發(fā)生了變化，但沒有創(chuàng)建新的數(shù)組。將指定數(shù)組進行排序，返回排好序的數(shù)組。顛倒數(shù)組元素的順序，返回逆序后的數(shù)組。 數(shù)組，對于每一個前端人員來說是非常常見且重要的數(shù)據(jù)結(jié)構(gòu)之一，也是面試常常出現(xiàn)的題目，掌握數(shù)組的方法能幫助我們更高效地處理問題。不過在數(shù)組的學習中，我們常常會混淆數(shù)組本身的方法和Javascript提供的...
摘要：分表字段的選擇。問題產(chǎn)生之前提到在分表應(yīng)用上線前我們需要將原有表的數(shù)據(jù)遷移到新表中，這樣才能保證業(yè)務(wù)不受影響。雖說凌晨的業(yè)務(wù)量下降，但依然有少部分的請求過來，也會出現(xiàn)各種數(shù)據(jù)庫異常。 showImg(https://segmentfault.com/img/remote/1460000019462791?w=496&h=285); 前言 本篇是上一篇《一次分表踩坑實踐的探討》，所以還沒...
閱讀 1165·2021-11-25 09:43
閱讀 2979·2019-08-30 15:54
閱讀 3363·2019-08-30 15:54
閱讀 3015·2019-08-30 15:44
閱讀 1636·2019-08-26 12:18
閱讀 2266·2019-08-26 11:42
閱讀 887·2019-08-26 11:35
閱讀 3306·2019-08-23 18:22
