javascript核心技术（三十六）原生JS和Jquery的移除事件操作

人亦已歌 · 发表于 2023-1-27 12:42:17

通过移除事件绑定语法可以动态的将元素上的事件移除掉。

本节涉及的知识点如下：

1、原生js的事件移除，分为行内绑定、js动态绑定和事件监听绑定。
2、jquery移除事件绑定语法。
3、jquery移除并绑定事件语法。

复制代码

1、移除行内绑定和js动态绑定事件语法

事件对象.事件类型="";

复制代码

<!DOCTYPE html>
<html>

<head>
        <meta charset="utf-8">
        <title>移除行内绑定和js动态绑定事件</title>
        <script src="./jquery.js"></script>
</head>
<style>
        #box1 {
                height: 200px;
                width: 200px;
                background-color: antiquewhite;
        }

        #box2 {
                height: 100px;
                width: 100px;
                background-color: rgb(151, 104, 43);
        }
        #box3 {
                height: 100px;
                width: 100px;
                background-color: rgb(126, 117, 105);
        }
</style>

<body class="" id="body">
        <div id="box1">
                <div id="box2">
                                        box2
                </div>
                <div id="box3">
                                        box3
                </div>
        </div>
        <script type="text/javascript">
                        // 原生移除动态或行内绑定事件
                        var box3 =document.getElementById('box3');
                        box3.onclick=function(){//给box3绑定了点击事件
                                        console.log('原生click事件');
                        }
                        box3.onclick="";//又将box2的点击事件移除
                        // 此时点击box3不会发生任何事
        </script>

</body>

</html>

2、移除监听绑定事件语法

事件对象.removeEventListener('事件类型',事件函数);

复制代码

<!DOCTYPE html>
<html>

<head>
        <meta charset="utf-8">
        <title>移除监听绑定事件</title>
        <script src="./jquery.js"></script>
</head>
<style>
        #box1 {
                height: 200px;
                width: 200px;
                background-color: antiquewhite;
        }

        #box2 {
                height: 100px;
                width: 100px;
                background-color: rgb(151, 104, 43);
        }
        #box3 {
                height: 100px;
                width: 100px;
                background-color: rgb(126, 117, 105);
        }
</style>

<body class="" id="body">
        <div id="box1">
                <div id="box2">
                                        box2
                </div>
                <div id="box3">
                                        box3
                </div>
        </div>
        <script type="text/javascript">
                        // 原生移除监听事件
                        //我们知道,通过addEventListener事件监听方式可以给同一个元素绑定多个相同的事件,它们都是执行.
                        //例如:为box3绑定两个点击事件
                        //所以在移除时，就需要指定到底除点击事件的哪个事件函数
                        function f(){//定义一个事件函数
                                        console.log('addEventListener click事件');
                        }
                        box3.addEventListener('click',f);//给box3的点击事件绑定了事件函数f
                        box3.removeEventListener('click',f);//移除了box的点击事件
                        //此时点击box3不会发生任何事
        </script>

</body>

</html>

3、jquery移除事件绑定语法

事件对象.off('事件类型');

复制代码

<!DOCTYPE html>
<html>

<head>
        <meta charset="utf-8">
        <title>jquery移除事件</title>
        <script src="./jquery.js"></script>
</head>
<style>
        #box1 {
                height: 200px;
                width: 200px;
                background-color: antiquewhite;
        }

        #box2 {
                height: 100px;
                width: 100px;
                background-color: rgb(151, 104, 43);
        }
        #box3 {
                height: 100px;
                width: 100px;
                background-color: rgb(126, 117, 105);
        }
</style>

<body class="" id="body">
        <div id="box1">
                <div id="box2">
                                        box2
                </div>
                <div id="box3">
                                        box3
                </div>
        </div>
        <script type="text/javascript">
                        // jq移除事件
                        $('#box2').click(function(){//给box2绑定了点击事件
                                console.log('box1');
                        });
                        $('#box2').off('click');//移除了box2的点击事件
                        // 此时点击box2什么也不会发生
        </script>

</body>

</html>

4、jquery移除并绑定事件语法

事件对象.off('移除的事件类型').on('重新绑定的事件类型',重新绑定的事件函数);

复制代码

<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8">
        <title>jquery移除并绑定事件</title>
        <script src="./jquery.js"></script>
</head>
<style>
        #box1 {
                height: 200px;
                width: 200px;
                background-color: antiquewhite;
        }

        #box2 {
                height: 100px;
                width: 100px;
                background-color: rgb(151, 104, 43);
        }
        #box3 {
                height: 100px;
                width: 100px;
                background-color: rgb(126, 117, 105);
        }
</style>

<body class="" id="body">
        <div id="box1">
                <div id="box2">
                                        box2
                </div>
                <div id="box3">
                                        box3
                </div>
        </div>
        <script type="text/javascript">
                        //jquery移除并绑定事件
                        $('#box2').click(function(){//给box2绑定了一个点击事件
                                        console.log('clickbox1');
                        });
                        $('#box2').mouseup(function(){//又给box2绑定了一个鼠标弹起事件
                                        console.log('mouseupbox1');
                        });
                        $('#box2').off('mouseup').on('mousedown',function(){//移除了鼠标弹起事件，并重新绑定了鼠标按下事件
                                        console.log('mousedownbox2');
                        });
                        // 此时点击box2先执行鼠标按下事件，再执行鼠标点击事件
        </script>
</body>
</html>