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＆lt; n＆lt; 50。在单个锚标签上附加onclick事件是否合适？我不能使用任何JavaScript库。知道jquery句柄$('.test a').click()会很有帮助。他们如何能够传递正确的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);

除了c之外，我建议将pseduo-attribute附加到具有数字（1-50）的每个锚点，以便您可以使用它来检测用户点击的锚点。

您可以通过this或function.call(element, arg1, arg2, ...)

调用函数来设置function.apply(element, [arg, arg2, arg3, ...])

Answer 3

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

附加事件处理程序优化javascript

3 个答案: