为DOM中的所有元素附加click事件处理程序

Question

所以我希望能够弄清楚我的页面的哪个部分被点击了.无法保证元素全部出现在页面上,这意味着我需要使用像jquery delegate这样的东西.

一种方法是遍历DOM中的所有元素,然后将事件处理程序附加到每个元素 - 但这将是缓慢而复杂的 - 每次动态添加新的html时,我必须重新附加所有处理程序,或找出已添加的html的子集.

另一种方法是使用事件冒泡 - 所以向文档或正文添加一个事件处理程序并依赖于冒泡的事件

这样的事情

        $('body').delegate('div', 'click', function(e){
            dummyId++;
            console.log(e);
            console.log(e.currentTarget);
            console.log("=====");

        });

但是,在使用此代码后,当我单击页面上的按钮时,我得到了按钮周围的div,而不是实际的按钮.换句话说,上述内容太具体了.此外,我觉得原始选择器应该是文档,而不是body标签.

要清楚,我想知道何时在我的页面上点击任何元素 - 我该怎么做？

谢谢

所以我用.on尝试了这段代码

$(document).on('click', function(e){
    console.log("EVENT DUMMY ID");

    console.log(e.target);
    console.log("=====");

});

但是,当我点击我的应用程序中的按钮时,没有任何内容被触发 - 当我点击其他元素时,控制台日志会运行.

我知道如果没有更多背景,这可能很难回答 - 你还需要什么？

Answer 1

currentTarget返回事件已冒泡的节点(如果有的话).相反,询问target,所以:

香草:

document.addEventListener('click', function(evt) {
    alert(evt.target.tagName);
}, false);

jQuery的:

$(document).on('click', function(evt) {
    alert(evt.target.tagName);
});

http://jsfiddle.net/qsbdr/