事件模块的演变(1)

本篇开始将回顾下Javascript的事件机制。同时会从一个最小的函数开始写到最后一个具有完整功能的,强大的事件模块。为叙述方便将响应函数/回调函数/事件Listener/事件handler都称为事件handler。


先看看页面中添加事件的几种方式


1,直接将JS代码写在HTML上

<div onclick="alert(4);">Div1 Element</div>

HTML Element元素自身就拥有了很多onXXX属性,只需将JS代码赋值给其就可以了。赋值给onXXX的字符串将作为响应函数的函数体(FunctionBody)。大概这是上世纪90年代的写法,那时候直接把JS代码写在网页中很普遍,也许那时候的JS并不太重要,只是用来做做验证或一些花哨的效果而已。


2,定义一个函数,赋值给html元素的onXXX属性

<script type="text/javascript">
     function clk(){}
</script>
<div onclick="clk()">Div2 Element</div>

先定义函数clk,然后赋值给onclick属性,这种方式也应该属于上世纪90年代的流行写法。比第一种方式好的是它把业务逻辑代码都封装在一个函数里了,使HTML代码与JS代码稍微有点儿分离,不至于第一种那么紧密耦合。


3,使用element.onXXX方式

<div id="d3">Div3 Element</div>
<script type="text/javascript">	
	var d3 = document.getElementById('d3');
	d3.onclick = function(){	}
</script>

这种方式也是早期的写法,但好处是可以将JS与HTML完全分离,前提是需要给HTML元素提供一个额外的id属性(或其它能获取该元素对象的方式)。


4,使用addEventListener或attachEvent

<div id="d4">Div4 Element</div>
<script type="text/javascript">
var d4 = document.getElementById('d4');
function clk(){alert(4)}
if(d4.addEventListener){
d4.addEventListener('click',clk,false);	
}
if(d4.attachEvent){	
d4.attachEvent('onclick',clk);
}
</script>

这是目前推荐的方式,较前两种方式功能更为强大,可以为元素添加多个事件handler,支持事件冒泡或捕获,前三种方式默认都是冒泡。IE6/7/8仍然没有遵循标准而使用了自己专有的attachEvent,且不支持事件捕获。

好,把方式4简单的封装下,  兼容标准浏览器及IE浏览器。注意attachEvent的第一个参数需要加上个"on",addEventListener第三个参数为false表示事件冒泡,attachEvent没有第三个参数,默认就是冒泡,没有捕获。

/**
 * 
 * @param {Object} el HTML Element
 * @param {Object} type 事件类型
 * @param {Object} fn 事件handler
 */
function addEvent(el, type, fn){
	if(el.addEventListener){
		el.addEventListener(type, fn, false);
	}else{
		el.attachEvent('on' + type, fn);
	}
}

好,用这个工具函数添加一个给document添加一个点击事件

function handler(){
	alert(this);
	alert(arguments[0]);
}
addEvent(document, 'click', handler);

在Firefox等标准浏览器中,点击页面后将弹出 “[object HTMLDocument]”,及handler中的this就是document自身。但在IE6/7/8中this却是window对象。这让人不爽,修改下与标准浏览器统一。

function addEvent(el, type, fn){
	if(el.addEventListener){
		el.addEventListener(type, fn, false);
	}else{	
		el['e' + fn] = function(){
			fn.call(el, window.event);
		}
		el.attachEvent('on'+type, el['e'+fn]);
	}
}

posted on 2011-04-08 16:13  snandy  阅读(...)  评论(...编辑  收藏

统计