JavaScript中自定义事件是否支持on{自定义事件名}的监听方式？

不行，elem.onoption_removed(function() { ... })这种方式仅适用于原生浏览器事件，自定义事件没法这么用。

原因很直接： #

原生事件的onxxx（比如onclick、onload）是DOM元素的预定义内置属性，浏览器已经提前把这些属性和对应的原生事件绑定好了，你只要给属性赋值一个函数，浏览器就会自动把它作为该事件的监听函数。

但自定义事件（比如你定义的option_removed）没有对应的预定义属性，你给DOM元素赋值onoption_removed，本质上只是给元素加了一个普通的自定义属性，浏览器根本不会把它和你通过dispatchEvent触发的自定义事件关联起来，自然不会触发这个函数。

正确的自定义事件监听方式 #

只能用addEventListener来监听自定义事件，示例代码如下：

// 你的自定义事件触发函数
function emitEvent() {
  const event = new CustomEvent("option_removed", {
    bubbles: true,
  });
  selectBox.dispatchEvent(event);
}

// 监听自定义事件
const selectBox = document.querySelector('#target-select');
selectBox.addEventListener('option_removed', function() {
  // 这里写事件处理逻辑
  console.log('option_removed 自定义事件触发了');
});

如果需要移除监听，也得用removeEventListener来对应操作。

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