-jq-事件解绑-off()

最新推荐文章于 2022-11-11 22:18:05 发布

喵帕斯_喵太

最新推荐文章于 2022-11-11 22:18:05 发布

阅读量287

点赞数

分类专栏： jquery 文章标签： javascript

本文链接：https://blog.csdn.net/miaopasi_poi/article/details/116667644

版权

jquery 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

01-jq-事件解绑-`off()`

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery-1.12.4.min.js"></script>
</head>

<body>
    <ul>
        <li>隔壁老王1</li>
        <li>隔壁老王2</li>
        <li>隔壁老王3</li>
        <li>隔壁老王4</li>
        <li>隔壁老王5</li>
    </ul>
    <script>
        $(function () {
            // 事件委托：ON
            $('ul').on('click', 'li', function () {
                $(this).css({ backgroundColor: 'green' })
            })

            $('li').on({
                mouseover: function () {
                    $(this).css({ listStyle: 'none' })
                },
                mouseout: function () {
                    $(this).css({ fontSize: 28 })
                }
            })

            $('li').last().on('click', myClick)
            function myClick() {
                $(this).css({ width: 500 })
            }

            // 解绑事件
            // 1. off()：全部干掉事件：只能干掉给自己绑定的事件，委托给父元素的干不掉（如果非要干掉：干掉父元素的事件）
            // $('li').off()

            // 2. 干掉指定的事件类型：off('事件类型')
            // $('li').off('mouseout')

            // 3. 干掉指定的事件：off('事件类型',回调函数的名字)：有名回调
            $('li').off('click', myClick)

            // 可以用来做动画的节流阀


            // 一句话的总结：jq中所有的事件，都可以被解绑：off()
            // 元素.off()

        })
    </script>
</body>

</html>

注意：
// 解绑事件
// 1. off()：全部干掉事件：只能干掉给自己绑定的事件，委托给父元素的干不掉（如果非要干掉：干掉父元素的事件）
//2.干掉指定的事件类型：off(‘事件类型’)
//3.干掉指定的事件：off(‘事件类型’,回调函数的名字)：有名回调
//4可以用来做动画的节流阀
// jq中所有的事件，都可以被解绑：off()
//元素.off()