" />

亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

Javascript事件的捕獲方式和冒泡方式詳解

 更新時間：2021年12月08日 16:09:51   作者：陛下，再來一杯娃哈哈  
這篇文章主要為大家介紹了Javascript事件的捕獲方式和冒泡方式，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助

一、事件處理模型

事件冒泡、捕獲：事件冒泡和事件捕獲分別由微軟和網(wǎng)景公司提出，這兩個概念都是為了解決頁面中事件流（事件發(fā)生順序）的問題。

<div id="d1">
        <div id="d2">
            <div id="d3"></div>
        </div>
</div>

給出的具有嵌套關(guān)系的三個div，給三個元素注冊相同的事件時，它們的觸發(fā)順序時怎樣呢？

1、事件冒泡

微軟提出了名為事件冒泡的事件流。結(jié)構(gòu)上（非視覺上）嵌套關(guān)系的元素，會存在冒泡的功能，即同一事件，自子元素冒泡向父元素。（自底向上）

針對上面的例子，如果用冒泡方式，觸發(fā)順序應(yīng)該時：d3——>d2——>d1，那么我們來驗證一下：

（1）給三個div元素綁定事件

//1.獲取元素
var d1 = document.querySelector('#d1')
var d2 = document.querySelector('#d2')
var d3 = document.querySelector('#d3')
//2、綁定事件
d1.onclick = function(){
     console.log(this.id)
  }
d2.onclick = function(){
      console.log(this.id)
  }
d3.onclick = function(){
      console.log(this.id)
   }

（2）運行結(jié)果：

單擊紅色區(qū)域:

單擊紫色區(qū)域：

單擊綠色區(qū)域：?

以上就是事件冒泡啦！?

2、事件捕獲

結(jié)構(gòu)上（非視覺上）嵌套關(guān)系的元素，會存在事件捕獲的功能，即同一事件，自父元素捕獲至子元素（事件源元素）。（自頂向下）（ie沒有捕獲事件）

針對上面的例子，如果用冒泡方式，觸發(fā)順序應(yīng)該時：d1——>d2——>d3，那么我們來驗證一下：

（1）給三個div元素綁定事件

//1.獲取元素
var d1 = document.querySelector('#d1')
var d2 = document.querySelector('#d2')
var d3 = document.querySelector('#d3')
//2、綁定事件
d1.onclick = function(){
     console.log(this.id)
  }
d2.onclick = function(){
      console.log(this.id)
  }
d3.onclick = function(){
      console.log(this.id)
   }

（2）運行結(jié)果：

單擊紅色區(qū)域：

?

單擊紫色區(qū)域：

單擊綠色區(qū)域：

事件捕獲get!!!?

注意：

  • 觸發(fā)順序 ：先捕獲，后冒泡
  • focus,blur,change,submit,reset,select等事件不冒泡

二、阻止事件冒泡

（1）w3c標(biāo)準(zhǔn) event.stopPropagation();但ie9以下版本不支持

//1.獲取元素
var d1 = document.querySelector('#d1')
var d2 = document.querySelector('#d2')
var d3 = document.querySelector('#d3')
//2、綁定事件
d1.onclick = function(){
     console.log(this.id)
  }
d2.onclick = function(){
      console.log(this.id)
  }
d3.onclick = function(e){
      e.stopPropagation();
      console.log(this.id)
   }

會發(fā)現(xiàn)單擊綠色區(qū)域時?，沒有依次觸發(fā)外部的事件，事件冒泡被阻止：

（2）ie獨有：event.cancelBubble = true;

//1.獲取元素
var d1 = document.querySelector('#d1')
var d2 = document.querySelector('#d2')
var d3 = document.querySelector('#d3')
//2、綁定事件
d1.onclick = function(){
     console.log(this.id)
  }
d2.onclick = function(){
      console.log(this.id)
  }
d3.onclick = function(e){
      e.cancelBubble = true;
      console.log(this.id)
   }

結(jié)果同（1）。

（3）合并取消：return false

在javascript的return false只會阻止默認(rèn)行為，而是用jQuery的話則既阻止默認(rèn)行為又防止對象冒泡。

總結(jié)

本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!

相關(guān)文章

最新評論