JS Event事件流（冒泡机制、捕获机制、事件绑定）

时间  2019-11-29
标签 event 事件 冒泡 机制 捕获 绑定 栏目 JavaScript 繁體版
原文   原文链接

1.事件流javascript

事件流：从页面中接收事件的顺序。也就是说当一个事件产生时，这个事件的传播过程，就是事件流。css

  • IE的事件流

　　IE中的事件流叫事件冒泡；事件冒泡：事件开始时由最具体的元素接收，而后逐级向上传播到较为不具体的节点（文档）。对于html来讲，就是当一个元素产生了一个事件，它会把这个事件传递给它的父元素，父元素接收到了以后，还要继续传递给它的上一级元素，就这样一直传播到document对象（亲测如今的浏览器到window对象，只有IE8及下不这样）；html

再多说一句，如今的浏览器默认是采用的是事件冒泡；在DOM0级方法绑定事件只能是事件冒泡，不能设置；在DOM2级你能够设置是用事件冒泡仍是事件捕获（下面说）；java

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件冒泡</title>
<style type="text/css">
#child{background: red;width: 50px;height: 50px;}
#father{width: 100px;height: 100px;background: green;}
#grandparent{
width: 150px;height: 150px;background: black;margin: 100px auto 0;}
</style>
</head>
<body>
<div id="grandparent">
<div id="father">
<div id="child"></div>
</div>
</div>
</body>
<script type="text/javascript">
var grandparent=document.getElementById("grandparent");
var parent=document.getElementById("father");
var child=document.getElementById('child');
var body=document.body;
var html=document.getElementsByTagName("html")[0];
child.onclick=function(){
console.log("我是儿子");
}
parent.onclick=function(){
console.log("我是父亲");
}
grandparent.onclick=function(){
console.log("我是爷爷");
}
window.onclick=function(){
console.log("我是window");
}
document.onclick=function(){
console.log("我是document");
}
html.onclick=function(){
console.log("我是html");
}
body.onclick=function(){
console.log("我是body");
}
</script>chrome

</html>浏览器

当我点击红色部分函数

 

会打印这样：测试

 

我测试了（PS:我用的都是最新版的）chrome，firefox，opera，IE11，IE10，IE9都是这个结果，也就是说如今都冒泡到window对象，不只仅是到document对象，可是IE8及以前的就冒泡到document就结束了；this

这就是事件冒泡，它会把你这个click事件，一级一级的向上传递，若是相应的元素也绑定click事件处理程序（这里强调是click事件，若是你是给绑定了其它事件，那没用），那么它的这个事件处理程序也会执行，也就产生了上面的结果了；spa

形象的就是跟水里的鱼吐泡泡似的，慢慢的向上传递；

  • 事件捕获

　　事件捕获是网景（Netscape）提出来的，事件捕获是不太具体的元素应该更早接受到事件，而最具体的节点应该最后接收到事件。他们的用意是在事件到达目标以前就捕获它；也就是跟冒泡的过程正好相反，以html的click事件为例，document对象（DOM级规范要求从document开始传播，可是如今的浏览器是从window对象开始的）最早接收到click事件的而后事件沿着DOM树依次向下传播，一直传播到事件的实际目标；我测试了一下（我用的都是最新的浏览器），chrome，opera，firefox，IE11到IE9都支持事件捕获。

代码等着我在下面讲DOM事件流再一块说明；

  • DOM事件流

　　DOM2级中规定了事件流要包括三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。这是W3C采用了他们两家的事件监听机制。（说点题外话，w3c中的不少标准就是这样，浏览器厂商有不少本身的私有解决问题方式，好用的就被W3c采纳了）DOM2级还规定，实际发生事件的元素在捕获阶段不能接收到事件。咱们就以上面的事件冒泡时的代码说明这个过程：按照标准是这样的，当一个元素产生了事件，事件是从document到html再到body再到DIV爷爷再到DIV爸爸，这时候捕获阶段就应该中止了，再进入下一个阶段“处于目标阶段”，而后是从DIV爸爸到DIV爷爷再到body再到html再到document，这就是事件冒泡阶段；实际上咱们把处于目标阶段即第二阶段看做是冒泡阶段的一部分，即冒泡的开始；其实是怎么样的呢？先上代码，仍是前面的代码只是改了一下js代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件冒泡</title>
<style type="text/css">
#child{ background: red; width:50px; height:50px; }
#father{ width:100px; height:100px; background:green; }
#grandparent{ width:150px; height:150px; background:black; margin:100px auto 0; }
</style>
</head>
<body>
<div id="grandparent">
<div id="father">
<div id="child"></div></div>
</div>
</body>
<script type="text/javascript">
var grandparent = document.getElementById("grandparent");
var parent = document.getElementById("father");
var child = document.getElementById('child');
var html = document.getElementsByTagName("html")[0];
var body = document.body;
grandparent.addEventListener("click",function ()
{console.log("I am capturing grandparent"); },true);
grandparent.addEventListener("click",function () {console.log("I am grandparent"); },false);
parent.addEventListener("click",function() {console.log("I am parent"); },false);
parent.addEventListener("click",function() { console.log("I am capturing parent"); },true);
child.addEventListener("click",function() { console.log("I am capturing child"); },true);
child.addEventListener("click",function() { console.log("I am child"); },false);
body.addEventListener("click",function() { console.log("I am body"); },false);
body.addEventListener("click",function() { console.log("I am capturing body"); },true);
html.addEventListener("click",function() { console.log("I am capturing html"); },true);
html.addEventListener("click",function() { console.log("I am html"); },false);
document.addEventListener("click",function() { console.log("I am capturing document"); },true);
document.addEventListener("click",function() { console.log("I am document"); },false);
window.addEventListener("click",function() {console.log("I am window"); },false);
window.addEventListener("click",function() {console.log("I am capturing window"); },true);
</script></html>

代码有点多见谅了！也是为了最能说明问题！

打印是这样的：

 

这是我点击最里面DIV儿子元素所发生的情形，能够看出捕获阶段也能触发目标元素上的事件，而不只仅是在冒泡阶段；而且仍是从window开始，到最后再以window对象结束，浏览器厂商就是任性，不把W3c看在眼里。你的标准我想实现就实现不想就不实现；

当我把DIV爷爷的事件绑定方式换成DOM0级的方式，其余的保持不变，即

grandparent.onclick = function() {    console.log("我是在哪一个阶段发生呢？")  }

是这样打印的

再次说明了我上面在IE事件流中强调的，用DOM0级绑定事件时，事件只发生冒泡的阶段；

 

二、Event属性和方法：

1. type：事件的类型，如onlick中的click；

2. srcElement/target：事件源，就是发生事件的元素；

3. button：声明被按下的鼠标键，整数，1表明左键，2表明右键，4表明中键，若是按下多个键，酒把这些值加起来，因此3就表明左右键同时按下；（firefox中 0表明左键，1表明中间键，2表明右键）

4. clientX/clientY：事件发生的时候， 鼠标相对于浏览器窗口可视文档区域的左上角的位置；(在DOM标准中，这两个属性值都不考虑文档的滚动状况，也就是说，不管文档滚动到哪里，只要事件发生在窗口左上角，clientX和clientY都是 0， 因此在IE中，要想获得事件发生的坐标相对于文档开头的位置，要加上
document.body.scrollLeft和 document.body.scrollTop)

5. offsetX,offsetY/layerX,layerY：事件发生的时候， 鼠标相对于源元素左上角的位置；

6. x,y/pageX,pageY：检索相对于 父元素鼠标水平坐标的整数；

7. altKey,ctrlKey,shiftKey等：返回一个布尔值；

8. keyCode：返回keydown和keyup事件发生的时候按键的代码，以及keypress 事件的Unicode字符；(firefox2不支持 event.keycode，能够用 event.which替代 )

9. fromElement,toElement：前者是指代mouseover事件中鼠标移动过的文档元素，后者指代mouseout事件中鼠标移动到的文档元素；

10. cancelBubble：一个布尔属性，把它设置为true的时候，将中止事件进一步起泡到包容层次的元素；(e.cancelBubble = true; 至关于 e.stopPropagation();)

11. returnValue：一个布尔属性，设置为false的时候能够组织浏览器执行默认的事件动做；(e.returnValue = false; 至关于 e.preventDefault();)

12. attachEvent(),detachEvent()/addEventListener(),removeEventListener：为制定 DOM对象事件类型注册多个事件处理函数的方法，它们有两个参数，第一个是事件类型，第二个是事件处理函数。在
attachEvent()事件执行的时候，this关键字指向的是window对象，而不是发生事件的那个元素；
IE：obj.attachEvent(事件名称,事件函数);
        一、没有捕获；
        二、事件名称有on
        三、函数执行的顺序：标准IE--正序，非标准IE--倒序；
标准：obj.addEventListener(事件名称，事件函数，是否捕获);
        一、有捕获
         二、事件名称没有on
        三、事件执行的顺序是正序的；
       四、this 触发该事件的对象；
//是否捕获？：默认是false
 false:冒泡
var dv1=document.getElementById("d1");
dv1.addEventListener("click",function(){alert(1);},false);/*告诉div1，若是有一个 出去的事件触发了你，你就去执行函数体，alert(1);*/
 true:捕获
  dv1.addEventListener("click",function(){alert(3);},true);/*告诉div1，若是有一个进来的事件触发了你，你就去执行函数体，alert(3);*/
 
事件的取消：
 
（1）、普通绑定方式：
function fn1(){alert(1);}     function fn2(){alert(1);}
document.onClick=fn1;----->取消事件绑定： document.Onclick=null;
(2) 、attachEvent(事件名称，事件函数) 绑定方式：
document.attachEvent("onclick",fn1);document.attachEvent("onclick",fn2);----->取消事件绑定：document. detachEvent("onclick",fn1);
(3)、addEventListener(事件名称，事件函数，是否捕获);
document.addEventListener("click",fn1,flase);document.addEventListener("click",fn1,true);document.addEventListener("click",fn2,flase);
----->取消事件绑定：document. removeEventListener("click",fn1,false);
        


13. screenX、screenY： 鼠标指针相对于显示器左上角的位置，若是你想打开新的窗口，这两个属性很重要；


一些说明：

1.  event表明事件的状态，例如触发event对象的元素、鼠标的位置及状态、按下的键等等；

2.  event对象只在事件发生的过程当中才有效。
firefox里的event跟IE里的不一样，IE里的是全局变量，随时可用；firefox里的要用参数引导才能用，是运行时的临时变量。
在IE/Opera中是window.event，在Firefox中是event；而事件的对象，在IE中是 window.event.srcElement，在Firefox中是event.target，Opera中二者均可用。

3.  下面两句效果相同
var evt = (evt) ? evt : ((window.event) ? window.event : null);
var evt = evt || window.event; // firefox下window.event为null, IE下event为null

4.  IE中事件的起泡
IE中事件能够沿着包容层次一点点起泡到上层，也就是说，下层的DOM节点定义的事件处理函数，到了上层的节点若是还有和下层相同事件类型的事件处理函数，那么上层的事件处理函数也会执行。例如， div 标签包含了 a ，若是这两个标签都有onclick事件的处理函数，那么执行的状况就是先执行标签 a 的onclick事件处理函数，再执行 div 的事件处理函数。 若是但愿的事件处理函数执行完毕以后，不但愿执行上层的 div 的onclick的事件处理函数了，那么就把cancelBubble设置为true便可。
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程