JavaScript 事件-事件流，事件冒泡，事件捕获，事件绑定与解绑，事件委托、阻止冒泡、阻止默认行为详细篇
一、事件流
事件流描述的是从页面中接受事件的顺序，当几个都具有事件的元素层叠在一起的时候，那么你点击其中一个元素，并不是只有当前被点击的元素会触发事件，而层叠在你点击范围的所有元素都会触发事件。
事件流包括两种模式：冒泡和捕获
当一个DOM事件被触发时，它不仅仅只是单纯地在本身对象上触发一次，而是会经历三个不同的阶段：
捕获阶段：先由文档的根节点document往事件触发对象，从外向内捕获事件对象；
目标阶段：到达目标事件位置（事发地），触发事件；
冒泡阶段：再从目标事件位置往文档的根节点方向回溯，从内向外冒泡事件对象。
事件冒泡：
子集元素先触发，父级元素后触；（由内到外）
子集元素和父元素具备同样的事件，当触发子元素时，也会触发父元素的事件。
事件捕获：
父级元素先触发，子集元素后触发；（由外到内）
二、事件绑定与解绑
(1)element.addEventListener(event, function, useCapture);
element.removeEventListener(event, function, useCapture);IE8及以下不支持
IE不支持addEventListener和removeEventListener方法
第一个参数：必须。字符串，指定事件名。不要使用 “on” 前缀。 例如，使用 “click” ,而不是使用 “onclick”。
第二个参数：必须。指定要事件触发时执行的函数。
第三个参数：可选。布尔值，指定事件是否在捕获或冒泡阶段执行。
true - 事件句柄在捕获阶段执行
false- false- 默认。事件句柄在冒泡阶段执行
var element=document.getElementById("box");var handler=function(){event.preventDefault( ); //阻止默认事件}//绑定事件element.addEventListener('click', handler, false);//解绑事件element.removeEventListener('click', handle, false);
(2)attachEvent(event.type, handle );
detachEvent(“onclick”, handler); IE特有，兼容IE8及以下，可添加多个事件处理程序，只支持冒泡阶段，并不属于DOM2
有类似于addEventListener的方法：attachEvent（）；detachEvent（）； 区别就是attachEvent（）的参数只有两个且和addEventListener（）前两个参数一致，只支持冒泡
var element=document.getElementById("box");var handler=function(){event.returnValue = false; //阻止默认事件}//绑定事件element.attachEvent('onclick', handler);//解绑事件，参数和绑定一样element.detachEvent("onclick", handler);
(3)封装事件绑定与解绑函数,兼容浏览器
//用事件冒泡方式，如果想兼容事件捕获只需要添加个bool参数var EventUtil = {addEvent: function(element,type,handler) {if (element.addEventListener) {element.addEventListener(type,handler,false);}else if (element.attachEvent) {element.attachEvent('on'+type,handler);}else {element['on'+type] = handler;}},removeEvent: function(element,type,handler) {if (element.removeEventListener){element.removeEventListener(type,handler,false);}else if(element.detachEvent) {element.detachEvent('on' +type,handler);}else {element['on'+type] = null;}}}
//如何调用
var box= document.getElementById("box");var handler = function(){console.log(111);};EventUtil.addEvent(box, "click", handler);EventUtil.removeEvent(box, "click", handler);
三、阻止冒泡
event.stopPropagation() 阻止事件冒泡的产生
<!DOCTYPE html><html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1"><title></title><style>#demo1 {width: 300px;height: 300px;background: red;}#demo2 {width: 200px;height: 200px;background: blue;}#demo3 {width: 100px;height: 100px;background: yellow;}</style><script type="text/javascript">window.onload = function() {var demo1 = document.getElementById("demo1");var demo2 = document.getElementById("demo2");var demo3 = document.getElementById("demo3");var fnDome = function() {alert(this.id)}function fnStop() {alert(this.id);event.stopPropagation();//event.stopPropagation() 阻止事件冒泡的产生//Propagation（繁殖、传播 )}//单独一项一项测试时//demo1.addEventListener("click", fnDome, false); //demo1,点击三个div都会弹出//demo2.addEventListener("click", fnDome, false); //demo2,点击demo2，demo3两个div都会弹出//demo3.addEventListener("click", fnDome, false); //demo3,点击demo3这个div//demo1.addEventListener("click", fnDome, true); //demo1点击三个div都会弹出//demo2.addEventListener("click", fnDome, true); //demo1,点击demo2，demo3两个div都会弹出// demo3.addEventListener("click", fnDome, true); //demo1,点击demo3这个div//demo1.addEventListener("click", fnStop, false); //demo1,点击三个div都会弹出//demo2.addEventListener("click", fnStop, false); //demo2,点击demo2，demo3两个div都会弹出//demo3.addEventListener("click", fnStop, false); //demo3，点击demo3这个div//demo1.addEventListener("click", fnStop, true); //demo1,点击三个div都会弹出//demo2.addEventListener("click", fnStop, true); //demo2,点击demo2，demo3两个div都会弹出//demo3.addEventListener("click", fnStop, true); //demo3,点击demo3这个div//事件处理函数不能加括号,否则会直接执行//总结:当选中一个节点时，无论是冒泡还是捕获,里面的节点有同样的事件//第二次测试,合并测试,当一个事假有多个节点时// demo1.addEventListener("click", fnDome, false); //一次，demo1// demo2.addEventListener("click", fnDome, false); //二次，demo2,demo1// demo3.addEventListener("click", fnDome, false); //三次，demo3,demo2,demo1//总结:冒泡事件按从内到外依次执行//第三次测试,合并测试,当一个事假有多个节点时// demo1.addEventListener("click", fnDome, true); //demo1// demo2.addEventListener("click", fnDome, true); //demo1,demo2// demo3.addEventListener("click", fnDome, true); //demo1,demo2,demo3//总结:鋪貨事件按从外到内依次执行//第四次测试,合并测试,当一个事假有多个节点时// demo1.addEventListener("click", fnStop, false); //demo1// demo2.addEventListener("click", fnStop, false); //demo2// demo3.addEventListener("click", fnStop, false); //demo3//第五次测试,合并测试,当一个事假有多个节点时//demo1.addEventListener("click", fnStop, true); //demo1demo2.addEventListener("click", fnStop, true); //demo1demo3.addEventListener("click", fnStop, true); //demo1}</script></head><body><div id="demo1">1<div id="demo2">2<div id="demo3">3</div></div></div></body></html>
总结：
（1）当选中一个节点时，无论是冒泡还是捕获,节点里面的节点有同样的事件
（2）当一个事件有多个节点时，冒泡事件按从内到外依次执行
（3）当一个事件有多个节点时，捕获事件按从外到内依次执行
（4）当一个事件有多个节点时，阻止事件冒泡的产生，冒泡事件，只会执行当前或包含的节点事件，不会冒泡，执行完里面节点的事件不会接着执行包含节点的节点事件，也就是说只会执行一次，如果不阻止事件冒泡的产生，则会将事件一个个执行完
（5）当一个事件有多个节点时，阻止事件冒泡的产生，捕获事件，只会执行第一个捕获到的事件
四、阻止默认
w3c 的方法是 e.preventDefault()，
IE 则是使用 e.returnValue =false;
preventDefault 它是事件对象(Event)的一个方法，作用是取消一个目标元素的默认行为。比如超链接a
<body><a href="事件冒泡.html" target="_blank">啦啦啦啦啦</a><script type="text/javascript">var a1=document.getElementsByTagName('a')[0];//传统用法阻止事件的默认发生// a1.οnclick=function(e){// e.preventDefault();// }//使用DOM方法来阻止默认发生a1.addEventListener('click',show);//兼容function show(e){if (e.preventDefault) {e.preventDefault();} else{window.event.returnValue=false;}}</script></body>
今天药忘吃喽~
向右看齐
阳光穿透心脏的1/2处
还没有评论，来说两句吧...