addEventListener在一个节点上添加多个相同的事件

<button id='btn'>attachEvent</button>   

 window.onload=function(){

   var Obtn = document.getElementById('btn');

        Obtn.onclick=function(){
            alert(1)
        }
        // 只兼容IE
        // Obtn.attachEvent('onclick',function(){
        //     alert(1)
        // })

        
        function add(){
            alert(2)
        }
      //绑定事件  三个参数最后一个参数默认为false  兼容：firefox、chrome、IE、safari、opera；不兼容IE 7 8

       Obtn.addEventListener('click',add,false) 

       //解除事件绑定 
       //Obtn.removeEventListener('click',add,false) 
}

 removeEventListener使用

  const list = document.querySelector('ul');
  const buttons = list.querySelectorAll('button');
  buttons.forEach((button) => {
    button.addEventListener('click', function fun(evt) {
      console.log(evt.target.parentNode)
      const target = evt.target;
      target.parentNode.className = 'completed';
      setTimeout(() => {
        list.removeChild(target.parentNode);
      }, 2000);
      target.removeEventListener('click', fun); // 防止重复点击 上面点击完就移除函数 
    })
  });

formEl.addEventListener('submit', function submitData(evt) {
  fetch('path/to/url', {
    method: 'POST',
    body: JSON.stringify(formData),
    ...
  });
  formEl.removeEventListener('submit', submitData); // 防止重复提交
})

还可以把过程抽象出来

  function once(fn) {
    return function (...arge) {
      if (fn) {
        let res = fn.apply(this, arge)
        fn = null
        return res
      }
    }
  }
  const list = document.querySelector('ul');
  const buttons = document.querySelectorAll('button')
  buttons.forEach((btn) => {
    btn.addEventListener('click', once((evt) => {
      // debugger
      let target = evt.target
      target.parentNode.className = 'completed'
      setTimeout(() => {
        list.removeChild(target.parentNode)
      }, 1000)
      // target.disabled = true;
    }))
  })

和单独添加onclick事件的区别

demo如下，得出结果onclick只出现一次alert：我是click2【很正常第一次click事件会被第二次所覆盖】，

但是addEventListener却可以先后运行，不会被覆盖【正如：它允许给一个事件注册多个监听器。

在使用DHTML库或者 Mozilla extensions 

这样需要保证能够和其他的库或者差距并存的时候非常有用。】

<ul id="color-list">
  <li id="addEvent">red</li>
  <li id="on_click">yellow</li>
</ul>

<script type="text/javascript">
  (function () {
    var addEvent = document.getElementById("addEvent");
    addEvent.addEventListener("click", function () {
      alert("我是addEvent1");
    }, false);
    addEvent.addEventListener("click", function () {
      alert("我是addEvent2");
    }, false);
    var addEvent = document.getElementById("on_click");

    on_click.onclick = function () {
      alert("我是click1");
    }
    on_click.onclick = function () {
      alert("我是click2");
    }
  })();
</script>