onmouseenter与mouseenter有何区别？为何无法搭配addEventListener使用？

onmouseenter 与 mouseenter 的核心区别 #

二者分属两套不同的DOM事件绑定体系，具体差异如下：

• 定义与用途不同
  mouseenter 是标准的事件类型名称，仅用于标识事件的具体类型；onmouseenter 是DOM元素内置的事件属性，用于存储对应事件触发时执行的回调函数。
• 绑定能力不同
  以mouseenter作为参数调用addEventListener时，可给同一个元素的同一事件绑定多个独立回调，所有回调会按绑定顺序依次触发；而onmouseenter作为属性赋值时，后赋值的回调会直接覆盖之前的属性值，同一时间仅能生效一个回调。
• 移除规则不同
  addEventListener绑定的事件需要调用removeEventListener，传入相同的事件名、回调引用才能完成移除；onmouseenter绑定的回调仅需将属性赋值为null即可直接移除。

addEventListener 无法使用onmouseenter作为参数的原因 #

addEventListener方法的第一个参数要求传入标准的事件类型名称，所有事件类型的官方命名都不带on前缀。on开头的命名仅用于DOM事件属性，不属于标准事件类型命名。当你传入onmouseenter时，浏览器会将其识别为一个不存在的自定义事件，自然无法触发绑定的回调逻辑。

代码示例 #

正确绑定写法

// addEventListener 方案，使用不带on前缀的事件名
const btn = document.querySelector('button')
btn.addEventListener('mouseenter', () => {
  console.log('鼠标进入元素')
})

// 事件属性绑定方案，使用onmouseenter属性
btn.onmouseenter = () => {
  console.log('鼠标进入元素')
}

错误绑定写法

// 无效，不存在名为onmouseenter的标准事件
btn.addEventListener('onmouseenter', () => {
  console.log('该回调永远不会触发')
})

内容的提问来源于stack exchange，提问作者cool-peaches