事件绑定2

关于现代事件绑定，W3c自带两个事件添加删除函数
addEventListener removeEventListener

window.addEventListener('load',function
()
{
alert('w3c');

},false
);

可以解决
1.多个函数添加到同一个事件类型下被覆盖的问题

window.addEventListener('load',function
()
{
alert('w3c');//最先被执行的代码
},false
);
window.addEventListener('load',function
()
{
alert('w3把');
},false
);
window.addEventListener('load',function
()
{
alert('w3c5茶');//最后被执行的代码
},false
);

冒泡执行顺序，从最上面的代码开始往下执行，并且不会覆盖，每个事件都会被执行到。
2.解决了重复添加同一个函数的判定问题

window.addEventListener('load',fun,false
);

window.addEventListener('load',fun,false
);

function fun()
{
alert('lee');
}

只会被执行一次，相同函数，重复添加，会只显示一个，其他的被屏蔽掉。

3.解决了this指针传递的问题

window.addEventListener('load',function(){
var box=document.getElementById('box');
box.addEventListener('click',function()
{
alert(this);
},false);
},false
);

在现代事件函数中，第二个参数是函数，该函数内的指针指的是它添加的对象，但是在传统事件指的是window必须手工添加指针传递。

冒泡与捕获

window.addEventListener('load',function
()
{

var box=document.getElementById('box');
box.addEventListener('click',function()
{
alert(this);
},true);

document.addEventListener('click',function()
{
alert(this);
},true);
},false
);

冒泡就是对于不同的dom对象，如果添加了同一个类型的事件，从内到外的顺序执行事件，div先执行，document后执行。捕获是从外到内的顺序执行事件。document 先执行，div后执行。
IE自带的添加删除事件方法
attachEvent detachEvent

window.attachEvent('onload',function(){
alert('le');//最后执行的代码
}};
window.attachEvent('onload',function(){
alert('la');//最先执行的代码
}}

添加多个事件函数执行顺序和其它现代方法不一样，她是从下到上执行。
只能冒泡，不能判断重复添加的事件函数，不能传递this指针，指针默认指向window

解决方案:获取点击事件指针
var that=window.event.srcElement;
ie现代事件绑定方法可以将事件作为参数传递进去,传统方法不能把事件作为函数参数传递。

window.attachEvent('onload',function(evt){
alert(evt);
}};

ie和其他浏览器添加事件移除事件捕获事件对象的兼容性解决

//添加事件兼容性解决

function addEvent(obj,type,fn)
{
if(obj.addEventListener)
obj.addEventListener(type,fn,false);
else if(obj.attachEvent)
obj.attachEvent('on'+type,fn);

}

//移除事件兼容

function removeEvent(obj,type,fn) { if(obj.removeEventListener) obj.removeEventListener(type,fn,false); else if(obj.detachEvent) obj.detachEvent('on'+type,fn); }

//获取目标事件

function getTarget(e){ if(e.target) return e.target; else if(window.event.srcElement) return e.srcElement; }