关于网页事件绑定兼容的一种灵活的绑定方案

原创 2016年05月30日 15:30:57

关于绑定事件,官方有官方的标准,IE有IE的自己标准,起初最简单直接的绑定方式就是取得DOM元素然后用元素.on事件类型来绑定,但问题是这个绑定方式不能在同一个事件中绑定多个事件处理方法以及当中的事件对象在IE和其他浏览器都不同,但是这个方法的一个好处就是任何浏览器都支持该绑定处理方式,那就利用该优势来灵活的创建一个关于元素绑定事件,事件绑定多个方法的解决方案,值得研究和学习.................


 <span style="font-size:18px;"><script>
    function addEvent(elementment, type, handler) {
    
        // 为每个事件处理函数赋予一个独立的ID
        if(!handler.$$guid) handler.$$guid = addEvent.guid++;
    
        // 为元素建立一个事件类型的散列表
        if(!elementment.events) elementment.events = {};
    
        // 为每对元素/事件建立一个事件处理函数的散列表
        var handlers = elementment.events[type];
    
        if(!handlers) {
            handlers = elementment.events[type] = {};
            // 存储已有的事件处理函数(如果已存在一个)
            if(elementment["on" + type]) {
                handlers[0] = elementment["on" + type];
            }
        }
    
        // 在散列表中存储该事件函数
        handlers[handler.$$guid] = handler;
    
        // 赋予一个全局事件处理函数来出来所有工作
        elementment["on" + type] = handleEvent;
    }
    
    // 创建独立ID的计数器
    addEvent.guid = 1;
    
    function removeEvent(elementment, type, handler) {
        // 从散列表中删除事件处理函数
        if(elementment.events && elementment.events[type]) {
            delete elementment.events[type][handler.$$guid];
        }
    }
    
    function handleEvent(event) {
        var returnValue = true;
    
        // 获取事件对象(IE使用全局的事件对象)
        event = event || fixEvent(window.event);
    
        // 获取事件处理函数散列表的引用
        var handlers = this.events[event.type];
    
        // 依次执行每个事件处理函数
        for(var i in handlers) {
            this.$$handerEvent = handlers[i];
            if(this.$$handerEvent(event) === false) {
                returnValue = false;
            }
        }
        return returnValue;
    }
    
    // 增加一些IE事件对象缺乏的方法
    function fixEvent(event) {
        event.preventDefault = fixEvent.preventDefault;
        event.stopPropagation = fixEvent.stopPropagation;
        return event;
    }
    
    fixEvent.preventDefault = function() {
        this.returnValue = false;
    }
    
    fixEvent.stopPropagation = function() {
        this.cancelBubble = true;
    }
var b = document.getElementById('a');

//addEvent(b,'click',function(){alert(this.id)});
//addEvent(b,'click',function(){alert(this.innerText)});
  </script></span>

本人已经试过了,该解决方案能方便的绑定元素的事件处理,您值得借鉴和拥有.......................

版权声明: 举报

相关文章推荐

EasyUI datagrid 明细表格中编辑框 事件绑定 及灵活计算 可根据此思路 扩展其他

/******************************************************** 主要用于 明细表格 字段间的计算 Start ******************...

怎么解决事件绑定的兼容性问题

怎么解决事件绑定的兼容性问题

我是如何成为一名python大咖的?

人生苦短,都说必须python,那么我分享下我是如何从小白成为Python资深开发者的吧。2014年我大学刚毕业..

js实现兼容性事件绑定函数

事件分为dom0级事件和dom2级事件,html事件处理。 1.html事件处理上面这种形式就称为html事件处理,将时间耦合在html中不推荐使用。不符合前端规范。 2.dom0级事件处理btn...

了解JQuery的事件绑定特性和事件命名空间机制,编写更好、更灵活的事件处理代码

转载自:http://blog.csdn.net/aitangyong/article/details/43157899 JQuery中的bind()和unbind(),提供了事件的绑定...

在网页中绑定回车键事件

如何在网页中绑定回车键事件通俗的说,也就是绑定当用户按下回车键要执行的事件。解决方法比较简单,很多人都知道,本不应献丑的,但由于前几天的开发中有这个需求,做出来后觉得还是挺实用的,故还是记录下来。在介...

jquery动态添加元素无法触发绑定的事件的解决方案。

最近遇到一个问题,即当用jquery动态添加元素后,发现给动态添加的元素却无法触发事件。后来在网上查阅了一些资料,发现原来要这样处理:  先上我出错的代码:    <...

【JQuery】一个DOM元素,多次绑定同一事件的解决方案

Query的bind的函数在实际应用中用的不是特别多,只是他可以绑定一个事件,但不会即时触发,也可以通过unbind来解除绑定。在没有看到这篇文章之前,我一直不知道原来bind也可以有命名空间。事实上...

【解决方案】闭包函数在for循环中的使用案例——for循环绑定监听事件索引值总是最后一个

请看以下两段代码,思考一下运行的结果是否一致呢? 代码一: for (var i = 0; i < as.length; i++) { (function () { var j =...

jquery绑定事件优化网页性能(使用on进行事件委托)

自身认知限制,在之前做项目使用jquery框架的时候会直接使用$(obj).click(function(){})(click可以换成其他的事件)为目标对象绑定事件,并没有觉得有什么不妥。今天看了一篇...
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)