Verwendung addEventListener ersetzen jedes onClick

Question

Ich habe ungeordnete Listen unten für Früchte, Tiere, Bäume .... über 100 Tasten mit gleicher Klasse:

<ul> 
    <li><button class="bb" value="apple" onClick="aJax(value)">Apple</button></li> 
    <li>Banana 
     <ul> 
     <li><button class="bb" value="green_banana" onClick="aJax(value)">Green_banana</button></li> 
     <li><button class="bb" value="yellow_banana" onClick="aJax(value)">Yellow Banana</button></li> 
     </ul> 
    </li> 
    <li><button class="bb" value="cherry" onClick="aJax(value)">Cherry</button></li> 
    <li><button class="bb" value="cow..................and more.... 
</ul> 

Wenn geklickt, ich will Ajax passieren Wert zurückgeben Daten aus mySql:

<script> 
    function aJax(value) 
     xmlhttp = new XMLHttpRequest(); 
     xmlhttp.open("GET","some_page.php?q="+value,true); 
     xmlhttp.send(); 
     xmlhttp.onreadystatechange = function() { 
     if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
     document.getElementById("some_id").innerHTML = xmlhttp.responseText;} 
               } 
       } 
    </script> 

Ist es möglich, über addEventListener in meinem Fall zu verwenden, um jede onClick zu ersetzen? Wie mache ich es, wenn ich den JS-Code auf die Kopfzeile setzen möchte? Pls Hilfe, ich brauche es in nativen JS. Vielen Dank.

Answer 1

Ja, Sie können es tun:

var bbs = document.getElementsByClassName("bb"); 
 
for(var i =0; i< bbs.length; i++){ 
 
    bbs[i].addEventListener('click', function(){ 
 
    var attr = this.value; 
 
    console.log(attr); 
 
    }); 
 
}

<ul> 
 
    <li><button class="bb" value="apple" >Apple</button></li> 
 
    <li><button class="bb" value="banana">Banana</button></li> 
 
    <li><button class="bb" value="cherry">Cherry</button></li> 
 
</ul>

Statt console.log(attr); Sie Ihre benutzerdefinierte Funktion

Answer 2

versuchen, dass:

window.addEventListener('load' , function() { 

    var list = document.querySelectorAll('ul > li > button'); 

    for (var i = 0 , l = list.length ; i < l ; i++) { 

     list[ i ].addEventListener('click' , function() { 
      aJax(this.value); 
     }); 

    } 

}); 

Answer 3

die einfachste Art und Weise nennen (keine Schleifen benötigt)

var container = document.querySelector("ul"); 
 
container.addEventListener("click", doSomething, false); 
 
    
 
function doSomething(e) { 
 
    if (e.target !== e.currentTarget) { 
 
     var clickedItem = e.target.value; 
 
     console.log(clickedItem); 
 
    } 
 
    e.stopPropagation(); 
 
}

<ul> 
 
    <li><button class="bb" value="apple" >Apple</button></li> 
 
    <li><button class="bb" value="banana">Banana</button></li> 
 
    <li><button class="bb" value="cherry">Cherry</button></li> 
 
</ul>

Überprüfung dieses ehrfürchtige Artikel, ich bin ziemlich sicher, dass es ist, was Sie suchen Handling Events for Many Elements

Answer 4

Während andere Antworten richtig sind, wenn Ihre Liste ist lang, könnten Sie delegieren der Klick auf das ul Element:

function logValue(evt){ 
 
    let target = evt.target; 
 
    // only console.log if the click target has class "bb" 
 
    if(target.classList.contains("bb")){ 
 
    console.log(target.value) 
 
    } 
 
} 
 

 
// wait for the document to be loaded 
 
window.addEventListener("load",()=>{ 
 
    let list = document.querySelector(".my-list"); 
 
    if(list){ 
 
    //delegate click handler to the <ul> element 
 
    list.addEventListener("click", logValue); 
 
    } 
 
});

<ul class="my-list"> 
 
    <li><button class="bb" value="apple">Apple</button></li> 
 
    <li>Banana 
 
    <ul> 
 
     <li><button class="bb" value="green_banana">Green_banana</button></li> 
 
     <li><button class="bb" value="yellow_banana">Yellow Banana</button></li> 
 
    </ul> 
 
    </li> 
 
    <li><button class="bb" value="cherry">Cherry</button></li> 
 
</ul>