如何为同一元素创建多个互不覆盖的点击事件？

直接给onclick属性赋值会覆盖之前的事件，因为onclick本质是单一属性，同一时间只能保存一个函数引用。要实现多个点击事件共存，应该使用**addEventListener**方法绑定事件——它支持为同一元素的同一事件类型添加多个回调函数，所有绑定的函数会按触发顺序依次执行。

修改后的代码示例 #

第一个JS文件：

document.addEventListener('click', (e) => {
  const target = e.target;
  if (target && target.matches('[data-toggle-modal]')) {
    showModal();
  }
});

第二个JS文件：

document.addEventListener('click', () => {
  console.log('test');
});

额外说明 #

如果后续需要移除某个绑定的事件，不能用匿名函数（无法引用到它），要把回调定义为命名函数：

// 定义命名回调
function handleModalTrigger(e) {
  const target = e.target;
  if (target && target.matches('[data-toggle-modal]')) {
    showModal();
  }
}

// 绑定事件
document.addEventListener('click', handleModalTrigger);

// 移除事件（需要时调用）
// document.removeEventListener('click', handleModalTrigger);

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