国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

vue的事件冒泡

Youngs / 1536人閱讀

摘要：什么是事件冒泡先說冒泡，我們都知道水中有氣泡的時候，氣泡會從水底往上升，由深往淺的。

什么是事件冒泡？

先說冒泡，我們都知道水中有氣泡的時候，氣泡會從水底往上升，由深往淺的。但是水在上升的過程中會經(jīng)歷不同的深度的水。
那么我們再來解釋一下什么是事件冒泡，如果屬性瀏覽器原理的同學(xué)就知道，頁面是由文檔流（即dom樹組成的），當(dāng)我們在
一個時間觸發(fā)的時候，這個事件就像這個氣泡一樣，從dom樹的底層，一層一層的往上面?zhèn)鬟f，一直傳遞到dom的根節(jié)點(diǎn)，如果子元素和父級元素觸發(fā)的是相同事件的時候，當(dāng)子元素被觸發(fā)的時候父元素也會被觸發(fā)冒泡機(jī)制，這就是冒泡的基本原理。

在不同的內(nèi)核瀏覽器中，冒泡是不一樣的

IE<11： div => body => html => document

在其他內(nèi)核中：div => body =>html => window

注意：在JavaScript中，并非所有的事件都可以冒泡，像：blur、unload、load等事件就不能冒泡

示例代碼：
Html


        

            

                我是子元素
            

            我是父級元素

css

#app{
 width: 500px;
 height: 500px;
 margin: 200px auto;
 background-color: #f5f5f5;
 border:2px solid #ffffdffffd;
 }
 #father{
 width: 400px;
 height: 400px;
 background-color: rgb(168, 125, 125);
 text-align: center;
 color:red;
 }
 #child{
 width: 200px;
 height: 200px;
 background-color: #fff;
 color:blue;
 }

js

  var father = document.getElementById("father");
var child = document.getElementById("child");
father.addEventListener("click", function () {
    console.log("我是父級元素")
}, false)
child.addEventListener("click", function () {
    console.log("我是子集元素")
}, false)

當(dāng)我點(diǎn)擊子元素時，控制臺打印如下圖：

當(dāng)我點(diǎn)擊父元素時：控制臺打印出來如下圖：

可以看到，當(dāng)我在點(diǎn)擊子元素時，父元素綁定的點(diǎn)擊事件也被觸發(fā)了。
那么我們?nèi)绾巫柚惯@種事件傳遞呢？

如何阻止事件冒泡

廢話少說，直接上代碼

js

var father = document.getElementById("father");
var child = document.getElementById("child");
father.addEventListener("click", function () {
    if(event && event.stopPropagation){
        event.stopPropagation() // 非IE瀏覽器
    }else{
    event.cancelBubble = true; //IE瀏覽器
    }
    console.log("我是父級元素")
}, false)
child.addEventListener("click", function () {
    if (event && event.stopPropagation) {
        event.stopPropagation() // 非IE瀏覽器
    } else {
        event.cancelBubble = true; //IE瀏覽器
    }
    console.log("我是子集元素")
}, false)

在W3C中，規(guī)定DOM標(biāo)準(zhǔn)通過調(diào)用event對象的stopPropagation()方法即可阻止冒泡型事件的進(jìn)一步傳遞。

那么在vue中我們?nèi)绾问褂媚兀?/p>

我們可以用.stop修飾符綁定在子元素上面，阻止其向父元素冒泡，從而達(dá)到不會觸發(fā)冒泡事件




    
    
    
    Document






    

        

            我是子元素
        

        我是父級元素

點(diǎn)擊子元素打印出來日志

：

當(dāng)然，事件冒泡是瀏覽器的默認(rèn)行為，之所以這樣設(shè)計，是有原因的，因為有時候事件冒泡可以提供很多的便利，但是使用不當(dāng)就會造成很多不必要的bug。

總結(jié)：1.事件冒泡的基本原理

 2.原生js和vue中分別如何阻止事件冒泡

本文首發(fā)微信公眾號：碼客小棧
歡迎掃描二維碼關(guān)注公眾號，小碼不定時的分享工作中的問題和前端、python等文章 （還有漂亮的小姐姐喲！！！）。

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

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/104622.html

相關(guān)文章

  • 重新認(rèn)識vue之事件阻止冒泡

    摘要：通用解決辦法事件冒泡了嘛，那就阻止事件冒泡唄。很完美有沒有，這就不用在事件響應(yīng)邏輯中去處理事件細(xì)節(jié)了。 冒泡的表現(xiàn) 近期用vue做了一個需求，大概是同一個區(qū)域，點(diǎn)擊不同位置有不同的響應(yīng)函數(shù)，還有個總的響應(yīng)函數(shù)，好吧，如下圖所示: showImg(https://segmentfault.com/img/remote/1460000015852878?w=1962&h=392); 他們的...

    marek 評論0 收藏0

  • 淺談---事件冒泡--事件捕獲--Vue2.0中的capture

    摘要：直白點(diǎn)事件觸發(fā)順序子元素父元素事件冒泡和事件捕獲圖解標(biāo)準(zhǔn)事件監(jiān)聽標(biāo)準(zhǔn)事件監(jiān)聽其實(shí)是事件冒泡和事件捕獲的混合體任何事件發(fā)生時，先從頂層開始進(jìn)行事件捕獲，直到事件觸發(fā)到達(dá)了事件源元素。然后，再從事件源往上進(jìn)行事件冒泡，直到到達(dá)。 前言 本文主要介紹 事件冒泡 和 事件捕獲 以及Vue中的capture 主要內(nèi)容 事件捕獲 含義:從最特定的事件目標(biāo)到最不特定的事件目標(biāo)(document對象...

    Raaabbit 評論0 收藏0

  • vue1.x 事件對象（二）

    摘要：事件句柄的新特性之一是能夠使事件觸發(fā)瀏覽器中的行為，比如當(dāng)用戶點(diǎn)擊某個元素時啟動一段。下面是一個屬性列表，可將之插入標(biāo)簽以定義事件的行為。鍵盤事件的代碼鏈接其他基礎(chǔ)使用一 本文主要簡述了event 對象，順便復(fù)習(xí)了一下事件句柄　(Event Handlers)，鍵盤的一些屬性，以及最容易遇到的事件冒泡，同樣的阻止事件冒泡，在vue 下是怎樣解決的，vue 提供了那些方便去阻止事件冒泡。...

    Enlightenment 評論0 收藏0

  • vue1.x 事件對象（二）

    摘要：事件句柄的新特性之一是能夠使事件觸發(fā)瀏覽器中的行為，比如當(dāng)用戶點(diǎn)擊某個元素時啟動一段。下面是一個屬性列表，可將之插入標(biāo)簽以定義事件的行為。鍵盤事件的代碼鏈接其他基礎(chǔ)使用一 本文主要簡述了event 對象，順便復(fù)習(xí)了一下事件句柄　(Event Handlers)，鍵盤的一些屬性，以及最容易遇到的事件冒泡，同樣的阻止事件冒泡，在vue 下是怎樣解決的，vue 提供了那些方便去阻止事件冒泡。...

    JasinYip 評論0 收藏0

發(fā)表評論

0條評論

Youngs

男|高級講師

TA的文章

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