成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

與dom事件流相關(guān)的二三事

Anleb / 1870人閱讀

摘要：但對于整個(gè)事件流上的別的元素來說，執(zhí)行順序還會(huì)受到另外一個(gè)因素的影響。以上面的場景為例，在捕獲階段執(zhí)行的事件，如果執(zhí)行，則事件流終止，不會(huì)到達(dá)目標(biāo)階段，的世界則不會(huì)被執(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)是一個(gè)樹形結(jié)構(gòu)，當(dāng)一個(gè)DOM元素產(chǎn)生一個(gè)事件，該事件會(huì)在當(dāng)前節(jié)點(diǎn)與根節(jié)點(diǎn)之間的路徑傳播，路經(jīng)的所有節(jié)點(diǎn)都會(huì)接收到該事件，這就是DOM事件流

DOM事件流的三個(gè)階段

捕獲階段（capture）：從ducoument流向目標(biāo)節(jié)點(diǎn)

目標(biāo)階段: 到達(dá)

冒泡階段：從目標(biāo)階段冒泡到document節(jié)點(diǎn)

關(guān)于這三個(gè)階段的流程，文檔上有個(gè)圖片，描述的十分詳細(xì)

事件的執(zhí)行順序

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

我們來看一個(gè)例子，首先dom結(jié)構(gòu)如下

為其綁定事件

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

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

此時(shí)點(diǎn)擊ch，打印出的結(jié)果是

"click ch"
"click fa"

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

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

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

在事件流的任何一個(gè)事件，都可以調(diào)用event的stopPropagation方法，來停止事件流。以上面的場景為例，在捕獲階段執(zhí)行fa的事件，如果執(zhí)行stopPropagation，則事件流終止，不會(huì)到達(dá)目標(biāo)階段，ch的世界則不會(huì)被執(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://systransis.cn/yun/99086.html

相關(guān)文章

  • 前端渲染過程的二三事

    摘要：前端渲染過程的二三事本文不會(huì)介紹整個(gè)前端渲染過程的步驟，只是記錄最近閱讀的文章的些許思考和感悟。那么現(xiàn)在我們可以明白這個(gè)問題的關(guān)鍵所在了，因?yàn)樵诖蟛糠猪撁嬷惺菗碛械?，而由于其解析順序，那么在事件之前必定已?jīng)成功構(gòu)造樹。 前端渲染過程的二三事 本文不會(huì)介紹整個(gè)前端渲染過程的步驟，只是記錄最近閱讀的文章的些許思考和感悟。（文章地址一（系列）,文章地址二） 希望大家在閱讀這篇文章之前能將上述...

    Rindia 評論0 收藏0

  • 微信小程序開發(fā)中的二三事之網(wǎng)易云信IMSDK DEMO

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

    weij 評論0 收藏0

  • 數(shù)組方法的二三事

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

    VincentFF 評論0 收藏0

  • 分表后需要注意的二三事

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

    dongxiawu 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<