Присоединение JavaScript обработчиков оптимизации

Question

<div id='test'>
 <a href='#'>Link 1</a>
 <a href='#'>Link 2</a>
 <a href='#'>Link 3</a>
 <a href='#'>Link 4</a>
 <a href='#'>Link 5</a>
 <a href='#'>Link 6</a>
 <a href='#'>Link 7</a>
 <a href='#'>Link 8</a>
 ...
 <a href='#'>Link n</a>
</div>

Как обрабатывать событие onclick для всех тегов привязки [30 $('.test a').click() it.Как они могут передать правильный атрибут this?

Answer 1

Я бы порекомендовал использовать что-то вроде следующего:

function callback(e) {
    var e = window.e || e;

    if (e.target.tagName !== 'A')
        return;

    // Do something
}

if (document.addEventListener)
    document.addEventListener('click', callback, false);
else
    document.attachEvent('onclick', callback);

Кроме c, я бы порекомендовал прикрепить псевдо-атрибут к каждому якорю, который имеет номер (1-50), чтобы вы моглииспользуйте его, чтобы определить, какие из якорей щелкнул пользователь.

Вы можете установить this, вызвав функцию с помощью function.call(element, arg1, arg2, ...) или function.apply(element, [arg, arg2, arg3, ...])

Answer 2

Вы можете делегировать обработку кликов на div, затем проверить цель в обработчике и действовать в соответствии с тем, какой щелчок был выбран.

var div = document.getElementById('test');
div.addEventListener('click', function(event){
    console.log(event.target.innerHTML)
});

http://jsfiddle.net/nrVS9/

Предупреждение : версии IE до 9 не поддерживают addEventListener.Если вам требуется поддержка этих браузеров, проверьте, доступен ли addEventListener, и используйте attachEvent, если это не так.

Answer 3

document.getElementById('test').onclick = function(event){
    event = event || window.event;
    if(event.target.nodeName == "a"){
        console.log("link clicked");
    }
});