将事件附加到尚未创建的元素

Question

我在javascript上遇到了这个问题，其中元素尚未创建或将来要创建，并且存在要为该元素绑定的事件，在jQuery中，我可以做到

$(function(){
$(document).on('click','.mybtn',function(){
  alert('button: '+$(this).index());
});

$('#create-sample-btn').click(function(){
$('#btn-container').append('<button class="mybtn">Button</button>');
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="btn-container"></div>
<button id="create-sample-btn">Create Sample Btn</button>

有任何帮助，关于如何使用纯JavaScript实现该想法的想法吗？

原生JavaScript中的$(document).on(..等效项是什么？

Answer 1

您可以使用事件委托，将事件附加到父组件上，并且当事件发生在元素上时，它将冒泡并被父组件捕获。