需要参数的addEventListener（和removeEventListener）函数 [英] addEventListener (and removeEventListener) function that need param

问题描述

我需要向8个对象（手掌）添加一些侦听器。
这些对象是相同的，但是行为必须根据其位置进行更改。
我有以下代码（丑陋）：

I need to add some listeners to 8 object (palms). These object are identical but the behaviour have to change basing to their position. I have the follow (ugly) code:

root.palmsStatus = ["B","B","B","B","B","B","B","B"];

if (root.palmsStatus[0] !== "N")
  root.game.palms.palm1.addEventListener("click", palmHandler = function(){ palmShakeHandler(1); });
if (root.palmsStatus[1] !== "N")
  root.game.palms.palm2.addEventListener("click", palmHandler = function(){ palmShakeHandler(2); });
if (root.palmsStatus[2] !== "N")
  root.game.palms.palm3.addEventListener("click", function(){ palmShakeHandler(3); });
if (root.palmsStatus[3] !== "N")
  root.game.palms.palm4.addEventListener("click", function(){ palmShakeHandler(4); });
if (root.palmsStatus[4] !== "N")
  root.game.palms.palm5.addEventListener("click", function(){ palmShakeHandler(5); });
if (root.palmsStatus[5] !== "N")
  root.game.palms.palm6.addEventListener("click", function(){ palmShakeHandler(6); });
if (root.palmsStatus[6] !== "N")
  root.game.palms.palm7.addEventListener("click", function(){ palmShakeHandler(7); });
if (root.palmsStatus[7] !== "N")
  root.game.palms.palm8.addEventListener("click", function(){ palmShakeHandler(8); });

我有两个需求：

1 ）不会在点击事件上使用匿名函数。

1) doesn't use an anonymous function on click event.

我编写了这段代码，但不起作用

I wrote this code, but it doesn't work

root.game.palms.palm8.addEventListener("click", palmShakeHandler(8));

因此，这一项工作正常

root.game.palms.palm8.addEventListener("click", function(){ palmShakeHandler(8); });

但是我不知道如何删除事件监听器。
我尝试了此解决方案，但不起作用

But I didn't understand how remove the event listener. I try this solution, but it doesn't work

root.game.palms.palm8.addEventListener("click", palmHandler = function(){ palmShakeHandler(8); });
root.game.palms.palm8.removeEventListener("click", palmHandler);

2）在for循环中添加和删除侦听器

2) add and remove listener in a for cycle

我写了以下代码，但行为不正确。

I wrote the follow code but the behaviour is not correct.

  for (i=1; i <= root.palmsStatus.length; i++){
    if (root.palmsStatus[i-1] !== "N"){
      root.game.palms["palm" + i].addEventListener("click", function(){ palmShakeHandler(i); });
    }
  } 

添加了侦听器，但传递了参数的值 palmShakeHandler 始终为8。

the listeners was added but the value of the parameter passed to the palmShakeHandler is always 8.

没人能帮我解决这些问题吗？

Nobody could help me to fix these issues?

推荐答案

在JavaScript中，有一种使用 Function.prototype.bind 方法的完美方法。

There is a actually, a perfect way to do that in JavaScript using the Function.prototype.bind method.

bind 让您定义额外的参数，这些参数将作为函数的参数传递。

bind let you define extra parameters that will be passed, as arguments, of the function.

您还应该记住， bind 会创建一个新函数，并且不会修改初始函数。

You should also keep in mind that bind creates a new function and doesn't modify the initial function.

这是它的样子：

function palmHandler(number) {
  // your code working with `number`
}

var palmHandler8 = palmHandler.bind(null, 8)
// the palmHandler8 is now tied to the value 8.
// the first argument (here null) define what `this` is bound to in this function

这应该可以解决您的问题，并且您可以轻松删除处理程序：）

This should fix your problem, and you will be able to remove handlers easily :)

您的代码如下所示：

for (i=1; i <= root.palmsStatus.length; i++){
  if (root.palmsStatus[i-1] !== "N"){
    root.game.palms["palm" + i].addEventListener("click", palmShakeHandler.bind(null, i));
  }
} 

要能够在以后删除处理程序，您需要保留对使用 bind 创建的函数的引用。

To be able to remove the handler afterward, you need to keep a reference to the function you create with bind. This would be the way to do this.

var boundHandler = handler.bind(null, i);
element.addEventListener(boundHandler);
element.removeEventListener(bounderHander);

如果您想了解更多有关绑定 JavaScript中的方法，MDN是您的朋友：) https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind

If you want to know more about the awesome bind method in JavaScript, the MDN is your friend :) https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind

BTW，问题在于您的函数始终返回 8 是JavaScript中一个非常常见的问题。该线程将解释所有内容（破坏者，这是范围界定的问题：）） https://stackoverflow.com/a/750506/2745879

BTW, the problem with you function always returning 8 is a very common question in JavaScript. This thread will explain everything (spoiler, it's a matter of scoping :) ) https://stackoverflow.com/a/750506/2745879

这篇关于需要参数的addEventListener（和removeEventListener）函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！