Прослушивать события на определенном элементе на уровне окна - Javascript, нет библиотеки

Question

Я хочу прослушивать события на элементах <p> на уровне окна или документа, поскольку таких элементов слишком много, чтобы прикрепить обработчик событий onclick для каждого.

Вот что у меня есть:

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

Мне нужен совет по приведенному выше коду, это хорошо? А также, как я могу проверить, является ли выбранный элемент элементом <p>, отличным от проверки nodeName? Например, если элемент <p> содержит элемент <b> и щелчок по нему, nodeType будет b, а не p.

Спасибо.

Answer 1

Если бы я был тобой, я бы зарегистрировался для события «загрузка» так же, как ты для «клика».Это более современный способ обработки событий, но он может не поддерживаться некоторыми более старыми браузерами.

Проверка nodeName - лучший способ опроса узла:

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

Answer 2

Рассмотрим это:

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

Answer 3

Я думаю, что это хорошо, и вы можете выполнить проверку таким образом

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