javascript - 如何在事件监听器中传递 'this' 参数?

Question

addEventListener('keydown', myFunction)，
removeEventListener('keydown', myFunction)

怎么在myFunction传参数 this?

function myFunction(_this){  console.log(_this)}

Answer 1

<input type="text" id="i" /><script type="text/javascript">  function myFunction(_this, e) {    console.log(_this, e);  }  document.querySelector("#i").addEventListener("keydown", function (event) {    myFunction(this, event);  });</script>

Answer 2

在 JavaScript 中，你可以通过使用匿名函数或箭头函数来在事件监听器中传递 this 参数。以下是如何做到这一点的示例：

// 匿名函数element.addEventListener('keydown', function(event) {  myFunction(this, event);}.bind(element));// 箭头函数element.addEventListener('keydown', (event) => {  myFunction(this, event);}.bind(element));

在上述代码中，.bind(element) 方法用于将匿名函数或箭头函数的 this 参数绑定到 element。这样，当事件触发时，this 参数就会指向你期望的元素。

然后你可以这样定义 myFunction：

function myFunction(element, event) {  console.log(element); // 将会打印出触发事件的元素  console.log(event); // 将会打印出事件对象}

这样，myFunction 就可以接收到 this 参数和事件对象了。