前端学习记录(十二) jquery中使用off()时的小问题

使用jquery中的on()方法绑定事件时，我习惯将要执行的匿名函数作为on的最后一个参数，比如按下按钮输出“hello”的功能：

        $(".btn").on("click",function(){
            console.log("hello");//hello
        })

使用off()解除绑定时，只有与之前的on()中所有参数完全匹配，绑定的事件处理函数才会被完全移除；

所以开始我认为以这种方式便可以移除on绑定的click功能：

        $(".btn").on("click",function(){
            console.log("hello");
        })
        $(".btn").off("click",function(){
            console.log("hello");
        })
        //这种方式无法移除

但这样仍然无法移除；

原来虽然on()与off()的第二个参数，也就是事件处理函数内容上完全相同，但由于函数是引用数据类型，两个匿名函数虽然函数体完全相同，但匿名函数作为on()和off()的参数时，实际上传入的是两个不同的地址，也就导致了on()与off()的第二个参数不完全相同，无法进行解绑;

正确的解绑方式如下：

        function foo(){
            console.log("hello");
        }
        $(".btn").on("click",foo)
        $(".btn").off("click",foo)
        //正确的解绑方式

将赋名的事件处理函数函数写在外部，再将此函数名作为参数，便可以做到前后参数完全一致

而使用原生的addEventListener()与removeEventListener()时也与此一样