Listen for events on certain element at window level - Javascript, no library

I want to listen for events on <p> elements at window or document level as there are too many such elements to attach an onclick event hander for开发者_运维问答 each.

This is what I've got:

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

I need advice on the code above, is it good? And also, how can I check if the clicked element is a <p> element other than checking nodeName? For example, if the <p> element contains a <b> element and that is clicked, the nodeType will be b not p.

Thank you.

I think it is good, and you can perform checking this way

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

If I was you I'd register for the "load" event in the same way that you are for "click". It's a more modern way of event handling, but might not be supported by some older browsers.

Checking the nodeName is the best way to interrogate the node:

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

Consider this:

(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;

})();

Live demo: http://jsfiddle.net/xWybT/