如何将给定的jQuery事件委托代码改写为原生Vanilla JS

你提供的jQuery代码实现的是文档级点击事件委托功能，监听全局点击事件，当点击元素匹配.btn类选择器时触发回调。

原jQuery代码 #

$(document).on('click', '.btn', function() {
  // 回调业务逻辑
})

等效原生JS写法 #

document.addEventListener('click', function(e) {
  // 匹配点击元素是否为.btn
  if (e.target.matches('.btn')) {
    // 此处写入原回调逻辑，e.target为触发事件的按钮元素，等同于jQuery中的$(this)指向
  }
})

场景适配说明 #

如果你的.btn元素内部包含子元素（比如图标、文字span），点击子元素时e.target会指向子元素而非.btn本身，可替换为以下写法兼容这种场景：

document.addEventListener('click', function(e) {
  const targetBtn = e.target.closest('.btn');
  if (targetBtn) {
    // 回调逻辑，targetBtn即为匹配到的.btn元素
  }
})

内容的提问来源于stack exchange，提问作者Rick