在JS事件封装时,addEventListener()方法的this问题

最近在写js的类库,模仿的是jquery的编程风格,当封装到事件监听的时候发现遇到了一个问题,代码是这样的:

在JS事件封装时,addEventListener()方法的this问题

上面是封装的一个事件委托的代码,我以为上面的封装跟普通的事件监听一样简单,结果我在调用时发现报错:

在JS事件封装时,addEventListener()方法的this问题

在JS事件封装时,addEventListener()方法的this问题

在JS事件封装时,addEventListener()方法的this问题

为什么会报这样的错,原来是不同于单一的onclick之类的事件,这边的this指向的是调用addEventListenner的的对象;

为了简化问题,我们将其拿到全局范围中单独去测试:

在JS事件封装时,addEventListener()方法的this问题

在JS事件封装时,addEventListener()方法的this问题

发现这里的this指向的就是div标签,这就是为什么在原型中调用$(this)会出错

因为是执行的上下文不同,所以我们这边只要想办法改变this的指向就行了,我们需要的是让事件指向事件触发源

在JS事件封装时,addEventListener()方法的this问题

在JS事件封装时,addEventListener()方法的this问题

如上调用一下call()使得this指向ev.srcElement

上一篇:Django中的路由配置简介


下一篇:Linux 文件搜索命令:find、which、whereis 和 locate