附加事件处理程序优化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>

如何处理所有锚标签30 $('.test a').click() it会很有帮助。它们如何能够传递正确的this属性？

Answer 1

您可以将单击处理委托给div，然后检查处理程序内部的目标，并根据单击的锚点执行操作。

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

http://jsfiddle.net/nrVS9/

警告：9之前的IE版本不支持addEventListener。如果您需要支持这些浏览器，请检查addEventListener是否可用，如果不可用，请使用attachEvent。

Answer 2

我推荐使用下面这样的方法：

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

此外，我建议在每个锚点上附加一个pseduo-attribute，这样你就可以用它来检测用户点击了哪个锚点。

可以通过使用function.call(element, arg1, arg2, ...)或function.apply(element, [arg, arg2, arg3, ...])调用函数来设置this

Answer 3

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