如何用原生JS实现jquery on绑定事件方法？

Question

如何实现像jquery那样的on绑定事件

<div class="btns">
      <span>上传</span>
      <input type="file">
</div>
jquery实现事件绑定，支持动态dom事件绑定

$("body").on("click",".btns",function(){
    
});
以上代码是jquery中使用的方法，点击span或者input都能触发点击事件，这个方法在原生JS中如何实现啊？我知道这个是事件委托实现的，但具体怎么写？知道的告诉一下，能提供代码最好。

Answer 1

这个就是事件捕获，用原生 JS 实现就是这样的

document.body.addEventListener('click',function(ev){
    if (ev.target.closest('.btns')) {
        //
    }
})

Answer 2

var body = document.getElementsByTagName('body')[0]
body.onclick = function (e) {
    console.log(e.target.nodeName);
}

Answer 3

递归查找，直到父级为止 比如

<ul id="list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

document.querySelector('#list').addEventListener('click', function(event) {
  let element = event.target;
  while (element && !element.matches('li') && !element.matches('#list')) {
    element = element.parentElement;
  }
  if (element && (element.matches('li') || element.matches('#list'))) {
    // 处理单击事件
  }
});