zoukankan      html  css  js  c++  java
  • addEventListener传入参数为对象,handleEvent自动调用

    addEventListener绑定方式的问题:
    document.body.addEventListener( 'click',
        function() {
            alert('body clicked');
        },false);

    以及第二个参数为object的优势:
    document.body.addEventListener('click',
        {
            handleEvent: function() {
                alert('body clicked');
            }
        },
        false);

    原文废话太多,我只翻译了主要部分。
    具体细节,请自行查看
    正文
    先简短的看一下各个浏览器提供的DOM元素事件绑定接口:
    //IE使用element.attachEvent:
    document.body.attachEvent(
        'onclick',
        function() {
            alert('body clicked');
        });
    //其他浏览器使用element.addEventListener:
    document.body.addEventListener(
        'click',
        function() {
            alert('body clicked');
        },
        false);

    一般来说上面的第二个参数都是传入一个函数句柄,但是大多数javascript程序员并不知道第二个参数可以传入一对象obj【DOM2接口http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-EventListener】,如此一来,当event执行的时候,会隐式的调用obj的handleEvent方法。
    document.body.addEventListener(
        'click',
        {
            handleEvent: function() {
                alert('body clicked');
            }
        },
        false);

    这么做的一个重要方面是obj的handleEvent只有在执行的时候才需要去访问【有点类似延迟绑定的效果】。同时,如果在两次event事件 间隔中,handleEvent发生了改变,那么产生的效果会跟着改变。这样一个好处就是不用remove事件而直接切换事件。
    看下面的例子:
    document.body.addEventListener('click', obj, false);
    // click body will error in some browsers because
    // 现在还没有事件
    obj.handleEvent = function() {alert('alpha');};

    // 单击弹出alpha
    obj.handleEvent = function() {alert('beta');};

    // 单击弹出"beta"
    document.body.removeEventListener('click', obj, false);
    //单击什么都没有了

    【注意,这个用法存在一定的兼容性问题。不过我现在只面向手机浏览器,所以请自行测试】

    采用obj的绑定形式:
        function LIB_addEventListener(el,type,obj){
            el.addEventListener(type,obj,false);
        }
        function ViewObject() {
            this.data = 'alpha';
            LIB_addEventListener(document.body, 'click', this);
            LIB_addEventListener(document.body, 'mousemove', this);
        }
        ViewObject.prototype.handleEvent = function(e) {
                if('click' == e.type){
                    console.log(this.data)
                }else{
                    console.log('not click')
                }
            };

        var test = new ViewObject();

  • 相关阅读:
    20145222黄亚奇《网络对抗》MSF基础应用
    20145222黄亚奇《网络对抗》 逆向及BOF进阶实践学习总结
    20145222《网络对抗》 免杀原理与实践
    20145222黄亚奇《网络对抗》- shellcode注入&Return-to-libc攻击深入
    网络攻防20145222黄亚奇 《网络攻防》免杀原理与实践
    20145222 黄亚奇 《网络攻防》 后门原理与实践
    第十六周课程总结
    20145104张家明实验五
    20145104张家明 《Java程序设计》第10周学习总结
    20145104张家明 《Java程序设计》第四次实验设计
  • 原文地址:https://www.cnblogs.com/gaoxue/p/2631600.html
Copyright © 2011-2022 走看看