Eloquent JavaScript中的removeEventListener示例

问题描述：

在下面的截图中，有人能解释为什么你必须将函数“once”传递给button.removeEventListener（“click”，一次）吗？我们只是通过它，因为removeEventListener方法需要两个参数？此外，看起来很奇怪，如果“once”函数也传递给removeEventListener方法，则“完成”不是控制台记录多次。Eloquent JavaScript中的removeEventListener示例

let button = document.getElementById("button"); 
 

 
function once() { 
 
    console.log("Done"); 
 
    button.removeEventListener("click", once); 
 
} 
 
button.addEventListener("click", once);

<button id="button">once</button>

“*我们只是通过它，因为removeEventListener方法需要两个参数吗？*” - 不。我们不是因为函数有两个参数而传递一些随机值。我们正好传递事件监听器函数*，因为removeEventListener需要知道要删除哪个监听器，因为您可以[参阅文档]（https://developer.mozilla.org/en-US/docs/Web/API /事件目标/ removeEventListener）。 – Bergi

答

当你想解除绑定只有特定的处理器（如你在这里解除绑定once处理器），你需要传递的第二个参数，否则JS不会知道删除哪个处理程序。

可以有多个处理程序绑定到每个事件。

此外，由于“once”函数也被传递给removeEventListener方法，所以看起来很奇怪“完成”不是控制台记录多次。

这就是为什么它只被调用一次的原因。您在那里传递函数once的引用，所以JS知道要解除绑定的处理程序。当您致电removeEventListener时，它不称呼它。

一旦用户点击按钮，处理器中有这个console.log，这个函数被调用，并且在它将自己取消注册之后，所以后面的点击不会再触发该函数。

感谢Martin的解释 - 这很有帮助。 – phao5814

答

您可以将javascript中的多个事件绑定到同一动作上的元素。

当您想从绑定事件中移除特定的处理程序时，您需要在removeEventListener中传递该处理程序的函数名称。如果您不通过removeEventListener中的第二个参数，它将只删除该事件上该动作的所有处理程序。

就你而言，你将从其本身中删除处理程序once。

不同的处理程序的一个例子来说明：

function firstListener(e) { 
 
    console.log('firstListener'); 
 
} 
 

 
function secondListener(e) { 
 
    console.log('secondListener'); 
 

 
    // this will remove `firstListener` handler from subsequent button clicks 
 
    e.target.removeEventListener('click', firstListener); 
 
} 
 

 
// bind first event handler function 
 
document.querySelector('#btnMultiEvent').addEventListener('click', firstListener); 
 

 
// bind second event handler function 
 
document.querySelector('#btnMultiEvent').addEventListener('click', secondListener);

<button id="btnMultiEvent">Multiple Event Button</button>

更多关于removeEventListener

答

让我在ASCII码表解释：

   | script start | nothing happens | once() execute | nothing happens | 
---------------|--------------|-----------------|----------------|-----------------| 
"click" Events | once() added | once() waiting | once() removed |     | 
       | lala() added | lala() waiting | lala() waiting | lala() waiting |

功能拉拉与一次相同，并将其从“点击”事件中删除。

Eloquent JavaScript中的removeEventListener示例

相关推荐