注册事件的方式
1. ele.on事件类型 = function(){}
2. addEventListener(事件类型,事件处理函数,useCapture) 第三个参数默认是false,冒泡阶段执行
3. attachEvent(事件类型,事件处理函数)
第一种方式只能有一个事件处理函数,而第二、三种可以定义多个事件处理函数
addEventListener IE9以下版本以及OPERA7以下版本不支持
attachEvent 只有IE6-10版本里支持,IE11及其他浏览器不支持
兼容性写法
下面这种方式每次注册事件都会进来判断,复用性太差
function registeEvent(target, type, handler){ if(target.addEventListener){ target.addEventListener(type,handler) }else if(target.attachEvent){ target.attachEvent("on"+type,handler) }else{ target["on"+type] = handler; } }
优化后的兼容性写法
function createEventRegister(){ if(window.addEventListener){ return function(target, type, handler){ // this ---> window target.addEventListener(type,handler) } }else if(window.attachEvent){ return function(target, type, handler) { target.attachEvent("on" + type, function(){ handler.call(target, window.event); }) } }else{ return function(target, type, handler) { target["on" + type] = handler; } } }
注意事项:
1、注册的事件的处理函数中的,this指向不一致
使用addEventListener的方式注册的点击事件的回调函数中的this 指向target
但是使用attachEvent的方式注册点击事件的回调函数中的this 指向window
div.addEventListener("click",function(e){
this --->target
e.screenX;
})
div.attachEvent("onclick".function(){
this--->window
window.event.screenX
})
解决方法: handler.call(target, window.event);
2.3种注册事件的方式中,回调函数内获取事件对象的方式也是不一致的
要让他们统一,在第二种的事件注册方式(attachEvent)中,手动给handler传递window.event
3.事件冒泡与捕获。比如当子元素和父元素都注册了click事件,如果为事件捕获,当点击子元素时,父元素的click时间处理函数先执行,然后执行子元素的click时间,如果为事件冒泡,则执行顺序相反