时间戳

首页 > 解决方案 > 与 addEventListener 绑定

javascript - 与 addEventListener 绑定

问题描述

在 JavaScript 中的事件侦听器上使用bind()时，我无法再获取带有“this”的元素。

这是我的代码：

function callback(){

     console.log(this.someVar);
     // Works fine

     console.log(this);
     // No longer refers to the element, outputs "Object"

}

callback = callback.bind({someVar: 1234});

element.addEventListener('click', callback);

关于如何解决这个问题的任何想法？

标签： javascripteventsdom-eventsaddeventlistener

解决方案

如果您想传递一个变量但保留this上下文，那么您可以使用柯里化或部分应用程序：

咖喱

您的函数必须接收一个值并返回另一个函数。这样，您可以执行以下操作：

function callback(num) {
  return function() {
    console.log(num);
    console.log(this.id);
  }
}

var number = 1;

document.getElementById("hello").addEventListener("click", callback(number));

//change the variable
number = 2;
document.getElementById("world").addEventListener("click", callback(number));

//change the variable again
number = 3;
<button id="hello">Hello</button>
<button id="world">World</button>

部分应用

同样的想法，但不是让你的回调返回一个新函数，它只需要一个参数并正常工作，你需要另一个函数来执行部分应用程序：

function callback(num) {
  console.log(num);
  console.log(this.id);
}

var number = 1;

document.getElementById("hello").addEventListener("click", partial(callback, number));

//change the variable
number = 2;
document.getElementById("world").addEventListener("click", partial(callback, number));

//change the variable again
number = 3;


function partial(fn, arg) {
  return function() {
    return fn.call(this, arg);
  }
}
<button id="hello">Hello</button>
<button id="world">World</button>

偏应用函数可以泛化为处理任何数量或参数

在 ES6 中：

function partial(fn, ...args) {
  return function(...otherArgs) {
    return fn.apply(this, [...args, ...otherArgs]);
  }
}

在 ES5 中：

function partial(fn) {
  var args = [].prototype.slice.call(arguments, 1);
  return function() {
    var otherArgs = [].[].prototype.slice.call(arguments);
    return fn.apply(this, args.concat(otherArgs));
  }
}

推荐阅读