如何为变量绑定带参数的mouseup事件函数并使函数内this指向触发变量

嘿，这个问题其实很常见，要让test函数里的this指向触发事件的variable，有几种简单直接的方法可以实现，我给你拆解一下：

方法1：使用bind()预先绑定this #

bind()方法会创建一个新函数，这个函数的this会被永久绑定到你传入的对象上。直接把绑定后的函数作为事件监听器即可：

variable.addEventListener('mouseup', test.bind(variable));

这样每次触发mouseup事件时，test函数里的this就会指向variable，而且事件对象会自动作为第一个参数传给test，刚好匹配你定义的arg参数，完美满足需求。

方法2：在匿名回调里用call()/apply()调用test #

如果你需要在调用test前做一些额外逻辑，或者想动态指定this，可以在匿名函数里用call()或apply()来调用test，手动指定this为variable：

用call()的写法： #

variable.addEventListener('mouseup', function(ime_igraca) {
  // 这里可以添加触发事件后的额外处理逻辑
  test.call(variable, ime_igraca);
});

用apply()的写法： #

variable.addEventListener('mouseup', function(ime_igraca) {
  test.apply(variable, [ime_igraca]);
});

call()和apply()的核心作用都是手动指定函数执行时的this，区别仅在于参数传递方式：call()接收单个参数，apply()接收参数数组，这里因为只有一个事件对象参数，两种写法都能用。

为什么原代码无法实现需求？ #

你原来的写法里直接调用test(ime_igraca)，此时test的this在非严格模式下会指向全局对象（比如浏览器环境里的window），严格模式下会是undefined，自然拿不到variable的id属性。上面的两种方法就是通过绑定或手动指定，把this指向改成了触发事件的variable。

内容的提问来源于stack exchange，提问作者Dusan Sijacic