JS学习笔记-事件绑定

一、传统事件模型

 

    传统事件模型中存在局限性。

    内联模型以HTML标签属性的形式使用，与HTML混写。这样的方式无疑造成了改动以及扩展的问题，已经非常少使用了。

    脚本模型是将事件处理函数写到js文件里，从页面获取元素进行相应事件函数的绑定以触发运行。但也存在不足之处：

    1.一个事件绑定多个事件监听函数。后者将覆盖前者。

    2.须要限制反复绑定的情况

    3.标准化event对象

   

二、现代事件绑定

 

    DOM2级事件定义了两个方法用于加入、删除事件：addEventListener()、removeEventListener().他们分别接收三个參数：事件名、函数、冒泡或捕获的布尔值（true表示捕获，false表示冒泡）。

    与之相应，IE提供了类似的两个方法attachEvent()和 detachEvent()，但IE的两个方法存在另外的问题：无法传递this对象（IE中的this指向window）能够使用call方法进行对象冒充:

    function addEvent(obj,type,fn){
        if(typeof obj.addEventListener != 'undefined'){
            obj.addEventListener(type,fn,false);
        }else if(obj.attachEvent != 'undefined'){
            obj.attachEvent('on' + type,function(){
                fn.call(obj,window.event);    
            });
        }
    };

    但因为加入时运行的是匿名函数。因此加入后无法进行删除；另外IE提供方法还会有无法顺序运行绑定事件、存在内存泄漏的问题。

    为了解决这一系列的问题。就有必要对方法进行进一步的封装，对其它浏览器使用DOM2级标准进行，对于IE。採用基于传统模式的加入、删除，思路为：

         1.加入是使用JS的散列表存储对象事件，为每个对象事件分配一个ID值。按加入的调用顺序，先推断是否存在同样的处理函数。不存在的话就依次将事件绑定函数加入到散列表中，这样攻克了无法顺序运行以及反复加入的问题

    2.删除时进行遍历函数匹配的推断，存在则删除

 

总结：

    之前对JS的事件绑定并没有太深的认识，甚至停留在传统事件绑定模型上。对程序实现上还是认识太浅，这次学习封装库这部分内容时，才学习到非常多JS上面向对象的应用。虽说类似于JQuery的这样js库已经实现了非常好的数据绑定机制的封装效果，但仅仅知其然，不知其所以然还有会有种蒙在鼓里的感觉，亲自去分析一下详细的实现。会有一种豁然开朗的感觉。也体会到，做好一个兼容性、通用性强的程序更要考虑非常多内容。解决非常多问题。也正在在这些问题中逐渐清楚非常多的。