JS中 事件冒泡与事件捕获

　　【JS中的事件流】

 　　　　1、事件冒泡：当某DOm元素触发一种事件时，会从当前节点开始，逐级往上触发其祖先节点的同类型事件，直到DOM根节点；

　　　　　　 　　　　>>>什么情况下会产生事件冒泡

　　　　　　① DOM0模型绑定事件，全部都是冒泡

　　　　　　② IE8之前，使用attachEvent()绑定事件、全部都是冒泡

　　　　　　③ 其他浏览器，使用addEventLinstener()添加事件，当第三个参数省略或者为false时，为事件冒泡

　　　　 2、事件捕获：当其DOM元素触发一种事件时，会从文档根节点开始，逐级向下触发其祖先节点的同类型事件，直到该节点自身。

 　　　　　　　　　　>>>什么情况下触发事件捕获：

　　　　　　① 使用addEventListener添加事件，当第三个参数省略或者为true时，为事件捕获。

　　　　　　


　　　　 3、阻止事件冒泡

 　　　　　　　在IE浏览器中，使用 e.cancelBubble = true;

　　　　　　　 在其他浏览器中，使用 e.stopPropagation();

 　　　　　　　兼容所有浏览器的写法：

 　　　　　　　　　　function myParagraphEventHandler(e) {

　　　　　　　　　　　　　　e = e || window.event;

　　　　　　　　　　　　if (e.stopPropagation) {

　　　　　　　　　　　　　　e.stopPropagation(); //IE以外

　　　　　　　　　　　　　} else {

　　　　　　　　　　　　　　e.cancelBubble = true; //IE

　　　　　　　　　　　　}

　　　　　　　　　　}

　　　　4、取消事件默认行为

　　　　　　　在IE浏览器中，使用 e.returnValue = false;

　　　　　　　在其他浏览器中，使用 e.preventDefault();

　　　　　　　兼容所有浏览器的写法：

　　　　　　　　　　function eventHandler(e) {

　　　　　　　　　　　　　　e = e || window.event;

　　　　　　　　　　　　　　　　// 防止默认行为

　　　　　　　　　　if (e.preventDefault) {

　　　　　　　　　　　　　　e.preventDefault(); //IE以外

　　　　　　　　　　} else {

　　　　　　　　　　　　　　e.returnValue = false; //IE

　　　　　　　　　　}

　　　　　　　　}

　　　　　　　　　div1.addEventListener("click",function(e){

　　　　　　　　　　　　e.stopPropagation();*///不考虑老版本IE，可以使用这一句话

　　　　　　　　　　　　console.log("div1触发事件");

　　　　　　　　　　},false);

　　　　　　　　 div2.addEventListener("click",function(){

　　　　　　　　　　　　myParagraphEventHandler();*/// 考虑老版本IE兼容性，可以封装一个函数调用

　　　　　　　　　　　　console.log("div2触发事件");

　　　　　　　　　　},false);

　　　　　　　　　　　　div3.addEventListener("click",function(){

　　　　　　　　　　　　　myParagraphEventHandler();

　　　　　　　　　　　　　　console.log("div3触发事件");

　　　　　　　　　　},false);

　　　　　　　　　　　　　　// 阻止事件冒泡

　　　　　　　　function myParagraphEventHandler(e) {

　　　　　　　　　　　　e = e || window.event;

　　　　　　　　　　　　if (e.stopPropagation) {

　　　　　　　　　　　　e.stopPropagation(); //IE以外

　　　　　　　　　　} else {

　　　　　　　　　　　　e.cancelBubble = true; //IE

　　　　　　　　　　}

　　　　　　　　}
　　　　　　　　function eventHandler(e) {

　　　　　　　　　　e = e || window.event;

　　　　　　　　　　　　// 防止默认行为

　　　　　　　　if (e.preventDefault) {

　　　　　　　　　　e.preventDefault(); //IE以外

　　　　　　　　} else {

　　　　　　　　　　e.returnValue = false; //IE

　　　　　　　}

　　　　　　}