Question

目前我在文档完成时执行以下操作。

var passwordInputs = document.querySelectorAll("input[type=password]");

for (index = 0; index < passwordInputs.length; ++index) {
    passwordInputs[index].addEventListener("focusin", activeWordsFocusIn);
    passwordInputs[index].addEventListener("focusout", activeWordsFocusOut);
}

哪个按预期工作。但是，如果页面有一些额外的脚本来修改DOM并添加更多input个元素，那么它们就不会被挂钩。

如何为所有input元素添加事件处理程序，甚至是通过脚本/ ajax添加到DOM的那些元素？

不重复我不认为这是一个副本，因为这个问题Detect Changes in the DOM侧重于检测DOM的变化。我的问题重点是即使DOM发生变化，也会向所有eventListener元素添加input。我现在已经添加了我自己的答案。

Answer 1

您可以使用事件委派将事件处理程序添加到输入的容器中。当容器内的元素触发事件时，我们检查元素matches是否为选择器，如果是，则调用事件处理程序。

＆＃13;

const delegate = (selector) => (cb) => (e) => e.target.matches(selector) && cb(e);

const inputDelegate = delegate('input[type=password]');

container.addEventListener('focusin', inputDelegate((el) => console.log('focus in', el.target.name)));

container.addEventListener('focusout', inputDelegate((el) => console.log('focus out', el.target.name)));

setTimeout(() => {
  const input = document.createElement('input');
  input.setAttribute('type', 'password');
  input.setAttribute('name', 'input2');
  
  container.append(input);
}, 2000);

＆＃13;

<div id="container">
  <input type="password" name="input1">
</div>

＆＃13;

Answer 2

这是我发现有效的解决方案......

function activeWordsFocusIn(e) {
    if (isPassword(e)) {
        console.log("focus in");
    }
}

function activeWordsFocusOut(e) {
    if (isPassword(e)) {
        console.log("focus out");
    }
}

function isPassword(e) {
    var e = window.e || e;

    if (e.target.tagName !== 'INPUT')
        return false;

    if (e.target.type !== 'password')
        return false;

    return true;
}

document.addEventListener('focusin', activeWordsFocusIn, false);
document.addEventListener('focusout', activeWordsFocusOut, false);

DOM更改时，addEventListener到ALL INPUT元素

2 个答案: