JS事件冒泡机制和兼容性添加事件

本篇文章主要来讲讲事件的冒泡机制和添加事件的几种方法。

一. JS的时间传递顺序: 捕获阶段 -> 目标阶段 -> 冒泡阶段

捕获阶段是指从父层往子层找。比如 <body><div></div></body> ，我们会先找到 body，然后下一个才是 div。就像中央领导发布政策一样。从上往下通知。
目标阶段就是找到目标的那段时间，这个我们暂且不谈。
冒泡阶段就是从子层往外层传。比如 <body><div></div></body> ，这个时候是先写 div ，再找 body。往外依次冒泡。从内往外通知。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><div id="div2"><div id="div1">点我</div></div>
</body>
<script type="text/javascript">var div1 = document.getElementById('div1'),div2 = document.getElementById('div2');div1.addEventListener('click', function(event) {console.log("A");}, true);div2.addEventListener('click', function(event) {console.log("B");});div1.addEventListener('click', function(event) {console.log("C")}, false);div2.addEventListener('click', function(event) {console.log("D");}, true);
</script>
</html>

答案是： DACB

1.我们的 addEventListener 默认的第三个参数是 false。false代表的是在冒泡阶段触发。true代表在捕获阶段触发。
2.因为第一个和第四个函数都是true，所以它们会先被触发，而 div1是被包在 div2 里面的，所以，先触发的会是 div2的，所以是 DA。
之后进入冒泡阶段，从内往外，第二个和第三个函数这个时候的顺序是： CB

二. 兼容性地添加 JS 事件

如果我们要给按钮添加事件，我们会怎么做呢？
也许我们会这么做<button onclick="console.log('1')">点我</button>
很明显地，它破坏了标签。我们应该让 html 和事件分离，否则，我们下一次要修改这个按钮就不好操作了。
1.耦合度太高。
所以我们这样

const oBtn = document.getElementsByTagName('button')[0];
oBtn.onclick = function() {console.log('1');
}

然后，当我们要添加多个事件的时候，可能就带来了问题。

  const oBtn = document.getElementsByTagName('button')[0];oBtn.onclick = function() {console.log('1');}oBtn.onclick = function() {console.log('我是第二次');}

2.被覆盖了。

所以我们改成了这样

  const oBtn = document.getElementsByTagName('button')[0];// addEventListeneroBtn.addEventListener("click", () => {console.log('1')});oBtn.addEventListener("click", () => {console.log('我是第二次')} );

上面的执行顺序为 1 -> 第二次。很好，但是
3.IE7/8上报错了。IE没有addEventListener

所以我们改成了这样

  var oBtn = document.getElementsByTagName('button')[0];function addEvent(ele, event, fn) {if (ele.addEventListener) {ele.addEventListener(event, fn, false)} else if (ele.attachEvent('on' + event, fn));}addEvent(oBtn, 'click', function(){console.log('1')})addEvent(oBtn, 'click' , function(){console.log('第二次')});

至此，大功告成，坑爹的 IE，还不支持 ES6/7

转载于:https://www.cnblogs.com/can-i-do/p/7412298.html

JS事件冒泡机制和兼容性添加事件相关推荐

JS事件冒泡机制以及委托方法,以及vue中的stop
要理解事件冒泡机制,就得先了解事件. 浏览器是事件驱动型的,根据用户的行为触发不同的事件,根据事件执行相应的操作.我们较为熟悉的事件有三大类型:鼠标键盘事件.页面事件.表单相关事件. 鼠标键盘事件:o ...
IOS中的事件响应链,事件冒泡机制基本了解
本文主要讲解IOS中事件响应链,即事件冒泡机制.做过web开发的同学应该知道js事件冒泡是从主响应元素一层一层的向父级冒泡事件,在ios亦是如此,但是不同是ios中,如果冒泡链中有一方对事件进行响应处 ...
事件冒泡机制和如何阻止冒泡
一.事件冒泡在浏览器客户端应用平台,基本上都是以事件驱动的,就是说去执行某个事件,然后做出相应的操作. 事件冒泡就是在事件开始时,由最具体的元素(文档中最底层的那个节点)接受,然后逐级向上传播到最不 ...
【Android View事件分发机制】关于拦截事件的注意点
在父容器拦截事件时,为什么不能拦截DOWN事件呢? 先看看源码: 回顾一下事件分发机制原理,当事件来了之后,如果父容器不拦截,则会询问其child view ,当某child view 有事件需求,父 ...
JS——事件冒泡机制
1. 事件在浏览器客户端应用平台,基本生都是以事件驱动的,即某个事件发生,然后做出相应的动作. 浏览器的事件表示的是某些事情发生的信号.事件的阐述不是本文的重点,尚未了解的朋友,可 ...
什么是事件冒泡机制?
什么是事件冒泡? 冒泡的机制: 这气泡就相当于我们的事件,鱼就是事件源,而水则相当于我们的整个dom树:事件从dom 树的底层层层往上传递,直至传递到dom的根节点. 栗子 : 样式布局代码结构 ...
关于JS 事件冒泡和onclick,click,on()事件触发顺序
今天在给JQgrid中的标签添加click事件的时候,发现一个问题. JQgrid的table中,点击任何位置,都会勾选点击行的checkbox,而我希望在点击我的标签的时候,不要勾选checkbox ...
click事件在什么时候出发_关于JS 事件冒泡和onclick,click,on()事件触发顺序
今天在给JQgrid中的标签添加click事件的时候,发现一个问题. JQgrid的table中,点击任何位置,都会勾选点击行的checkbox,而我希望在点击我的标签的时候,不要勾选checkbox ...
js /jquery停止事件冒泡和阻止浏览器默认事件
var el = window.document.getElementById("a");el.onclick = function (e) {//如果提供了事件对象,则这是一个非 ...

JS事件冒泡机制和兼容性添加事件

本篇文章主要来讲讲事件的冒泡机制和添加事件的几种方法。

一. JS的时间传递顺序: 捕获阶段 -> 目标阶段 -> 冒泡阶段

答案是： DACB

二. 兼容性地添加 JS 事件

至此，大功告成，坑爹的 IE，还不支持 ES6/7

JS事件冒泡机制和兼容性添加事件相关推荐

最新文章

热门文章

JS事件冒泡机制和兼容性添加事件

本篇文章主要来讲讲 事件的冒泡机制 和 添加事件的几种方法。

一. JS的时间传递顺序: 捕获阶段 -> 目标阶段 -> 冒泡阶段

答案是： DACB

二. 兼容性地添加 JS 事件

至此，大功告成，坑爹的 IE，还不支持 ES6/7

JS事件冒泡机制和兼容性添加事件相关推荐

最新文章

热门文章

本篇文章主要来讲讲事件的冒泡机制和添加事件的几种方法。