Browser-related-浏览器事件模型

constparent=document.getElementById("parent");constchild=document.getElementById("孩子");constson=document.getElementById("儿子");window.addEventListener("click",function(e){//e.target.nodeName指的是当前被点击的元素，e.currentTarget.nodeName绑定确定监听事件的元素console.log("windowcapture",e.target.nodeName,e.currentTarget.nodeName);},true);parent.addEventListener("click",function(e){//e.stopPropagation();console.log("parentcapture",e.target.nodeName,e.currentTarget.nodeName);},true);child.addEventListener("click",function(e){console.log("childcapture",e.target.nodeName,e.currentTarget.nodeName);},true);son.addEventListener("click",function(e){console.log("soncapture",e.target.nodeName,e.currentTarget.nodeName);},true);window.addEventListener("点击",function(e){console.log("窗口冒泡",e.target.nodeName,e.currentTarget.nodeName);},false);parent.addEventListener("点击",function(e){console.log("父冒泡",e.target.nodeName,e.currentTarget.nodeName);},false);child.addEventListener("click",function(e){console.log("childbubbling",e.target.nodeName,e.currentTarget.nodeName);},false);son.addEventListener("点击",function(e){console.log("儿子冒泡",e.target.nodeName,e.currentTarget.nodeName);},false);注意这里的第三个参数addEventListener第三个参数，如果为true，表示在捕获阶段执行如果为false，是为了防止冒泡阶段的事件传播。经常听到e.stopPropagation()是为了防止冒泡。其实这个方法不仅可以防止事件冒泡，还可以防止捕获阶段的传播被触发，它们将按照它们被添加的顺序执行。如果其中一个监听函数执行了event.stopImmediatePropagation()方法，则不会执行当前元素的其余监听函数。场景设计：首先，有一个包含很多元素的页面。divpbutton的每个元素都有自己的点击事件，是不一样的；现在有一个新的要求。当用户进入这个页面时，会有一个状态banned，window.banned.true：当前用户被banned，点击任意元素，已有的点击不会执行，但会提示被bannedfalse：不会采取任何行动。window.addEventListener("click",function(e){if(window.banned){e.stopPropagation();alert('你被禁止');return;}//...},true);block默认行为e.preventDefault()e.preventDefault()可以阻止事件的默认行为发生。默认行为是指：点击a标签跳转到其他页面，拖放图片到浏览器会自动打开，点击表单提交按钮会提交表单等等，因为有时候我们不会我们不希望这些事情发生，所以我们需要防止默认行为CompatibilityattachEvent-兼容：IE7，IE8；不支持第三个参数控制在哪个阶段发生，默认在冒泡阶段绑定addEventListener-兼容：firefox,chrome,IE,safari,opera；//兼容写法classBomEvent{constructor(element){this.element=element;}addEvent(type,handler){if(this.element.addEventListener){this.element.addEventListener(type,handler,false);//IE不支持捕获}elseif(this.element.attachEvent){this.element.attachEvent(`on${type}`,handler)}else{this.element[`on${type}`]=处理程序；}}removeEvent(){if(this.element.removeEventListener){this.element.removeEventListener(类型,h安德勒，假）；}elseif(this.element.detachEvent){this.element.detachEvent(`on${type}`,handler)}else{this.element[`on${type}`]=null;}}}//防止事件传播函数StopPropagation(ev){if(ev.stopPropagation){ev.stopPropagation();//W3C}else{ev.cancelBubble=true;//IE}}//阻止默认行为functionpreventDefault(ev){if(ev.preventDefault){ev.preventDefault()}else{ev.returnValue=false;}}绑定事件的使用，封装一个多浏览器兼容的绑定事件函数是比较常见的面试题可能是ul+li，点击每个lialert对应的索引，写在这里给大家看看如何首先将每个li绑定到一个事件，然后编写一个事件委托

1

2

3

4

//constliList=document.getElementsByTagName("li");//for(leti=0;i