将元素传递给事件侦听器回调函数

Question

在下面的代码中：

document.getElementById( 'elem' ).addEventListener( 'blur', function() {
    myScript();
});

如何将 document.getElementById( 'elem' ) 对象传递给 myScript()？我在想像关键字 "this," 这样的东西，这样我就可以在回调函数中对元素进行操作。

Answer 1

你有四种方式传递对象this

绑定this对象并调用函数：

如果你需要在myScript()执行之前执行一些逻辑，应该使用这种方法

function myScript() {
  console.log(this.id);
}

document.getElementById('elem').addEventListener('click', function() {
  myScript.bind(this)();
});

<button id="elem">Click me!</button>

调用函数 myScript 使用函数 call:

如果你需要在myScript()执行之前执行一些逻辑，应该使用这种方法

另请参阅函数 Function.prototype.apply()。

function myScript() {
  console.log(this.id);
}

document.getElementById('elem').addEventListener('click', function() {
  myScript.call(this);
});

<button id="elem">Click me!</button>

直接传函数：

function myScript() {
  console.log(this.id);
}

document.getElementById('elem').addEventListener('click', myScript);

<button id="elem">Click me!</button>

或者传递对象this:

function myScript(element) {
  console.log(element.id);
}

document.getElementById('elem').addEventListener('click', function() {
  myScript(this); //Here you will need to use the param.
});

<button id="elem">Click me!</button>

资源

• Function.prototype.bind()
• Function.prototype.call()
• Function.prototype.apply()

Answer 2

根据Ele的回答，您应该更喜欢绑定方法。正如dfsq在评论中所说，你可以去

element.addEventListener('click', function() {
    myScript(element);
}

但是，使用这样的匿名函数意味着您将无法删除事件侦听器。

const element = document.getElementById('elem');
// creates a new function instance with element bound as first arg
const eventListenerCallback = myScript.bind(null, element);
element.addEventListener('click', eventListenerCallback);

function myScript(element, event) {
    element.setAttribute('data-clicked', 'true');
    // remove the event listener once it has been clicked
    element.removeEventListener('click', eventListenerCallback);
}