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

資訊專欄INFORMATION COLUMN

事件捕獲和冒泡以及事件委托的原理和區(qū)別

archieyang / 895人閱讀

摘要：為什么要弄清楚事件捕獲和冒泡以及事件委托一面試必問的問題二在過去糟糕的日子里，瀏覽器的兼容性比現(xiàn)在要小得多，網(wǎng)景只使用事件捕獲，而只使用事件冒泡。

為什么要弄清楚事件捕獲和冒泡以及事件委托 
一、面試必問的問題
二、在過去糟糕的日子里，瀏覽器的兼容性比現(xiàn)在要小得多，Netscape（網(wǎng)景）只使用事件捕獲，而Internet Explorer只使用事件冒泡。當(dāng)W3C決定嘗試規(guī)范這些行為并達(dá)成共識時，他們最終得到了包括這兩種情況（捕捉和冒泡）的系統(tǒng)，最終被應(yīng)用在現(xiàn)在瀏覽器里。
三、容易把事件委托理解為多帶帶的執(zhí)行階段
三者的關(guān)系是怎樣的呢 
一、事件捕獲和冒泡是現(xiàn)代瀏覽器的執(zhí)行事件的兩個不同階段
二、事件委托是利用冒泡階段的運行機制來實現(xiàn)的

事件冒泡和捕獲的運行圖 

運行條件：當(dāng)一個事件發(fā)生在具有父元素的的元素上時，現(xiàn)代瀏覽器根據(jù)事件添加時的設(shè)置來執(zhí)行（冒泡或者捕獲）

通過 addEventListener() 的第三個屬性來設(shè)置事件是通過捕獲階段注冊的（true），還是冒泡階段注冊的（false）。默認(rèn)情況下是false。

事件冒泡 
從實際操作的元素（事件）向上級父元素一級一級執(zhí)行下去，直到達(dá)到
有些時候父元素和子元素都定義了click事件，但是不希望點擊子元素的時候執(zhí)行父元素的click事件（例如dialog彈窗的遮罩層如果是父元素，而dialog彈窗內(nèi)容層是子元素，同時可以通過點擊遮罩層來關(guān)閉彈窗，但是點擊內(nèi)容層不關(guān)閉彈窗），可以通過stopPropagation()在子元素上阻止冒泡。
事件捕獲（一般不會用到） 
瀏覽器檢查元素的最外層祖先，是否在捕獲階段中注冊了一個onclick事件處理程序，如果是，則運行它。
然后，它移動到中的下一個元素(點擊的元素的父元素)，并執(zhí)行相同的操作，然后是下一個元素(點擊的元素的父元素)，依此類推，直到到達(dá)實際點擊的元素。
事件捕獲和冒泡的區(qū)別

執(zhí)行順序的不同
冒泡：


捕獲：


事件委托使用場景 
如果你想要在大量子元素（包括動態(tài)添加的）中單擊任何一個就可以運行一段代碼，這個時候可以把事件監(jiān)聽器設(shè)置在父節(jié)點上。
實現(xiàn)方式 jquery 中的 on

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/107546.html

相關(guān)文章

  • 事件捕獲和冒泡以及事件委托的原理和區(qū)別

    摘要：為什么要弄清楚事件捕獲和冒泡以及事件委托一面試必問的問題二在過去糟糕的日子里，瀏覽器的兼容性比現(xiàn)在要小得多，網(wǎng)景只使用事件捕獲，而只使用事件冒泡。 為什么要弄清楚事件捕獲和冒泡以及事件委托 一、面試必問的問題二、在過去糟糕的日子里，瀏覽器的兼容性比現(xiàn)在要小得多，Netscape（網(wǎng)景）只使用事件捕獲，而Internet Explorer只使用事件冒泡。當(dāng)W3C決定嘗試規(guī)范這些行為并達(dá)成...

    tyheist 評論0 收藏0

  • js事件冒泡和事件捕獲

    摘要：事件冒泡事件捕獲事件委托事件冒泡事件捕獲二者聯(lián)系與區(qū)別聯(lián)系都是事件觸發(fā)時序問題的術(shù)語。綁定事件方法的第三個參數(shù)是控制事件觸發(fā)順序的，默認(rèn)為，即事件冒泡若為即事件捕獲。 事件冒泡 、事件捕獲 、 事件委托 1、事件冒泡 、事件捕獲 二者聯(lián)系與區(qū)別 聯(lián)系： (1)、都是 事件觸發(fā)時序問題 的術(shù)語。 (2)、綁定事件方法（addEventListener）的第三個參數(shù)是控制事件觸發(fā)順序的，默...

    ermaoL 評論0 收藏0

  • 讀書筆記(05) - 事件 - JavaScript高級程序設(shè)計

    摘要：而事件分為個級別級事件處理程序，級事件處理程序和級事件處理程序。級中沒有規(guī)范事件的相關(guān)內(nèi)容，所以沒有級事件處理。 showImg(https://segmentfault.com/img/bVburYR?w=499&h=400); HTML依托于JavaScript來實現(xiàn)用戶與WEB網(wǎng)頁之間的動態(tài)交互，接收用戶操作并做出相應(yīng)的反饋，而事件在此間則充當(dāng)橋梁的重要角色。 日常開發(fā)中，經(jīng)常會...

    tinylcy 評論0 收藏0

  • js事件冒泡和事件捕獲

    摘要：查閱了一些資料之后才知道原來這就是事件冒泡，下面是我對事件冒泡和事件捕獲的理解。本文參考文章之事件冒泡詳解事件委托及其原理 前段時間開發(fā)一個小項目的時候遇到一個問題，即給一個元素以及它的父元素綁定了click事件，這個時候我點擊這個元素時，父級元素的clik事件也會觸發(fā)，這顯然不符合要求。查閱了一些資料之后才知道原來這就是事件冒泡，下面是我對事件冒泡和事件捕獲的理解。 事件冒泡：事件從...

    SimonMa 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<