【jQuery】jQuery事件

最新推荐文章于 2024-07-30 10:56:44 发布

早睡早起长头发

最新推荐文章于 2024-07-30 10:56:44 发布

阅读量1.1k

点赞数

分类专栏： jQuery 文章标签： jquery javascript 前端 Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_51481135/article/details/128604757

版权

jQuery 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

一、jQuery 事件注册

- 单个事件注册

element.事件(function(){}); //例如：$('div').click(function(){事件处理程序})

其他事件和原生基本一致。

比如 mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll 等。

    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
    <script src="../jquery.min.js"></script>
</head>

<body>
    <div></div>

    <script>
        $(function () {
            // 1. 单个事件注册——缺点：每个事件要分开写——利用事件处理on绑定事件
            // 鼠标单击div变紫色
            $("div").click(function() {
                $(this).css("background", "purple");
            });
            // 鼠标经过div变天蓝色
            $("div").mouseenter(function() {
                $(this).css("background", "skyblue");
            });
        })
    </script>
</body>

二、 jQuery 事件处理

- on() 绑定事件

on() 方法在匹配元素上绑定一个或多个事件的事件处理函数

element.on(events,[selector],fn);

events：一个或多个用空格分隔的事件类型，如 "click" 或 "keydown" 。

selector：元素的子元素选择器。

fn：回调函数，即绑定在元素身上的侦听函数。

1.1 on() 方法优势一

可以绑定多个事件，多个处理事件处理程序。

$('div').on({
事件1: function(){},
事件2: function(){},
事件3: function(){}
});

如果事件处理程序相同，那么可以采取这种形式：

$('div').on('事件1 事件2', function() {
$(this).toggleClass('current');
});

    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }

        .current {
            background-color: purple;
        }
    </style>
    <script src="../jquery.min.js"></script>
</head>

<body>
    <div></div>

    <script>
        $(function () {
            // 2. 事件处理on

            // (1) on可以绑定1个或者多个事件处理程序
            // $("div").on({
            //     // 鼠标经过事件
            //     mouseenter: function() {
            //         $(this).css("background", "skyblue");
            //     },
            //     // 鼠标单击事件
            //     click: function() {
            //         $(this).css("background", "purple");
            //     },
            //     // 鼠标离开事件
            //     mouseleave: function() {
            //         $(this).css("background", "blue");
            //     }
            // });

            // 如果事件处理程序相同，那么可以采取这种形式：
            $("div").on("mouseenter mouseleave", function () {
                $(this).toggleClass("current");
            });
        })
    </script>
</body>

1.2 on() 方法优势二

可以事件委派操作。

事件委派：把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素。

$(父元素').on('事件', '子元素', function() {
……
});

事件绑定在父元素上，但触发对象是子元素。（点击子元素后会产生事件冒泡到父元素，而父元素上有绑定的事件）

注意：在此之前有 bind()，live()， delegate() 等方法来处理事件绑定或者事件委派，最新版本的请用 on 替代他们。

    <script src="../jquery.min.js"></script>
</head>

<body>
    <ul>
        <li>我们都是好孩子</li>
        <li>我们都是好孩子</li>
        <li>我们都是好孩子</li>
        <li>我们都是好孩子</li>
        <li>我们都是好孩子</li>
    </ul>

    <script>
        $(function () {
            // 2. 事件处理on

            // (2) on可以实现事件委托（委派）:把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素

            // 原方法--隐式迭代:会给ul中的每个li添加事件
            // $("ul li").click();

            // on事件委托:click 是绑定在ul 身上的，但是 触发的对象是 ul 里面的小li
            $("ul").on("click", "li", function () {
                alert(11);
            });
        })
    </script>
</body>

1.3 on() 方法优势三

动态创建的元素，click() 没有办法绑定事件，on() 可以给动态生成的元素绑定事件

$('父元素').on('事件','子元素',function(){
alert("俺可以给动态生成的元素绑定事件")
});

$('父元素').append($('<p>我是动态创建的p</p>'));

    <script src="../jquery.min.js"></script>
</head>

<body>
    <ol></ol>

    <script>
        $(function () {
            // 2. 事件处理on

            // (3) on可以给未来动态创建的元素绑定事件

            // 原方法--缺点:不能给未来动态创建的元素绑定事件
            // $("ol li").click(function() {
            //     alert(11);
            // })
            // var li = $("<li>我是后来创建的</li>");
            // $("ol").append(li);

            // on() 可以给动态生成的元素绑定事件:
            $("ol").on("click", "li", function () {
                alert(11);
            })
            var li = $("<li>我是后来创建的</li>");
            $("ol").append(li);
        })
    </script>
</body>

2. off() 解绑事件

off() 方法可以移除通过 on() 方法添加的事件处理程序。

$("p").off(); // 解绑p元素所有事件处理程序

$("p").off( "事件"); // 解绑p元素上面的点击事件后面的 foo 是侦听函数名

$("ul").off("事件", "li"); // 解绑事件委托

    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
    <script src="../jquery.min.js"></script>
    
</head>

<body>
    <div></div>
    <ul>
        <li>我们都是好孩子</li>
        <li>我们都是好孩子</li>
        <li>我们都是好孩子</li>
    </ul>

    <script>
        $(function () {
            // on绑定事件
            $("div").on({
                click: function () {
                    console.log("我点击了");
                },
                mouseover: function () {
                    console.log('我鼠标经过了');
                }
            });
            // 事件委托
            $("ul").on("click", "li", function () {
                alert(11);
            });


            // 事件解绑 off 
            // (1) 这个是解除了div身上的所有事件
            // $("div").off();  
            // (2) 这个是解除了div身上的指定事件
            $("div").off("click");
            // (3) 解绑事件委托
            $("ul").off("click", "li");
        })
    </script>
</body>

3. one() 绑定事件

如果有的事件只想触发一次，可以使用 one() 来绑定事件，使用方法和on()基本一致。

element.one(events,[selector],fn);

    <script src="../jquery.min.js"></script>
</head>

<body>
    <!-- 希望p标签只能点击一次 -->
    <p>我是屁</p>

    <script>
        $(function () {
            // one() 但是它只能触发事件一次
            $("p").one("click", function () {
                alert(11);
            })
        })
    </script>
</body>

4.自动触发事件 trigger()

有些事件希望自动触发, 比如轮播图自动播放功能跟点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件，不必鼠标点击触发。

element.click(); // 第一种简写形式

element.trigger("事件"); // 第二种自动触发模式

element.triggerHandler(事件); // 第三种自动触发模式

triggerHandler 模式不会触发元素的默认行为，这是和前面两种的区别。

    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
    <script src="../jquery.min.js"></script>
</head>

<body>
    <div></div>
    <!-- 文本框有默认行为:只要获得焦点,就会有光标闪烁 -->
    <input type="text">

    <script>
        $(function () {
            $("div").on("click", function () {
                alert(11);
            });
            // Input获得焦点事件,值就显示"你好吗"
            $("input").on("focus", function () {
                $(this).val("你好吗");
            });

            // 自动触发事件
            // 1. 元素.事件()
            // $("div").click();会触发元素的默认行为
            // 2. 元素.trigger("事件")
            // $("div").trigger("click");会触发元素的默认行为
            $("input").trigger("focus");
            // 3. 元素.triggerHandler("事件") 就是不会触发元素的默认行为
            $("div").triggerHandler("click");
            // $("input").triggerHandler("focus");
        });
    </script>
</body>

三、jQuery事件对象

事件被触发，就会有事件对象的产生。

element.on(events,[selector],function( event) {}); //event就是事件对象

事件对象操作：

阻止默认行为：event.preventDefault() 或者 return false

阻止冒泡： event.stopPropagation()

    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
    <script src="../jquery.min.js"></script>
</head>

<body>
    <div></div>

    <script>
        $(function () {
            $(document).on("click", function () {
                console.log("点击了document");
            })

            // event就是事件对象
            $("div").on("click", function (event) {
                // console.log(event);
                console.log("点击了div"); //点击idv,会冒泡到document,document也有点击事件
                event.stopPropagation(); //事件对象可以阻止冒泡
            })
        })
    </script>
</body>