布鲁塞尔一处公馆产生枪击澳门新葡亰官网,JS中事件冒泡和事件捕获介绍

by admin on 2019年3月2日

  ​根据澳大利亚媒体5日最新报道,悉尼西北部一处住所发生枪击事件,造成2人死亡,1人受伤。目前警方已经抵达现场,但事件原因不详。(央视记者
王聪)

谈起JavaScript的
事件,事件冒泡、事件捕获、阻止默认事件这三个话题,无论是面试还是在平时的工作中,都很难避免。
事件捕获阶段:事件从最上一级标签开始往下查找,直到捕获到事件目标(target)。
事件冒泡阶段:事件从事件目标(target)开始,往上冒泡直到页面的最上一级标签。

1、冒泡事件:

事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。通俗来讲就是,就是当设定了多个div的嵌套时;即建立了父子关系,当父div与子div共同加入了onclick事件时,当触发了子div的onclick事件后,子div进行相应的js操作,但是父div的onclick事件同样会被触发。

html:

<div>
 <input type="button" value="测试事件冒泡" />
</div>

js:

  var $input = document.getElementsByTagName("input")[0];
   var $div = document.getElementsByTagName("div")[0];
   var $body = document.getElementsByTagName("body")[0];

   $input.onclick = function(e){
      this.style.border = "5px solid red"
      var e = e || window.e;
      alert("red")
   }
   $div.onclick = function(e){
      this.style.border = "5px solid green"
      alert("green")
   }
   $body.onclick = function(e){
      this.style.border = "5px solid yellow"
      alert("yellow")
   }

效果:依次弹出”red“,”green”,”yellow”。这就是事件冒泡:触发button这个元素,却连同父元素绑定的事件一同触发。

2、阻止事件冒泡

如果对input的事件绑定改为:

$input.onclick = function(e){
  this.style.border = "5px solid red"
  var e = e || window.e;
  alert("red")
  e.stopPropagation();
}

这个时候只会弹出”red“,因为阻止了事件冒泡。

3、事件捕获:

从顶层元素到目标元素或者从目标元素到顶层元素,和事件冒泡是一个相反的过程。事件从最不精确的对象(document
对象)开始触发,然后到最精确(也可以在窗口级别捕获事件,不过必须由开发人员特别指定)。

$input.addEventListener("click", function(){
  this.style.border = "5px solid red";
  alert("red")
}, true)
$div.addEventListener("click", function(){
  this.style.border = "5px solid green";
  alert("green")
}, true)
$body.addEventListener("click", function(){
  this.style.border = "5px solid yellow";
  alert("yellow")
}, true)

这个时候依次弹出”yellow“,”green”,”red”。这就是事件的捕获。 

如果把addEventListener方法的第三个参数改成false,则表示只在冒泡的阶段触发,弹出的依次为:”red“,”green”,”yellow”。这是因为在W3C模型中,任何事件发生时,先从顶层开始进行事件捕获,直到事件触发到达了事件源元素。然后,再从事件源往上进行事件冒泡,直到到达document。

程序员可以自己选择绑定事件时采用事件捕获还是事件冒泡,方法就是绑定事件时通过addEventListener函数,它有三个参数,第三个参数若是true,则表示采用事件捕获,若是false,则表示采用事件冒泡。

ele.addEventListener(‘click’,doSomething2,true)
true=捕获
false=冒泡

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

您可能感兴趣的文章:

  • js之事件冒泡和事件捕获详细介绍
  • js事件冒泡、事件捕获和阻止默认事件详解
  • javaScript
    事件绑定、事件冒泡、事件捕获和事件执行顺序整理总结
  • JS中绑定事件顺序(事件冒泡与事件捕获区别)
  • javascript事件冒泡和事件捕获详解
  • js事件冒泡与事件捕获详解
  • 一篇文章让你彻底弄懂JS的事件冒泡和事件捕获
  • 浅谈javascript中的事件冒泡和事件捕获
  • javascript
    中事件冒泡和事件捕获机制的详解
  • JavaScript事件冒泡与事件捕获实例分析

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图