综上,一个事件的传递过程包含三个阶段,分别称为:
捕获阶段,目标阶段,冒泡阶段
首先我们先将两种事件绑定的原生js表达式写出来
attachEvent(); //IE(7,8只支持这个函数);
DOM.attachEvent('onclick',function(e){});
IE低版本(IE8以前版本)只支持 目标阶段,冒泡阶段,所以只有两个参数
addEventListener(); //w3c IE9+(包括IE9)
DOM.addEVentListener('click',function(){},false);
//true表示该元素在事件的“捕获阶段”(由外往内传递时)响应事件;
//false表示该元素在事件的“冒泡阶段”(由内向外传递时)响应事件。
addEventListener细说
DOM.addEventListener('click',funciton(e){
//这两个参数IE8不支持
e.target; //触发事件的元素
e.currentTarget;//事件绑定的元素
this代表绑定事件的元素,也就是上面的DOM
},false);
attachEvent细说
DOM.attachEvent('onclick',function(){
var e = event;(只有IE下event是挂载到window中的)
e.srcELement //作用和上面的target一样
this指向的是window;
})
兼容性添加(让ie和w3c添加事件所有细节全面一致,包括this,e.target,e.currentTarget):
var addEvent = (function () {
if (document.addEventListener) {
return function (el, type, fn) {
el.addEventListener(type, fn, false);
};
}
else {
return function (el, type, fn) {
el.attachEvent('on' + type, function () {
var e = window.event; //对IE8进行全面兼容
e.target = window.event.srcElement;
e.currentTarget = el;
return fn.call(el, e);
});
}
}
})();