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

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 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()