事件绑定、事件解绑

事件绑定：在 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级 事件绑定的事件处理函数') })

事件解绑

取消已经绑定好的事件

DOM 0级事件解绑

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

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

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() {})
        + 只能在函数内使用, 在函数外不能用