javascript - 将事件监听器添加到文档,而不是检查元素是否存在,然后添加事件监听器

标签 javascript dom dom-events addeventlistener

我一直在寻找这个问题,但还没有找到答案。 我想知道 Javascript 中哪种做法更好。要添加仅在目标是所需的情况下才起作用的事件监听器:

document.addEventListener('click', function(e){
     if(e.target && e.target.classList.contains('foo')){
                
     }
});

或者创建一个引用所需元素的变量,如果存在则添加事件监听器

var a = document.querySelector('.foo');

if (a) {
    a.addEventListener('click', function(){

    })
}

最佳答案

我总是选择第一种方法,因为它也会影响动态创建的元素。我还认为你不需要条件的第一部分。我的代码如下所示:

document.addEventListener('click', function(e){
  if(e.target.id == "confirm-button"){
    // do something
  }
});

关于javascript - 将事件监听器添加到文档,而不是检查元素是否存在,然后添加事件监听器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29438876/

相关文章:

javascript - .on(click,function) 不适用于动态添加的内容

javascript - bootstrap Accordion 或隐藏和显示在 jQuery 中动态创建的元素下不起作用

javascript - 让点鼠标交互和画笔协同工作

javascript - Target=带有 OnClick JavaScript 的空白链接

javascript - 我应该使用什么事件来关闭 Electron 应用程序中的客户端 websocket?

javascript - Facebook javascript FB.ui 请求在 IE11 和 Firefox 上挂起

javascript - 即使 JavaScript fun 返回 false,表单也会被提交

javascript - 我怎样才能轻松地一起使用 Ajax、perl 和 JSON?

jquery - 在 jQuery 中绑定(bind)函数之前检查元素存在的最佳方法?

javascript - SELECT控件,如何设置要显示的内容