js on和addEventListener的区别_js addeventlistener 与 on 的区别-优快云博客

本文链接：https://blog.youkuaiyun.com/woshidamimi0/article/details/89487920

本文探讨JavaScript中事件监听的进化，从最初的on方法到addEventListener。addEventListener不仅支持鼠标和键盘事件，还允许添加多个事件处理函数而不互相覆盖。通过第三个参数，可以设置事件响应方式，true为捕获，false为冒泡。对于IE8及更早版本浏览器的兼容性问题，文章也进行了说明。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Js事件监听处理从最开始的on逐渐衍化成了addEventListener.

如ele.onclick之类的事件处理变成了ele.addEventListener(‘事件名’,’响应函数’,事件响应方式)

addEventListener最初是监听鼠标如点击之类的事件，后来添加了对键盘按键事件的监听（演变历史）

看下面的代码，on会覆盖上一次的事件,也就是只弹出一次，addEventListener不会，所以会弹出多次，当然了，用addEventListener绑定的事件可以用removeEventListener来移除

注意绑定的时候最好使用具名函数而不是匿名函数。

addEventListener第三个参数可以选择是true或者false,默认是false.

true表示捕获方式响应，而false则是冒泡方式

ie8及更早浏览器不支持此方式

具体可以查看http://www.runoob.com/jsref/met-element-removeeventlistener.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div style="width:200px;height:200px; background: #999;" id="myOn"></div>
  <div style="width:200px;height:200px; background: skyblue;" id="myAdd"></div>
</body>

</html>
<script>
  let ele1 = document.getElementById('myOn')
  let ele2 = document.getElementById('myAdd')
  ele1.onclick = function () {
    alert('on 第一次')
  }
  ele1.onclick = function () {
    alert('on 第二次')
  }
  ele2.addEventListener('click', function () {
    alert('add 第一次')
  })
  ele2.addEventListener('click', function () {
    alert('add 第二次')
  })
  ele2.addEventListener('click', insertHtml)

  function insertHtml() {
    ele2.innerHTML = ele2.innerHTML + 'a'
    ele2.removeEventListener('click', insertHtml) //如果去掉这行，那么点击一次就会多加一个a
  }
</script>