$.on()方法和addEventListener改变this指向

jQuery $.on()方法和addEventListener改变this指向

标签（空格分隔）： jQuery JavaScript

---

jQuery $.on()

jq的绑定事件使用$([selector]).on([types], [selector], [data], [fn], [one])方法；解绑事件使用off，但是解绑具体事件时候handler只能是具名函数。

在一个对象中，当我们想要在具名函数中用this访问当前对象的属性，可以从[data]参数传入，然后在具名函数中通过e.data来访问：

var obj = {
    options: { a: 1 },
    init: function() {
        $(window).off('click', this._event);
        $(window).on('click', { self: this }, this._event);
    },
    _event: function(e) {
        var self = e.data.self;
        console.log(self.options);
    }
};

addEventListener

详细内容参见MDN。

addEventListener兼容性

1. 通过bind(this)方法

var Foo = function (ele) {
    this.name = 'This is foo';
    this.onclickA = function (e) {
        console.log(this.name); // undefined
    };
    this.onclickB = function (e) {
        console.log(this.name); // This is foo
    };

    ele.addEventListener('click', this.onclickA, false);
    ele.addEventListener('click', this.onclickB.bind(this), false);
};

new Foo(document.body);

2. 通过定制的函数handleEvent去捕获任意类型

var Bar = function (ele) {
    this.ele = ele;
    this.name = 'This is bar';
    this.handleEvent = function (e) {
        console.log(this.name);
        switch (e.type) {
            case 'click':
                console.log('Trigger click...');
                break;
            case 'dblclick':
                console.log('Trigger dblclick...');
                break;
        }
    };

    ele.addEventListener('click', this, false);
    ele.addEventListener('dblclick', this, false);
};
Bar.prototype.remove = function () {
    // 你也可以移除这些监听事件
    this.ele.removeEventListener('click', this, false);
    this.ele.removeEventListener('dblclick', this, false);
};

var bar = new Bar(document.body);
bar.remove();

3. 给EventListener传递一个函数，调用想要访问对应作用域对象的方法

但是这样做绑定的事件成为了匿名函数，是不能取消绑定的。

class SomeClass {
    constructor() {
        this.name = 'This is a class';
    }

    register() {
        const that = this;
        window.addEventListener('keydown', function (ev) { return that.foo(ev); });
    }

    foo(e) {
        console.log(this.name);
        switch (e.keyCode) {
            case 65:
                console.log('a');
                break;
            case 13:
                console.log('enter');
                break;
        }
    }
}

const obj = new SomeClass();
obj.register();

随机推荐

1. JS实现OO机制

   一.简单原型机制介绍 继承是OO语言的标配,基本所有的语言都有继承的功能,使用继承方便对象的一些属性和方法的共享,Javascript也从其他OO语言上借鉴了这种思想,当一个函数通过"new ...

2. ambari-server启动出现Caused by: java.lang.RuntimeException:java.lang.ClassNotFoundEception:com.mysql.jdbc.Driver问题解决办法（图文详解）

   不多说,直接上干货! 问题详解 启动ambari-server出现 Caused by: java.lang.RuntimeException:java.lang.ClassNotFoundEcept ...

3. oracle中斜杠(/)的含义

   斜杠就是让服务器执行前面所写的sql脚本.如果是普通的select语句,一个分号,就可以执行了.但是如果是存储过程,那么遇到分号,就不能马上执行了.这个时候,就需要通过斜杠(/)来执行. 1 2 3 ...

4. MySQL按照月进行统计

   MySQL按照月进行统计 今天需要后台提供一个按月统计的API.所以查了一下SQL语句的实现方法. 按月统计SQL select date_format(createtime, '%Y-%m') as ...

5. step7: 输出到json文件

   调用scrapy自身的Exporter输出 编辑pipeline文件 import json from scrapy.exporters import JsonItemExporter #引入Expo ...

6. ElasticSearch深入搜索

   一. 结构化搜索 结构化搜索(Structured search) 是指有关探询那些具有内在结构数据的过程.比如日期.时间和数字都是结构化的:它们有精确的格式,我们可以对这些格式进行逻辑操作.比较常见 ...

7. ASP.NET能知道的东西

   ASP.NET能知道的东西 获取服务器电脑名: Page.Server.ManchineName 获取用户信息: Page.User 获取客户端电脑名:Page.Request.UserHostNam ...

8. mysql的线程处于System lock状态下

   The thread has called mysql_lock_tables() and the thread state has not been updated since. This is a ...

9. HttpContext在多线程异步调用中的使用方案

   1.在线程调用中,有时候会碰到操作文件之类的功能.对于开发人员来说,他们并不知道网站会被部署在服务器的那个角落里面,因此根本无法确定真实的物理路径(当然可以使用配置文件来配置物理路径),他们唯一知道的 ...

10. SQL语句表处理

    1.create table:创建表,语法: create table 表格名 ( 列名 数据类型, 列名 数据类型, ...... ) 2.constrain:约束,关键词 NOT NULL. UN ...