成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

js手札--關(guān)于事件冒泡與事件捕獲

lentoo / 3504人閱讀

摘要：一冒泡和捕獲事件執(zhí)行子元素在執(zhí)行某個(gè)事件的前后，會(huì)引起上層元素觸發(fā)相同事件。三補(bǔ)充關(guān)于和這兩個(gè)其實(shí)和捕獲與冒泡一點(diǎn)關(guān)系都沒有，是用來阻止事件的默認(rèn)行為的。

一、冒泡和捕獲 
事件執(zhí)行：子元素在執(zhí)行某個(gè)事件的前后，會(huì)引起上層元素觸發(fā)相同事件。例：我點(diǎn)擊了div，那么不光div會(huì)執(zhí)行click事件，上層的body和html等等也會(huì)執(zhí)行click。
冒泡與捕獲解決了：事件執(zhí)行順序由誰開始，由誰結(jié)束

事件冒泡：click執(zhí)行順序（div -> body -> html -> document）

事件捕獲：click執(zhí)行順序（document -> html -> body -> div）

冒泡與捕獲方法

IE < 9：只冒泡

    target.attachEvent(eventName, callback)  //只能冒泡
    target.detachEvent(eventName, callback)

IE9+ | chrome | firefox | safari：冒泡+捕獲

    target.addEventListener(eventName, callback) // 冒泡方式
    target.removeEventListener(eventName, callback)
    
    target.addEventListener(eventName, callback, true)  // 捕獲方式
    target.removeEventListener(eventName, callback, true)

（一） 事件冒泡

啥也不說，看例子，點(diǎn)擊t2區(qū)域：

很明顯的，由內(nèi)而外，沒啥可說的。我這邊沒裝IE，所以所以測(cè)試都是在（chrome，firfox，safari中測(cè)試的）。

（二）事件捕獲

同樣點(diǎn)擊t2區(qū)域，可以見到變成由外而內(nèi)：

（三）先捕獲后冒泡

這次點(diǎn)擊t1區(qū)域，先捕獲，后冒泡

二、阻止冒泡和捕獲 
IE和Netscape的阻止方式

IE：event.stopPropagation()

Netscape：e.cancelBubble = true;

（一）阻止冒泡

同樣點(diǎn)擊t2區(qū)域，可以見到t3的click事件就不會(huì)被觸發(fā)了。

（二）阻止捕獲

同樣點(diǎn)擊t2區(qū)域，可以見到t2的click事件沒有被觸發(fā)。因?yàn)槲覀冊(cè)谟|發(fā)t3的時(shí)候，讓捕獲停止了，那樣t2也就接受不到要觸發(fā)click的消息了，也就over了。

三、補(bǔ)充 
關(guān)于Netscape: preventDefault()和IE: event.returnValue

這兩個(gè)其實(shí)和捕獲與冒泡一點(diǎn)關(guān)系都沒有，是用來阻止事件的默認(rèn)行為的。如：我點(diǎn)擊標(biāo)簽，正常說會(huì)執(zhí)行跳轉(zhuǎn)相應(yīng)網(wǎng)頁。但加入preventDefault()后就不會(huì)跳轉(zhuǎn)了。

看例子：
照理說我點(diǎn)擊了t1, 那應(yīng)該會(huì)正常跳轉(zhuǎn)才對(duì)

但加了下面的代碼之后，就跳不動(dòng)了。

總算結(jié)束了，每次去查捕獲和冒泡的資料都發(fā)現(xiàn)會(huì)附帶著preventDefault，也是懵了。一開始我以為preventEvent是阻止捕獲的，stopPropagation是阻止冒泡的，后來發(fā)現(xiàn)其實(shí)壓根就不是這樣，也是我看的不仔細(xì)啊。唉，路還長著，繼續(xù)，前行。

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/79746.html

相關(guān)文章

  • JS 中的事件冒泡與捕獲

    摘要：在之前是只支持事件冒泡，包括之后和目前主流的瀏覽器都同時(shí)支持兩種事件。中可以用來取消事件冒泡。 剛接觸 JS 的那個(gè)時(shí)候，啥也不懂，只想著如何利用 Google、百度到的函數(shù)來解決實(shí)際的問題，不會(huì)想到去一探究竟。 漸漸的，對(duì) JS 的語言的不斷深入，有機(jī)會(huì)去了解一些原理性東西。最近在看 JQuery 源碼，感觸很多，總想著用原生的 JS 去實(shí)現(xiàn)自己的一個(gè) JQuery 庫。說實(shí)在的，J...

    Rindia 評(píng)論0 收藏0

  • 原生js之DOM事件相關(guān)

    摘要：而由于級(jí)標(biāo)準(zhǔn)中并沒有定義事件相關(guān)的內(nèi)容，所以事件級(jí)別只包括級(jí)，級(jí)和級(jí)三種。此屬性返回當(dāng)前事件所綁定的對(duì)象。自定義事件可以綁定到任意元素上，此處選擇只是為了演示方便。 前端學(xué)習(xí)的東西有很多，現(xiàn)代前端開發(fā)，前端工程化的東西要懂，基礎(chǔ)的原生js也要懂，畢竟，框架都是有生命周期的，更替非?？欤欢鴧s有這么一個(gè)框架，它是最輕量的前端框架，每個(gè)瀏覽器都內(nèi)置，它叫vanilla.js。好吧，其實(shí)va...

    learning 評(píng)論0 收藏0

  • JS復(fù)習(xí)-JS中事件的捕獲與冒泡

    摘要：也就是說事件流一定是按上面的順序經(jīng)過這三個(gè)階段。關(guān)于事件捕獲，事件冒泡的引用場(chǎng)景，有事件委托等。下面引用兩篇文章。 什么是捕獲？什么是冒泡？ 給元素綁定事件會(huì)經(jīng)歷三個(gè)階段：一：捕獲階段(capture phase)--先從根元素流向目標(biāo)元素；二：目標(biāo)階段(target phase)--在目標(biāo)元素上的事件被觸發(fā)；三：冒泡階段(bubbling phase)--目標(biāo)元素流向根元素 就像你中...

    haoguo 評(píng)論0 收藏0

  • JS復(fù)習(xí)-JS中事件的捕獲與冒泡

    摘要：也就是說事件流一定是按上面的順序經(jīng)過這三個(gè)階段。關(guān)于事件捕獲，事件冒泡的引用場(chǎng)景，有事件委托等。下面引用兩篇文章。 什么是捕獲？什么是冒泡？ 給元素綁定事件會(huì)經(jīng)歷三個(gè)階段：一：捕獲階段(capture phase)--先從根元素流向目標(biāo)元素；二：目標(biāo)階段(target phase)--在目標(biāo)元素上的事件被觸發(fā)；三：冒泡階段(bubbling phase)--目標(biāo)元素流向根元素 就像你中...

    BakerJ 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<