如何在Vanilla JS中触发CustomEvent？替代jQuery trigger方法

嘿，你其实已经摸对了原生JS触发自定义事件的核心方法——dispatchEvent()！问题出在事件监听的绑定时机上，咱们来理清楚：

你的代码问题点 #

你当前的逻辑是先调用addColor(elem)触发了madeRed事件，但这时候还没给元素绑定对应的addEventListener监听。就好比你先喊了一声，再找人来听，自然没人响应啦～

修正后的正确操作 #

1. 先绑定自定义事件监听 #

先给元素挂上madeRed事件的回调，确保事件触发时已有“接收器”：

var elem = document.querySelector('div');
// 先绑定监听，注意：回调参数是事件对象，不是元素哦！
elem.addEventListener('madeRed', function(event) {
  event.target.classList.add('color-do-changed');
}, false);

2. 再触发自定义事件 #

这时候调用你的addColor函数，里面的dispatchEvent就能被监听到了：

var addColor = function (elem) {
  elem.classList.add('red');
  // 创建自定义事件
  var event = new CustomEvent('madeRed');
  // 这就是原生JS里等效于jQuery trigger的核心操作
  elem.dispatchEvent(event);
};

// 现在调用，事件会被正常捕获
addColor(elem);

进阶：给自定义事件传递数据 #

如果需要在事件触发时携带额外信息，可以通过CustomEvent的detail字段传递：

var addColor = function (elem, targetColor) {
  elem.classList.add(targetColor);
  // 携带自定义数据
  var event = new CustomEvent('colorUpdated', {
    detail: {
      color: targetColor,
      changeTime: Date.now()
    }
  });
  elem.dispatchEvent(event);
};

// 监听时获取传递的数据
elem.addEventListener('colorUpdated', function(event) {
  console.log('新颜色:', event.detail.color);
  console.log('修改时间:', event.detail.changeTime);
  event.target.classList.add('color-do-changed');
}, false);

// 调用时传入自定义颜色
addColor(elem, 'blue');

这样就能完美实现类似jQuery中trigger的效果啦～

内容的提问来源于stack exchange，提问作者David C.