javascript - 使用参数和访问元素和事件添加和删除事件监听器？ - Javascript

Question

假设我想将参数传递给我的函数。我听说我应该通过从这样的函数中调用另一个函数来做到这一点:

myElement.addEventListener("click",function whatever(event){
    myFunk(event,"some argument");
},false);

但是如果我想删除它怎么办？

myElement.removeEventListener("click",whatever,false);

var myElement = document.querySelector('div')
function myFunk(e,m){
  console.log(e,m)
}
myElement.addEventListener("click",function whatever(event){
    myFunk(event,"some argument")
},false)

myElement.removeEventListener("click", whatever, false)

<div></div>

这会在控制台中返回一个“未定义的”错误。那么我的函数没有名字吗？ “随便”不是它的名字吗？我现在该如何删除它？

我需要一种方法来分配一个事件监听器并向其传递参数，然后再将其删除。我该怎么做？

编辑:

好的，是的，我不能引用任何内容，因为它是内联编写的。但是我被迫使用内联函数表达式的原因是因为我想给它传递参数。我想给它传递参数，因为我不想每次我想改变行为时都定义一个新函数。如果我使用“on”属性上的文本定义一个事件监听器，我可以轻松地换出参数:

element.onClick("myFunc('做一件事')");

element.onClick("myFunc('做不同的事情')");

如何使用 addEventListener、内联、可移动和动态参数来做到这一点？

Answer 1

对于 addEventListener() 的第二个参数，这样做:

whatever= function(event) {
  ...
}

... 而不是这个:

function whatever(event) {
  ...
}

然后您就可以像这样删除事件:

myElement.removeEventListener('click' , whatever);

---

要将参数传递给另一个事件，请使用 bind ，像这样:

whatever= myfunk.bind(myElement, parameter1, parameter2, ...)

---

示例

var myElement= document.getElementById('myElement');

function myfunk(s) {
  this.innerHTML+= '<br>'+s;
  myElement.removeEventListener('click', whatever);

  myElement.addEventListener(
    'click',
    whatever= myfunk.bind(myElement, 'Clicked again.')
  );
}

myElement.addEventListener(
  'click',
  whatever= myfunk.bind(myElement, 'Clicked once.')
);

<div id="myElement">Click me!</div>