Question

假设我有这种简单的事件监听器注册模式：

 function registerElement(){
     var element = document.getElementById("element");
     element.addEventListener("click", sayHello, false);
 }

 function sayHello(event){
     event.preventDefault();
     console.log("Hello from " + this.id);
 }

 registerElement();

现在，我想添加一个回调函数，比如registerElement（callback）。我们的想法是在＆＃34; element＆＃34;之后执行一些功能。得到一个单击，伪代码可能看起来像这样：

 function registerElement(callback){
     var element = document.getElementById("element");
     element.addEventListener("click", sayHello, false); //<--not sure what to do here to add callback to sayHello
 }

 function sayHello(event, callback){
     event.preventDefault();
     console.log("Hello from " + this.id);
     callback;
 }

 function cleanup(){
     console.log("Hello from cleanup");
 }

 registerElement(cleanup);

我试图避免在registerElement中使用匿名函数来使sayHello（）更具可重用性。我看着bind，但这似乎集中在控制哪个＆＃34;这个＆＃34;被发送到事件监听器功能。还有其他想法吗？

感谢您的提示！

Answer 1

为了避免混合责任，建议在函数}之外执行回调函数，否则函数'将绑定到第二个参数sayHello：< / p>

这种方法假设sayHello不执行任何异步逻辑

callback

Answer 2

事件侦听器按添加到元素的顺序执行。同样，如果sayHello没有做任何需要cleanup回调被延迟并异步调用的异步，你可以添加另一个事件监听器：

function registerElement(callback){
     var element = document.getElementById("element");
     element.addEventListener("click", sayHello, false);
     element.addEventListener("click", callback, false); 
}

如果清理依赖于sayHello完成一个同步任务，那么设计可能需要检查以使用promises或async / await函数。

更通用的注册函数可以参数化元素id，事件类型并采取任意数量的回调（包括sayHello），如下例所示：

function register( elementId, eventType, ...callbacks) {
    const element = document.getElementById( elementId);
    for( const callback of callbacks) {
        element.addEventListener( eventType, callback, false);
    }
}

// test
const sayHello = e=>console.log("hello");
const cleanup =  e=>console.log("cleanup");
register( "myButton", "click", sayHello, cleanup);

<button type"button" id="myButton">myButton</button>

添加回调到.addEventListener

2 个答案: