如何在PURE JAVASCRIPT中为父ID中的动态创建按钮添加EventListener，No Jquery

Question

假设我在HTML中有一个父分区（ul）。

在其中，许多动态生成的列表（li）由JS代码生成，具有类＆amp;属性。

我想在这些动态生成的列表中添加点击事件，以便在纯JavaScript中获取各自的属性。

此Jquery代码工作正常 - ＆gt;

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

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

   console.log(child_attr); 

});

在纯Javascript中可以有上述代码的替代解决方案吗？

Answer 1

你在jQuery中做的是事件委派。您可以使用以下方式执行相同操作而不使用jQuery

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;