zoukankan      html  css  js  c++  java
  • addEventListener 传入带 handleEvent 的对象

    element.addEventListener(event, callback [,capture] );

    上面是一个典型JavaScript绑定事件方法,很简单。可是今天发现,原来第二个参数除了可以传入函数外,还可以传入对象。也就是可以写成:

    element.addEventListener(event, object [,capture] );

    事件会自动在传入对象中寻找handleEvent方法,也就是 object.handleEvent。这样有什么好处呢?看例子:

    复制代码
    obj = {
    init: function(){
    element.addEventListener('event', this, 0);
    },
     
    handleEvent: function(event){
    this.method();
    },

    method: function (){
    alert(this.Name);
    /*
    //////////////
    */
    },

    Name: 'obj has an name!',
    }

    obj.init();
    复制代码

    这样,在 element 触发event事件后,调用的是handleEvent 方法,注意这里面的 this 是指向对象本身 (即 this ==obj //true),这个我们调用对象里面的方法提供极大的便利!而普通的函数,this传入函数里面的this 是指向事件的,因事件类型不同而不同。

    除了上面这点外,还可以直接修改对象,而不用删除、重新监听事件:

    复制代码
    obj._handleEvent = function(){
    /*
    另外的方法
    */
    }

    obj.changeHandler = function(){
    this.tmp = this.handleEvent;
    this.handleEvent = this._handleEvent;
    this._handerEvent = this.tmp;
    this.tmp = null;
    }
    复制代码

    只要obj.changeHandler(); 就把监听调用的方法改了,很棒,是不是?

  • 相关阅读:
    移动端开发rem布局之less+媒体查询布局的原理步骤和心得
    前端实现文件下载方式总汇
    如何能提高CSS编写技巧?提高Web前端开发效率
    常用的CSS命名规则
    CSS背景background
    CSS盒子模型
    简单的树形菜单如何写?
    彻底掌握css动画【transition】
    首页白屏优化实践
    我来聊聊面向模板的前端开发
  • 原文地址:https://www.cnblogs.com/gaoxue/p/2724254.html
Copyright © 2011-2022 走看看