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
　　　　　　　}
　　　　　　}