JS中的事件绑定、取消、兼容问题

一、事件绑定

1、on+事件类型

      var div = document.getElementById('dv')
      // 1 on+事件类型 (同一点击事件只能绑定一次，绑定多次以最后一次为准)
      div.onclick = () => {
        console.log('click1');
      }
      div.onclick = () => {
        console.log('click2');
      }

2、addEventListener(事件类型，事件处理函数)

// 2 addEventListener(事件类型，事件处理函数) 同一事件可绑定多个事件处理函数，从上往下执行
        // 低版本ie中不可用
      div.addEventListener('click',()=>{
        console.log('addEventListener1次');
      })
      div.addEventListener('click',()=>{
        console.log('addEventListener2次');
      })

3、attachEvent(on+事件类型，事件处理函数)

// 3 attachEvent(on+事件类型，事件处理函数)
        // 在ie11中，不支持
        // 在ie9/10中，支持，从上往下处理函数
        // 在ie8中，不支持也不反对，点击无反应
        // 在ie5/7中，支持，从下往上处理函数
      div.attachEvent('onclick',function(){
        console.log('attachEvent1次');
      })
      div.attachEvent('onclick',function(){
        console.log('attachEvent2次');
      })

4、封装兼容性的元素事件绑定

      // 封装兼容性的元素事件绑定
      function bindEvent(ele,type,fn) {
        try{
          ele.addEventListener(type,fn)
        }catch(error){
          ele.attachEvent('on'+type,fn)
        }
      }
      function f1(){console.log('f1');}
      function f2(){console.log('f2');}
      function f3(){console.log('f3');}
      function f4(){console.log('f4');}
      div.addEventListener('click',f1)
      div.addEventListener('click',f2)
      div.addEventListener('click',f3)
      div.addEventListener('click',f4)
      div.attachEvent('onclick',f3)
      div.attachEvent('onclick',f4)

5、取消绑定的事件函数

	  // 取消绑定的事件函数
      // removeEventListener(事件，处理函数)
      div.removeEventListener('click',f1) // 低版本ie不支持
      // detachEvent(事件，函数)
      div.detachEvent('onclick',f3)  // 低版本ie支持

6、取消绑定的事件函数（封装）

      // 封装兼容性的元素解除事件绑定
      function reEvent(ele,type,fn) {
        try{
          ele.removeEventListener(type,fn)
        }catch(error){
          ele.detachEvent('on'+type,fn)
        }
      }
      reEvent(div,'click',f1)

7、关于绑定的匿名事件函数