事件模块的演变

2019-9-2 00:00| 发布者: adminiot| 查看: 229| 评论: 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]);
    }
}