$.on()方法和addEventListener改变this指向
程序员文章站
2024-01-26 23:09:04
# jQuery $.on()方法和addEventListener改变this指向 ......
jquery $.on()方法和addeventlistener改变this指向
标签(空格分隔): jquery javascript
jquery
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();
下一篇: python 2.
推荐阅读
-
$.on()方法和addEventListener改变this指向
-
JS addEventListener()和attachEvent()方法实现注册事件
-
C#实现改变DataGrid某一行和单元格颜色的方法
-
C#实现改变DataGrid某一行和单元格颜色的方法
-
动态改变ASP.net页面标题和动态指定页面样式表的方法
-
微信小程序实现动态改变view标签宽度和高度的方法【附demo源码下载】
-
前端js中this指向及改变this指向的方法
-
对matplotlib改变colorbar位置和方向的方法详解
-
javascript--- 改变this指向的方法 (赋值、call和apply )
-
关于JS中this指向和ES5中常用的方法