事件基础 //侦听事件（侦听的类型,事件回调函数） 侦听类型必须字符串 document.addEventListener(“abc”,abcHandler); //创建事件 var evt=new Event(“abc”); //把事件向document抛发 document.dispatchEvent(evt); //抛发的对象必须和侦听对象是同一个对象 //所有继承了EventTarget的对象都可以进行事件侦听和抛发
function abcHandler(e){ // 当侦听收到事件后会执行回调函数，函数中有且仅有一个参数 // 这个参数就是创建的事件对象 console.log(e); }//先侦听后抛发
解耦
var obj={ a:1, init:function(){ document.addEventListener("obj1Event",this.b); }, b:function(e){ console.log(e.c); var evt=new Event("objEvent"); evt.a=1; document.dispatchEvent(evt); } } var obj1={ c:2, init:function(){ document.addEventListener("objEvent",this.d); var evt=new Event("obj1Event"); evt.c=2; document.dispatchEvent(evt); }, d:function(e){ console.log(e.a); } } obj.init(); obj1.init();事件原理 事件侦听对象.addEventListener(事件类型,事件触发回调函数,是否捕获时触发事件=false) true为捕获阶段触发 事件侦听对象.addEventListener(事件类型,事件触发回调函数,{once:true})//once是true表示该事件仅执行一次，就被销毁
e.type事件侦听的类型 e.bubbles事件是否冒泡 e.stopPropagation();阻止冒泡
默认状态下事件触发是冒泡阶段
捕获 目标 冒泡 外 达到目标 内 | | 内 外默认创建的事件不会自动冒泡 创建事件的第一个参数是事件的type 第二个参数是事件初始化对象，对象中属性bublles是否冒泡，true冒泡，默认是false var evt=new Event(“abc”,{bubbles:true}); div1.dispatchEvent(evt);
事件委托：把子元素的事件委托给父元素侦听，事件委托 事件委托案例：列表点击
<ul> <li>北京 <ul class="ul1"> <li>昌平 <ul class="ul1"> <li>老牛湾</li> <li>沙河</li> <li>回龙观</li> <li>霍营</li> </ul> </li> <li>海淀</li> <li>朝阳</li> <li>东城</li> <li>西城</li> </ul> </li> <li>陕西 <ul class="ul1"> <li>西安</li> <li>咸阳 <ul class="ul1"> <li>淳化</li> <li>三原</li> <li>旬邑</li> <li>泾阳</li> </ul> </li> <li>宝鸡</li> <li>延安</li> </ul> </li> <li>河北</li> <li>河南</li> <li>山西</li> </ul> var ul=document.querySelector("ul"); ul.addEventListener("click",clickHandler); // 把子元素的事件委托给父元素侦听，事件委托 function clickHandler(e){ // console.log(this); this就是事件侦听的对象 // console.log(e.target,e.srcElement);//点击事件的目标元素,这两个是相同的 // console.log(e.currentTarget===this)//e.currentTarget就是this也就是事件侦听对象 // 这里不需要取消冒泡 if(e.target.constructor!==HTMLLIElement)return; // if(e.target.nodeName!=="LI") return; e.target.bool=!e.target.bool; if(e.target.firstElementChild && e.target.firstElementChild.constructor===HTMLUListElement){ if(e.target.bool){ e.target.firstElementChild.className="ul1 ul2"; }else{ e.target.firstElementChild.className="ul1"; } }事件的区别和兼容 onclick事件 1、使用onclick时具有覆盖性 2、行内的onclick如果没有后续的onclick则会执行，否则会被覆盖 3、行内的onclick(需要在函数名后加括号)执行的函数不是回调函数，而是直接使用函数执行 4、如果是IE6以下，没有e这个参数，所以无法获取这个事件对象5、行内事件中，因为不传递e这个参数，因此也无法获取事件对象6、当无法获取e对象时可以通过e=e||window.event获取，（事件兼容方式）用于onclick写法
on事件和addEvevtListener区别： 1、on事件支持任何浏览器兼容，addEventListener只支持IE8及以上浏览器 2、on事件，实际上是针对DOM对象有一个固定的属性。例如onclick，一般会赋值给这个属性一个匿名函数，当再次赋值时会覆盖上次的函数。addEventListener事件会使用回调函数添加，可以设置多个事件对象函数，不会覆盖 3、on事件多用匿名函数，开发时很容易产生回调地狱，但是使用addEventListener多使用命名函数有效控制回调地狱的产生 4、on事件不支持捕获阶段事件，addEventListener支持捕获阶段事件，还支持once冒泡（IE8以上阻止冒泡e.stopPropagation；e.concelBubble取消冒泡兼容写法） 5、删除事件方式不同：addEventListener使用removeEventListener，on事件用div.οnclick=null删除事件 6、因为on事件都是系统自动为DOM对象添加的事件类型，因此固定，addEventListener支持自定义事件，可以自己抛发事件接收
回调地狱案例： 实现按顺序点击才能打印： on产生回调地狱
var div0=document.querySelector(".div0"); var div1=document.querySelector(".div1"); var div2=document.querySelector(".div2"); var div3=document.querySelector(".div3"); var div4=document.querySelector(".div4"); div1.onclick=function(){ div2.onclick=function(){ div3.onclick=function(){ div4.onclick=function(){ console.log("aaa"); } } } }addEventListener方法控制：
div1.addEventListener("click",clickHandler); function clickHandler(e){ switch(this){ case div1: div2.addEventListener("click",clickHandler); break; case div2: div3.addEventListener("click",clickHandler); break; case div3: div4.addEventListener("click",clickHandler); break; case div4: console.log("aaaa"); } }attachEvent和addEvevtListener： element.attachEvent(‘on开头的事件名’,事件函数名)添加事件，只支持IE11以下浏览器，其他浏览器不支持，不支持捕获冒泡 element.detachEvent(‘on开头的事件名’,事件函数名)移除事件，不支持事件抛发
attachEvent和addEvevtListener兼容写法
function addEvent(elem, type, calLback, bool){ if(bool==undefined) bool=false; if(elem. addEventListener){ elem. addEventListener(type, callback, bool); }elset elem. attachEvent("on"+type, calLback); }