您的位置:知识库 » Web前端

事件模块的演变

作者: snandy  来源: 博客园  发布时间: 2011-04-12 10:40  阅读: 1935 次  推荐: 0   原文链接   [收藏]  

  本篇开始将回顾下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]);
}
}
0
0
标签:JavaScript

Web前端热门文章

    Web前端最新文章

      最新新闻

        热门新闻