事件基础(1)

综上，一个事件的传递过程包含三个阶段，分别称为：

捕获阶段，目标阶段，冒泡阶段

首先我们先将两种事件绑定的原生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);

});

}

}

})();