Js native of events unbundling

removeEventListener

html

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

js

The first way (the wrong way)

    var btn = document.getElementById("btn");
    //绑定事件
    btn.addEventListener('click', function () {
        console.log('click btn')
    })
    //解除绑定，调试发现不可用
    btn.removeEventListener('click', function () {
        console.log('remove')
    })

The second way (the right way)

    var btn = document.getElementById("btn");
    function btnHandler() {
        console.log('click btn')
    }
    //绑定事件
    btn.addEventListener('click', btnHandler)
    //解除绑定(可以成功，第一种不成功是因为回调是两个不同的函数，指向了不同的内存，第二种把回调定义到外面，两次的回调是同一个函数)
    btn.removeEventListener('click', btnHandler)