Question

好。所以我理解有几种方法来管理事件的JavaScript。

内联，例如。 <div id=myid onClick="alert('hi')"> - 据说你不应该这样做。
事件处理程序，例如。 element.onclick = new Function("myFunc('args')"); - 据说更好但不是最好的
事件监听器，例如。 element.addEventListener("click",myFunc,false) - 据说是最好的做事方式

所以，假设我想将参数传递给我的函数。我听说我应该通过在这样的函数中调用另一个函数来实现它：

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

但是现在如果我要删除它呢？

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

这将在控制台中返回“未定义的任何内容”错误。那么我的功能没有名字？ “不管”不是它的名字吗？我现在该怎么删除它？

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

编辑：

好的，是的，我不能提及任何内容，因为它是内联编写的。但我被迫使用函数表达式内联的原因是因为我想传递它的参数。我想传递它的参数，因为我不想每次想要改变行为时都定义一个新函数。如果我使用事件处理程序（而不是“监听器”），我可以轻松地交换操作并仍然使用参数：

element.onClick("myFunc('do one thing')");

element.onClick("myFunc('do a different thing')");

并使用它，我永远不必定义一个新函数，我只是用不同的参数传递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>

Answer 2

也许这会帮助你实现目标... generateHandler为输入函数生成一个事件处理函数，带有一个输入参数并传递＆＃34;真正的处理程序＆＃34;事件，参数和处理程序实例，以便于删除。它还返回该实例以从外部删除处理程序。

然后我展示了如何使用它的各种方法。希望这会有所帮助...

＆＃13;

function generateHandler(f, arg) {
  var handler = function (evt) {
    f(evt, arg, handler);
  };
  return handler;
}

function realFunc(evt, arg, handler) {
  alert(arg);
  if(arg == 2) {
    document.getElementById('el').removeEventListener('click', handler);
    document.getElementById('el').innerHTML = 'I also do nothing now';
  }
}

function replace1Time(evt, arg, handler) {
  document.getElementById('el').removeEventListener('click', elHandler);
  elHandler = generateHandler(realFunc, 2);
  document.getElementById('el').addEventListener('click', elHandler);
  document.getElementById('el2').removeEventListener('click', handler);
  document.getElementById('el2').innerHTML = 'I do nothing now';
}

var elHandler = generateHandler(realFunc, 1);

document.getElementById('el').addEventListener('click', elHandler);
document.getElementById('el2').addEventListener('click', generateHandler(replace1Time));

＆＃13;

<div id="el">Click me!</div>
<div id="el2">Click me to replace 1 time</div>

＆＃13;

Answer 3

查看this fiddle

当您按下按钮但后来不会看到它时，您会看到一个警报，因为它将从收听者中删除。

function anotherFunctionWithParams(param1, param2){
      alert (param1 + "-" + param2);
}

var cbFunc= function(){
  anotherFunctionWithParams("tra","lalala");
  document.getElementById("test").removeEventListener("click", cbFunc);
}


document.getElementById("test").addEventListener("click", cbFunc, false);

也不是这样，您可以不删除内联匿名侦听器功能。

Answer 4

所以，我需要bind。它允许我使用预先选择的参数为变量赋值，然后将其作为变量传递。也不知何故，事件作为最后一个参数传递，这对我来说似乎是某种伏都教。

试试我尝试过的所有事情的演示。单击所有x按钮，然后单击删除，然后再次单击所有x按钮，然后单击添加并再次尝试。我的代码中有一些问题，如果有人理解，请随时回答。

<html>

<body>
<button id=x1 >x1</button>
<button id=x2a >x2a</button>
<button id=x2b >x2b</button>
<button id=x3 >x3</button>
<button id=x4 >x4</button>
<button id=testremove>Remove listeners & clear</button>
<button id=testadd>Add listeners</button>
<div id=whiteboard></div>
</body>
<script>
function removeAlerts(){
    wb = document.getElementById("whiteboard");
    wb.innerHTML="";
document.getElementById("x1").removeEventListener("click",myFunc,false);
document.getElementById("x2a").removeEventListener("click",whatever,false);
document.getElementById("x2b").removeEventListener("click",whatever,false); //why does the the x2b listener get removed, but this one not?
document.getElementById("x3").removeEventListener("click",whatever2,false); 
document.getElementById("x4").removeEventListener("click",inlineFunc,false); //this one fails so it has to be at the end of the list otherwise the other removals won't occur
}

function moreAlerts(){
document.getElementById("x1").addEventListener("click",myFunc,false);
document.getElementById("x2a").addEventListener("click",function(){alert("you can never get rid of these listeners")},false);
document.getElementById("x2b").addEventListener("click",whatever = myFunc.bind(null,'lalala','testing123'),false); //these args are different from before
document.getElementById("x3").addEventListener("click",whatever2 = myFunc.bind(null,'different','different'),false); //this can be removed several times
} 

function myFunc(arg1,arg2,arg3){
    wb = document.getElementById("whiteboard");
    wb.innerHTML+=("<br>arg1: "+arg1);
    wb.innerHTML+=("<br>arg2: "+arg2);
    wb.innerHTML+=("<br>arg3: "+arg3);
    wb.innerHTML+=("<br>this.innerHTML: "+this.innerHTML);
    wb.innerHTML+=("<br>arg1.target: "+arg1.target);
    if(arg3!=null){ //
        wb.innerHTML+=("<br>arg3.target: "+arg3.target);
    }
    else{
        wb.innerHTML+=("<br>arg3.target: null"); //if you call for an attribute from something that doesn't exist it exits the function
        //so if you don't call .target in this else block then it would not print out the <br>-------- line when arg3 doesn't exist.
        }
    wb.innerHTML+=("<br>--------");
}

x3e = document.getElementById("x3") //x3 element


document.getElementById("x1").addEventListener("click",myFunc,false); //can't pass arguments to it via traditional method

document.getElementById("x2a").addEventListener("click",whatever = myFunc.bind(null,'one','two'),false); //If you change "whatever" to "somethingelse" it will get deleted, so what is happening to the first "whatever" when a second "whatever" is assigned to the same element? It still exists but you can nolonger reference it.

document.getElementById("x2b").addEventListener("click",whatever = myFunc.bind(null,'first arg','second arg'),false); //different args, different element, but same function name, causes issues when removing

document.getElementById("x3").addEventListener("click",whatever2 = myFunc.bind(x3e,'first arg','second arg'),false); //THIS IS THE BEST OF ALL!!!!

document.getElementById("x4").addEventListener("click",function inlineFunc(event){myFunc(event,"first arg","second arg");},false); //can't remove this one

document.getElementById("testremove").onclick = removeAlerts; //the "onclick" type is lame cause you can't assign multiple events to one element
//If you click "Add listeners" multiple times you can see the ability to add multiple listeners to the sam element with the addEventListener function, 
//however even if they are named, if you add two to the same element with the same function variable name, you cannot remove them all, only the most recently added one.
document.getElementById("testadd").onclick = moreAlerts;

</script>
</html>

使用参数和访问元素和事件添加和删除eventlistener？ - Javascript

4 个答案: