" />

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

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

一、事件處理模型

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

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

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

1、事件冒泡

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

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

（1）給三個(gè)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）運(yùn)行結(jié)果：

單擊紅色區(qū)域:

單擊紫色區(qū)域：

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

以上就是事件冒泡啦！?

2、事件捕獲

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

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

（1）給三個(gè)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）運(yùn)行結(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)
   }

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

（2）ie獨(dú)有：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只會(huì)阻止默認(rèn)行為，而是用jQuery的話則既阻止默認(rèn)行為又防止對(duì)象冒泡。

總結(jié)

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

相關(guān)文章

最新評(píng)論