HTML中on*属性绑定事件与addEventListener的差异及方案选择

为什么第二种on*属性绑定的方式没有生效 #

你写的onsubmit="doSomething()"没有主动把事件对象传入处理函数，导致函数内部的e是undefined，调用e.preventDefault()会直接抛出异常，自然无法阻止默认提交行为。

用HTML on*属性实现同等效果的方案 #

可以通过修改属性传参实现和addEventListener一样的阻止默认行为效果，有两种常用写法：

方案1：调用函数时主动传入event对象 #

<form onsubmit="doSomething(event)">
  <input type="submit"/>
</form>
<script>
  function doSomething(e) {
    e.preventDefault();
    console.log("Data received");
  }
</script>

方案2：直接在on*属性内返回false #

<form onsubmit="doSomething(); return false;">
  <input type="submit"/>
</form>
<script>
  function doSomething() {
    console.log("Data received");
  }
</script>

更推荐的事件绑定方式 #

绝大多数开发场景下更推荐使用addEventListener绑定事件，核心优势如下：

• 支持为同一个元素的同一个事件绑定多个处理函数，on*属性的方式会直接覆盖之前绑定的同事件处理逻辑
• 可以灵活控制事件触发的阶段（捕获/冒泡），也支持随时用removeEventListener解绑指定处理函数
• 能实现HTML结构和JS逻辑的完全分离，更利于大型项目的代码维护
• 处理函数默认就能拿到事件对象，不存在传参遗漏导致的异常问题

内容的提问来源于stack exchange，提问作者Green 绿色