在窗口级别侦听某些元素上的事件 - Javascript，没有库答案

【问题标题】：Listen for events on certain element at window level - Javascript, no library在窗口级别侦听某些元素上的事件 - Javascript，没有库
【发布时间】：2011-09-10 22:28:46
【问题描述】：

我想在窗口或文档级别监听 <p> 元素上的事件，因为此类元素太多，无法为每个元素附加 onclick 事件处理程序。

这就是我所拥有的：

window.onload=function()
{
    window.addEventListener('click',onClick,false);
}
function onClick(event)
{
    alert(event.target.nodeName.toString());
}

我需要关于上面代码的建议，它好吗？而且，除了检查nodeName之外，我如何检查点击的元素是否是<p>元素？例如，如果 <p> 元素包含 <b> 元素并且被单击，则 nodeType 将是 b 而不是 p。

谢谢。

【问题讨论】：

不使用任何库有什么特别的原因吗？像 jQuery 或 YUI 委托这样的框架让你使用起来很简单。只是好奇。
嘿。这将在其中运行的环境不允许加载外部脚本。唯一的方法是将 jQuery 代码直接粘贴到 HTML 文件中，但这似乎有点过头了。
@Francisc：不要忘记在Event-object 上没有'target'-property 的旧版IE（至少是IE 7）。使用 var target = 'target' in event ? event.target : event.srcElement; srcElement 之类的东西。他们也缺少addEventListener-方法 - 改用attachEvent。
谢谢萨克斯。这只会被 Webkit 浏览器看到。这适用于他们吗？据我所知，只有 IE 有这个问题。
@Francisc：这只是一个 IE 问题。所有 Webkit 浏览器都支持 'element.addEventListener' 和 'event.target'。

标签： javascript event-delegation

【解决方案1】：

我觉得不错，可以这样检查

var e = event.target
while (e.tagName != 'P')
   if (!(e = e.parentNode))
       return
alert(e)

【讨论】：

【解决方案2】：

如果我是你，我会像注册“点击”一样注册“加载”事件。这是一种更现代的事件处理方式，但某些旧版浏览器可能不支持。

检查 nodeName 是询问节点的最佳方法：

function onClick(event) {
    var el = event.target;
    while (el && "P" != el.nodeName) {
        el = el.parentNode;
    }
    if (el) {
        console.log("found a P!");
    }
}

【讨论】：

【解决方案3】：

考虑一下：

(function () {

    // returns true if the given node or any of its ancestor nodes
    // is of the given type
    function isAncestor( node, type ) {
        while ( node ) {
            if ( node.nodeName.toLowerCase() === type ) {
               return true;
            } 
            node = node.parentNode;
        }
        return false;
    }

    // page initialization; runs on page load
    function init() {

        // global click handler
        window.addEventListener( 'click', function (e) {
            if ( isAncestor( e.target, 'p' ) ) {
                 // a P element was clicked; do your thing   
            }
        }, false );

    }

    window.onload = init;

})();

现场演示： http://jsfiddle.net/xWybT/

【讨论】：