事件绑定和事件解绑

事件绑定、事件解绑

事件绑定：在 JS 内有两种事件绑定方式

• DOM 0级 事件绑定

  使用 on 语法进行绑定

  语法: 事件源.on事件类型 = 事件处理函数

  特点: 同一个事件源的同一个事件类型只能绑定一个事件处理函数

• DOM 2级 事件绑定(事件侦听器/事件监听器)

  标准浏览器：

  语法: 事件源.addEventListener(‘事件类型’, 事件处理函数)

  特点: 同一个事件源的同一个事件类型可以绑定多个事件处理函数, 顺序绑定顺序执行

  IE 低版本

  语法: 事件源.attachEvent(‘on事件类型’, 事件处理函数)

  特点: 同一个事件源的同一个事件类型可以绑定多个事件处理函数, 顺序绑定倒序执行

var ele = document.querySelector('div')

    // 1. DOM 0级事件绑定
    // ele.onclick = function () { console.log('我是第一个 DOM 0级 事件绑定的事件处理函数') }
    // ele.onclick = function () { console.log('我是第二个 DOM 0级 事件绑定的事件处理函数') }

    // 2-1. 标准浏览器 DOM 2级 事件绑定
    // ele.addEventListener('click', function () { console.log('我是第一个 DOM 2级 事件绑定的事件处理函数') })
    // ele.addEventListener('click', function () { console.log('我是第二个 DOM 2级 事件绑定的事件处理函数') })

事件解绑

取消已经绑定好的事件

1. DOM 0级 事件解绑

语法: 事件源.on事件类型 = null

因为 赋值符号 覆盖的原因, 就可以解绑

2. DOM 2级 事件解绑 - 标准浏览器

   语法: 事件源.removeEventListener(‘事件类型’, 要解绑的事件处理函数)

   注意: DOM 2级事件如果你需要解绑, 那么在绑定的时候, 需要把函数单独书写, 以函数名的形式进行绑定

    var ele = document.querySelector('div')
    var btn = document.querySelector('button')
    // 绑定 DOM 0级 事件
       // ele.onclick = function () { console.log('我是一个事件处理函数') }
   
       // 标准浏览器绑定 DOM 2级 事件
       // 在事件绑定的时候, 实际上是把 a 函数和 b 函数的地址传递到了 addEventListener 内
       function b() { console.log('222222') }
       ele.addEventListener('click', function a() { console.log('111111') })
       ele.addEventListener('click', b)
   
       btn.onclick = function () {
         console.log('点击我准备解绑事件')
   
         // 执行解绑事件的代码
   
         // 1. DOM 0级 事件解绑
         // ele.onclick = null
   
         // 2. DOM 2级 事件解绑 - 标准浏览器
         // 解绑的时候, 把 c 函数的地址传递到 removeEventListener 内了
         // ele.removeEventListener('click', function c() { console.log('222222') })
         ele.removeEventListener('click', b)
   
         console.log('解绑事件的代码执行完毕')
       }
   
   

   补充

   声明式函数的函数名

   • 特指小括号前面那个名字

   • 可以再函数外使用, 可以在函数内使用

 函数表达式(赋值式函数/匿名函数) 的函数名
        + 特指小括号前面那个名字
          => 例子:
            -> var fn = function f() {}
            -> var obj = { fn: function f() {} }
            -> addEventListener(xxx, function f() {})
        + 只能在函数内使用, 在函数外不能用