comment obtenir événement onclick de li avec un div id

Question

si l'extrait de code est comme ceci:

<div id="test"> 

<div> 
<h3>First section</h3> 
<ul> 
    <li><a href="http://example.com">Item 1</a></li> 
    <li><a href="http://example.com">Item 2</a></li> 
    <li><a href="http://example.com">Item 3</a></li> 
</ul> 
</div> 

<div> 
<h3>Second section</h3> 
<ul> 
    <li><a href="http://example.com">Item 4</a></li> 
    <li><a href="http://example.com">Item 5</a></li> 
    <li><a href="http://example.com">Item 6</a></li> 
</ul> 
</div> 

</div> 

Je l'id "test" de la première div. comment puis-je obtenir le innerhtml des articles cliqués. comme alerter la réponse "item 1" quand on clique sur <li><a href="http://example.com">Item 1</a></li>. J'ai déjà essayé ce code suivant

var ul = document.getElementById("test").getElementsByTagName('ul')[0]; 
ul.onclick = function(event) { 
event = event || window.event; 
var target = event.target || event.srcElement; 
alert(target.getAttribute("href")); 
}; 

Ce produit ne fonctionne que pour la première section ul. J'ai besoin de la même chose pour N uls. Quelle sera la meilleure méthode pour cela. Merci d'avance.

Remarque: Dans mon projet, je ne peux pas utiliser jquery. que javascript ou YUI est pris en charge

Answer 1

itérer sur chaque ul et ajoutez le gestionnaire de clic pour comme

var uls = document.getElementById("test").getElementsByTagName('ul'); 
 
for (var i = 0; i < uls.length; i++) { 
 
    uls[i].addEventListener('click', clickHandler) 
 
} 
 

 
function clickHandler(event) { 
 
    event = event || window.event; 
 
    var target = event.target || event.srcElement; 
 
    alert(target.getAttribute("href")); 
 
}

<div id="test"> 
 

 
    <div> 
 
    <h3>First section</h3> 
 
    <ul> 
 
     <li><a href="http://example.com">Item 1</a></li> 
 
     <li><a href="http://example.com">Item 2</a></li> 
 
     <li><a href="http://example.com">Item 3</a></li> 
 
    </ul> 
 
    </div> 
 

 
    <div> 
 
    <h3>Second section</h3> 
 
    <ul> 
 
     <li><a href="http://example.com">Item 4</a></li> 
 
     <li><a href="http://example.com">Item 5</a></li> 
 
     <li><a href="http://example.com">Item 6</a></li> 
 
    </ul> 
 
    </div> 
 

 
</div>

Answer 2

Vous pouvez utiliser la délégation de l'événement pour obtenir le résultat escompté.

1. Bind un seul gestionnaire d'événement pour le parent et l'enfant de se event.target

//Get the object of the div#test 
 
var testDiv = document.getElementById('test'); 
 

 
//Bind onclick event for the div#test object 
 
testDiv.onclick = function(e) { 
 
    
 
    //Prevent the default href action (optional) 
 
    e.preventDefault(); 
 
    
 
    //Check whether the target element is an Anchor tag 
 
    if (e.target.nodeName == 'A') { 
 
    alert(e.target.innerHTML); 
 
    } 
 
    
 
}

<div id="test"> 
 

 
    <div> 
 
    <h3>First section</h3> 
 
    <ul> 
 
     <li><a href="http://example.com">Item 1</a> 
 
     </li> 
 
     <li><a href="http://example.com">Item 2</a> 
 
     </li> 
 
     <li><a href="http://example.com">Item 3</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 

 
    <div> 
 
    <h3>Second section</h3> 
 
    <ul> 
 
     <li><a href="http://example.com">Item 4</a> 
 
     </li> 
 
     <li><a href="http://example.com">Item 5</a> 
 
     </li> 
 
     <li><a href="http://example.com">Item 6</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 

 
</div>