js on和addEventListener的区别

超、凢脫俗 2022-02-15 08:48 230阅读 0赞

### 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][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>

[http_www.runoob.com_jsref_met-element-removeeventlistener.html]: http://www.runoob.com/jsref/met-element-removeeventlistener.html