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

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);
}