Question

我有可编辑的html页面，因此用户可以复制和粘贴html元素，也可以动态创建元素。我已经在这些元素中挂了一些事件监听器，但显然我需要在这些动态添加的元素中挂钩事件监听器。我想出的解决方案是，每当用户专注于这些元素时，事件触发器和所需的事件监听器就会与特定元素挂钩。

$('body').on('focusin', '.propclass', function() {
    autocomplete(this,idsprop);
});

除了每次当我挂钩事件监听器时，它都处于正常状态，它不会丢弃先前的事件监听器，但它为该元素添加了一个事件监听器，例如，如果我在该元素上聚焦5次，它会挂钩并对该元素调用5次。

我试图通过

删除以前的事件监听器

inp.removeEventListener("input",call_input,true);

但它没有用。

function autocomplete(inp, arr) {
inp.removeEventListener("input",call_input,true);
inp.removeEventListener("keydown",call_keydown,true);


inp.addEventListener("input", function(e) {
    call_input(e);
});

inp.addEventListener("keydown", function(e) {
    call_keydown(e);
});

};

所以每次＆＃34;自动完成＆＃34;调用，首先我尝试删除监听器然后添加新的监听器。

有没有办法删除以前的事件监听器？我的方法是正确的还是有更好的方法来做到这一点？

Answer 1

您必须将对作为参数传递的先前函数的确切引用保存到addEventListener。例如：

let inputListener;
let keydownListener;
function autocomplete(inp, arr) {
  // use the listeners that were assigned on the previous running of this function:
  inp.removeEventListener("input", inputListener, true);
  inp.removeEventListener("keydown", keydownListener, true);
  // assign new listeners to the outer variables so they can be referenced the next time:
  inputListener = e => call_input(e);
  keydownListener = e => call_keydown(e);
  inp.addEventListener("input", inputListener);
  inp.addEventListener("keydown", keydownListener);
}

如果您有机会在听众中添加更多内容，那就是这样。如果听众只是call_input(e)和call_keydown(e)，那么直接传递call_input和call_keydown：

function autocomplete(inp, arr) {
  inp.removeEventListener("input",call_input,true);
  inp.removeEventListener("keydown",call_keydown,true);
  inp.addEventListener("input", call_input);
  inp.addEventListener("keydown", call_keydown);
}

如果您最初使用的匿名函数未在其他地方引用，则您无法通过removeEventListener将其删除。

Answer 2

在事件监听器中，您可以使用if语句来检查变量是真还是假。然后将事件监听器代码放在其中！

从html元素

2 个答案: