一、事件event对象
- Event事件对象，用来获取事件的详细信息：鼠标位置、键盘按键。在主流浏览器下默认传参给事件函数的第一个参数，ie低版本会挂载在window下的event属性里，保存了触发事件参数，这是个全局对象。
- Event对象的兼容：e = e || window.event;
obj.onclick = function(e){ e = e || window.event;}复制代码 event.type返回事件的类型。- 取消事件的传递，主流浏览器下使用
e.stopPropagation();方法，IE浏览器下使用e.cancelBubble=true属性。
二、DOM事件
- DOM 0级事件，
onclick被认为是元素的属性方法，只能绑定一个。 - DOM 2级事件，主流浏览器下使用
addEventListener(事件名称，事件函数，是否捕获)注册事件，第一个参数传事件类型（click），第二个参数传事件函数，第三个函数传是否捕获，true使用捕获，默认false使用冒泡。事件名称没有on，事件执行的顺序是正序，this指触发该事件的对象。IE浏览器下使用attacheEvent(事件名称，事件函数)注册事件，第一个参数传事件类型（onclick），第二个参数传事件函数。没有捕获，事件名称有on，this指向window。 - DOM 2级事件，主流浏览器下使用
removeEventListener(事件名称，事件函数，是否捕获)注销事件，第一个参数传事件类型（click），第二个参数传事件函数，第三个参数传是否捕获，状态要和注册事件一一对应。IE浏览器使用detachEvent(事件名称，事件函数)注销事件。第一个参数传事件类型（onclick）。
var oBox = document.getElementById('box');var captrue = true; //捕获document.addEventListener('click', function(){ console.log('document点击')},captrue);document.body.addEventListener('click', function(e){ e.stopPropagation(); //停止事件传递，下面的oBox点击事件不会触发 console.log('body点击')},captrue);oBox.addEventListener('click',function(e) { e.stopPropagation(); console.log('box点击')},captrue);复制代码 //IE浏览器下var fn = function(e){ e = e || window.event; //e.stopPropagation(); e.cancelBubble = true; console.log('点击box')};oBox.attachEvent('onclick',fn);//oBox.addEventListener("click",fn);var timer;document.onclick = function(){ timer = setTimeout(function(){ console.log('单击') },300);}//文档双击就会取消 oBox的点击事件document.ondblclick = function(){ console.log('双击'); clearTimeout(timer); oBox.detachEvent('onclick',fn);}复制代码 三、事件冒泡
- 事件冒泡指子元素触发事件的时候，会 冒泡（触发）父级的相同的事件 。
- 主流浏览器下使用
e.stopPopagation();，IE浏览器下使用e.cancelBubble=true;
四、兼容事件注册
evenetBind(box,'click',function(event){ console.log(event); eventUnbind(this,'click',true);},true);/** 绑定事件* ele 元素节点* event 事件类型* hadler 处理事件函数* capture 是否捕获*/function evenetBind(ele,eventType,handler,capture) { //用包装函数做处理 ele['evet'+eventType] = handler; //先判断是否为主流浏览器 if(ele.addEventListener){ ele.addEventListener(eventType,ele['evet'+eventType],capture); }else if(ele.attachEvent){ //ie需要做处理 ele['evet'+eventType] = function(){ //处理低版本ie 的this指向问题 handler.call(ele,window.event); }; ele.attachEvent('on'+eventType,ele['evet'+eventType]); }else{ ele['on'+eventType] = handler; }}//注销事件function eventUnbind(ele,event,capture){ //如果在就是主流浏览器 if(ele.removeEventListener){ ele.removeEventListener(event,ele['evet'+event],capture); }else if(ele.detachEvent){ ele.detachEvent('on'+event,ele['evet'+event]); }else{ ele['on'+event] = null; }}复制代码