<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <ul> <li>a</li> <li>a</li> <li>a</li> <li>a</li> </ul> <script type="text/javascript"> var Li=document.getElementsByTagName('li');//点击排序 var len=Li.length; for(var i=0;i<len;i++){ (function (i){ Li[i].addEventListener('click',function (){ console.log(i); } ,false); }(i)) } <div style=" 100px;height:100px;background: red; "> </div>//点击换色 var div=document.getElementsByTagName('div')[0]; div.onclick=function (){ this.style.background='green'; } div.addEventListener('click' ,function (){ console.log('s'); }, false); </script> </body> </html> <!--步骤1.事件处理程序的运行环境addEvent() 2.事件对象兼容 var event=e||window.event; var target=event.target||event.srcElement; 3.封装取消冒泡的函数stopBubble(event) 4.封装阻止默认事件的函数cancelHaddler(event) //1.on+type 兼容性很好,但一个元素的同一个事件上只能用一次 2.obj.addEventListener(type,fn,false) IE9以下不兼容,可为一个事件绑定多个处理程序 3.obj.attachEvent("on"+type,fn); IE独有,一个事件同样可以绑定多个处理程序 //解除事件处理程序 ele.onclick=false/null; ele.removeEventListener(type,fn,fasle) ele.datachEvent('on'+type,fn) //事件处理程序的运行环境 封装兼容性的addEvent(elem,type,handdle);方法 function addEvent(elem,type,haddle){ if(elem.addEventListener){ elem.addEventListener(type,haddle,false); }else if(elem.attachEvent){ elem.attachEvent('on'+type,funvtion (){ handle.call(elem); }) }else{ elem['on'+type]=haddle; } } //冒泡 捕捉 先捕捉再冒泡 focus blur,change,submit,reset,select等事件不冒泡 false是冒泡 true是捕捉 //取消冒泡 1.W3C标准 event.stopPropagation();但不支持ie9以下版本 div.onclick=function (e){e.stopPropagation();} 2.IE独有 event.cancerBubble=true; div.onclick=function (e){e.cancerBubble=true;} 3.封装取消冒泡的函数 stopBubble(event) //阻止默认事件 1.默认事件-表单提交,a标签跳转,右键菜单等 2. return false;一对象属性的方式注册的事件才会生效 document.oncontextmenu=function (){ console.log('a'); return fasle; } 3.event.preventDefault();W3c标注,IE9以下不兼容 document.oncontextmenu=function (e){ console.log('a'); e.preventDefault(); } 4.event.returnValue=false;兼容IE document.oncontextmenu=function (e){ console.log('a'); e.returnValue=false; } 5.封装阻止默认事件的函数:cancelHanddler(event) function cancelHanddler(event){ if(event.preventDefault){ event.preventDefault(); }else{ event.returnValue=false; } } //事件对象 event||window.event用于IE //事件源对象 1.event.target 火狐只有这个 2.event.srcElement IE只有这个 3.这俩个Chrome都有 =function (e){ var event=e||window.event; var target=event.target||event.srcElement; console.log(target); } //兼容性写法