附加事件处理程序优化javascript

<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 < n < 50]。在单个锚标签上附加onclick事件是否好？我不能使用任何JavaScript库。这将有助于了解jquery handle $('.test a').click()它。他们如何能够通过适当的this属性？附加事件处理程序优化javascript

来源

2012-03-16 Tamil

您可以将点击处理委托给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。

来源

2012-03-16 18:01:03 bfavaretto

@bfarvaretto感谢设置this的警告，也可以考虑加入event.srcElement和事件= ||事件window.event – Tamil 2012-03-18 19:00:06

我建议使用类似如下：

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

此外OFC，我建议附加pseduo属性到具有数（1-50）每个锚，所以你可以使用以检测用户点击了哪个锚点。

您可以通过调用函数function.call(element, arg1, arg2, ...)或function.apply(element, [arg, arg2, arg3, ...])

来源

2012-03-16 18:03:07 zatatatata

+1为IE <9兼容！ – bfavaretto 2012-03-16 18:52:41

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

来源

2012-03-16 18:04:41 wong2

附加事件处理程序优化javascript

回答

相关问题