So fügen Sie einen EventListener zu einer dynamisch erstellten Schaltfläche in einer übergeordneten ID in PURE JAVASCRIPT hinzu, Nein Jquery

Question

Angenommen, ich habe eine Elternunterteilung (ul) in HTML.

Darin werden viele dynamisch generierte listen (li) von JS-Code erzeugt, die eine Klasse & ein Attribut haben.

Ich möchte auf diese dynamisch generierten Listen Klickereignisse hinzufügen, um ihre jeweiligen Attribute in reinem Javascript abzurufen.

Dieser JQuery-Code funktioniert ->

$('#parentDivId').on('click','.dyanmicallyGeneratedChildClass',function(event){ 

    var child_attr = $(this).attr('dyanmicallyGeneratedChildClassAttr'); 

    console.log(child_attr); 

}); 

Kann jede alternative Lösung zu dem obigen Code in reinem Javascript da sein?

Answer 1

Was Sie in jQuery tun, ist Event Delegation. Sie können auf Stack-Überlauf

document.getElementById('division').addEventListener('click', function(event) { 
 
    var liElement = event.target; 
 
    \t if (liElement.className == 'dyanmicallyGeneratedChildClass') { 
 
     console.log(liElement.getAttribute('dyanmicallyGeneratedChildClassAttr')); 
 
    } 
 
});

<ul id="division"> 
 
    <li>bar </li> 
 
    <li>abc </li> 
 
    <li>123 </li> 
 
    <li class="dyanmicallyGeneratedChildClass" dyanmicallyGeneratedChildClassAttr="test">foo </li> 
 
</ul>