JavaScript学习13：事件绑定

标签：javascript   事件绑定   

        事件绑定分为两种：一种是传统事件绑定（内联模型、脚本模型），一种是现代事件绑定（DOM2级模型）。现代事件绑定在传统绑定的基础上为我们提供了更强大更方便的功能。

        传统事件绑定的问题

        因为内联模型很少用，这里不做讨论。先来看一下脚本模型，将一个函数赋值给一个事件处理函数。   

<span style="font-size:18px;">var box=document.getElementById('box');
box.onclick=function(){
	alert('Lian');
};
box.onclick=function(){
	alert('Jiang');
};</span>

        如此绑定事件有很多的问题，具体如下：

        1一个事件处理函数触发两次事件，后面的一个会把    前一个完全覆盖掉

<span style="font-size:18px;">box.onclick=toBlue;
function toRed(){
	this.className='red';
	this.onclick=toBlue;
}
function toBlue(){
	this.className='blue';
	this.onclick=toRed;
}</span>

        2事件切换器，在进行扩展的时候，会出现三个问题：覆盖，可读性降低、this传递问题。

        编写自定义事件处理函数，还有一个问题，那就是两个相同函数名的函数误注册了多次，那么应该把多余的屏蔽掉。这样自定义的话，就比较麻烦了。

        W3C事件处理函数

      DOM2级事件定义了两个方法，用于添加事件和删除事件处理程序的操作：addEventListener()和removeEventListener()。所有DOM节点中都包含这两个方法，并且它们都接受3个参数：事件名、函数、冒泡或捕获的布尔值（true表示捕获，false表示冒泡）。      

<span style="font-size:18px;">window.addEventListener('load',init,false);
window.addEventListener('load',init,false);
function init(){
	alert('Lian');
}</span>

        相比较我们自定义的好处有：1不需要自定义了 2 可以屏蔽掉相同的函数 3 可以设置冒泡和捕获。

        IE事件处理函数

        IE实现了与DOM中类似的两个方法：attachEvent和detachEvent。这两个方法接受相同的参数：事件名和函数。

        IE中事件处理函数有很多区别，相对于W3C的DOM而言：1.IE不支持捕获，只支持冒泡 2.IE添加事件不能屏蔽重复的函数；3.IE中的this指向的是window而不是DOM对象；4.在传统事件上，IE是无法接受到event对象的，但是使用了attchEvent之后就可以。

        鉴于IE中事件绑定函数有诸多问题，因此在实践中不去使用。

        事件对象的其他补充

        在W3C中提供了一个属性：relatedTarget，这个属性可以在mouseover和mouseout事件中获取从哪里移入和从哪里移出的DOM对象。

        IE提供了两组分别用于 移入移出的属性：fromElement和toElement，分别对应mouseover和mouseout。       

<span style="font-size:18px;">function getTarget(evt){
	var e=evt||window.event;
	if(e.srcElement){
		if(e.type=='mouseover'){
			return e.fromElement;
		} else if(e.type=='mouseout'){
			return e.toElement;
		}
	}else if(e.relatedTarget){
		return e.relatedTarget;
	}
}</span>

JavaScript学习13：事件绑定

标签：javascript   事件绑定   

原文地址：http://blog.csdn.net/lianjiangwei/article/details/46714791