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

回答

相關問題