gpt4 book ai didi

javascript - 绑定(bind)到动态添加的内容而不使用 jquery?

转载 作者:行者123 更新时间:2023-12-03 06:02:12 27 4
gpt4 key购买 nike

如果我动态向页面添加表单(无论是通过 AJAX 还是其他 JS),如何在页面加载的这些元素存在之前将事件监听器添加到它们?

我知道使用 jquery 绑定(bind)到父元素相当容易,如下所示:

$(document).on('blur', 'input', function() {...})

但我不清楚如何使用 vanilla JS 执行此操作,因为 addEventListener 必须直接应用于元素本身,并且无法指定事件应传播的父元素? (我想,对吧..?)

最佳答案

我会这样做。委派很简单。绑定(bind)到顶级父级。越近越好、越快。例如,如果您想在特定的 div 中委托(delegate)事件,那就更好了;避免冲突。将 event.target 与您要查找的目标进行比较,然后调用回调函数

document.addEventListener('blur', function(event){

if(event.target.tagName == 'INPUT'){
onInputBlur.apply(this, arguments);
}

}, true);

function onInputBlur(event){

// console.log(event); // event
console.log(event.target.value);

}
<input type="text"/>
<input type="text"/>
<input type="number"/>

关于javascript - 绑定(bind)到动态添加的内容而不使用 jquery?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39709597/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com