如何将jQuery的on事件绑定方法转换为原生JavaScript实现

原生实现代码 #

document.addEventListener('click', function(e) {
  const eyeElement = e.target.closest('.eye');
  if (eyeElement) {
    eyeElement.classList.toggle('on');
  }
});

对应逻辑说明 #

• 采用事件委托机制，和你原有的jQuery$(document).on逻辑完全相同，无需提前获取.eye元素，所有动态生成的.eye元素都能正常触发点击事件
• e.target.closest('.eye')会从点击触发的元素向上查找最近的带.eye类的元素，兼容点击.eye内部子元素的场景，比直接判断点击元素的类名更稳妥
• classList.toggle('on')原生API直接实现类名切换，等效于你原有if判断加删类的逻辑，不需要额外写条件分支
• 性能优化建议：如果.eye元素都存在于某个不会被动态销毁的固定父容器内，可以把事件绑定到这个父容器上，减少事件冒泡的层级，提升运行效率

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