Attacher un événement à des éléments enfants

Question

<div class="tabContainer"> 
    <ul class="Tabs" id="tabset"> 
    <li id="tab1" class="selected" onclick="tabs(this)">Home</li> 
    <li id="tab2" onclick="tabs(this)">Tab 2</li> 
    <li id="tab3" onclick="tabs(this)">Tab 3</li> 
    </ul> 
</div> 

Je veux supprimer onclick="tabs(this)" et le transformer en un événement. Comment puis-je faire ceci? Actuellement le code ci-dessous est ma solution qui ne fonctionne pas.

var h=$("tabset").children; 
for (i=0;i<h.length;i++) h[i].onclick=tabs(this); 

Oh et non jquery s'il vous plaît, mais var $ = function(x){return document.getElementById(x)}; NOTE: Je dois la partie (this).

Answer 1

Je vous suggère:

var lis = document.getElementById('tabset').getElementsByTagName('li'); 
for (var i = 0, len = lis.length; i < len; i++){ 
    lis[i].onclick = tabs; // inside the function 'this' will refer to the node. 
} 

JS Fiddle demo.

Bien que vous pouvez attribuer le clic-gestionnaire à l'élément contenant ul:

var list = document.getElementById('tabset'); 
tabset.onclick = list.addEventListener('click', function(e){ 
    tabs(e.target); 
}, false); 

JS Fiddle demo.

Vous pouvez, maintenant je vois ce que vous faites avec votre fonction, évitez d'utiliser getElementById() et simplement la chaîne:

$('tabset').addEventListener('click', function(e){ 
    tabs(e.target); 
}, false); 

JS Fiddle demo.

Avec jQuery, comme vous paraissiez (avant modifié) pour essayer d'utiliser:

$('#tabset li').click(function(){ 
    tabs(this); 
}); 

Answer 2

Vous semblez utiliser une fonction $ dans votre code qui n'est pas standard. Par exemple, si vous utilisez jQuery votre code pourrait ressembler à ceci:

$('#tabset li').on('click', tabs); 

Si vous ne voulez pas utiliser jQuery, vous devrez adapter votre sélection:

var h = document.getElementById('tabset').getElementsByTagName('li'); 
for (var i = 0; i < h.length; i++) { 
    h[i].onclick = tabs; 
} 

ou depuis que vous avez déclaré :

var $ = function(x){ 
    return document.getElementById(x) 
}; 

vous pouvez aussi utiliser:

var h = $('tabset').getElementsByTagName('li'); 
for (var i = 0; i < h.length; i++) { 
    h[i].onclick = tabs; 
}