jQuery事件

最新推荐文章于 2024-09-01 13:33:34 发布

qq_52822043

最新推荐文章于 2024-09-01 13:33:34 发布

阅读量791

点赞数

文章标签：前端 javascript jquery

本文链接：https://blog.csdn.net/qq_52822043/article/details/123856751

版权

1. jQuery事件注册

单个事件注册

其他事件和原生基本一致。比如mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll等。

2. jQuery事件处理

1）事件处理 on() 绑定事件

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

events：一个或多个用空格分隔的事件类型，如click或keydown
selector：元素的子元素选择器
fn：回调函数，即绑定在元素身上的侦听函数

优势：

    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        .current {
            background-color: antiquewhite;
        }
    </style>
    <script src="jquery.min.js"></script>
</head>
<body>
    <div></div>
    <ul>
        <li>01</li>
        <li>02</li>
        <li>03</li>
        <li>04</li>
        <li>05</li>
        <li>06</li>
    </ul>
    <ol>

    </ol>
    <script>
        $(function() {
            //1.单个事件注册
            // $("div").click(function() {
            //     $(this).css("background", "red");
            // });
            // $("div").mouseenter(function() {
            //     $(this).css("background", "blue");
            // });
            // $("div").mouseleave(function() {
            //     $(this).css("background", "green");
            // });
            //2.事件注册on
            //可以绑定多个事件，多个事件处理多个程序
            // $("div").on({
            //     click: function() {
            //         $(this).css("background", "red");
            //     },
            //     mouseenter: function() {
            //         $(this).css("background", "blue");
            //     },
            //     mouseleave: function() {
            //         $(this).css("background", "green");
            //     }
            // });
            //事件处理程序相同
            $("div").on("mouseenter mouseleave", function() {
                $(this).toggleClass("current");
            });

            //3.on实现事件委托
            //click是绑定在ul身上的，但是触发的对象是li，冒泡把事件委托给ul
            $("ul").on("click", "li", function() {
                //点击了li之后，ul才会显示出警示框
                alert(11);
            })
            //4.on可以给未来动态创建的元素绑定事件
            //点击li之后无反应
            // $("ol li").click(function() {
            //     alert(11);
            // });
            //但是点击on绑定的事件，点击li就会弹出警示框
            $("ol").on("click", "li", function() {
                alert(11);
            })
            var li = $("<li>创建li</li>");
            $("ol").append(li);
        });
    </script>
</body>

结果为：

2）事件处理off()解绑事件

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

如果有的事件指向触发一次，可以使用one()来绑定事件。

    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
    <script src="jquery.min.js"></script>
    <script>
        $(function() {
            $("div").on({
                "click": function() {
                    console.log("点击");
                },
                "mouseover": function() {
                    console.log("鼠标经过");
                }
            });
            $("ul").on("click", "li", function() {
                alert(11);
            });
            //1.事件解绑off
            //解绑了div身上的所有事件
            // $("div").off();

            //只解除div身上的点击事件
            $("div").off("click");

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

            //2.one():只能触发事件一次
            $("p").one("click", function() {
                alert(11);
            });
        })
    </script>
</head>
<body>
    <div></div>
    <ul>
        <li>01</li>
        <li>02</li>
        <li>03</li>
    </ul>
    <p>ppp</p>
</body>

结果为：

3）自动触发事件trigger()

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

    <style>
        div {
            width: 200px;
            height: 200px;
            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").on("focus",function() {
                $(this).val("123");
            });
            //1.元素.事件():会触发元素的默认行为
            // $("div").click();
            //2.元素.trigger(“事件”):会触发元素的默认行为
            // $("div").trigger("click");
            //输入框会有光标闪烁
            // $("input").trigger("focus");
            //3.元素.triggerHandler(“事件”):不会触发元素的默认行为
            $("div").triggerHandler("click");
            //输入框不会有光标闪烁
            $("input").triggerHandler("focus");
        })
    </script>
</body>

结果为：

3. jQuery事件对象

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

阻止默认行为：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");
            });
            $("div").on("click", function(e) {
                console.log("点击了div");
                //阻止冒泡
                e.stopPropagation();
            });
        });

    </script>
</body>

结果为：

qq_52822043

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery事件

1. jQuery事件注册单个事件注册其他事件和原生基本一致。比如mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll等。2.jQuery事件处理1）事件处理 on() 绑定事件on()方法在匹配元素上绑定一个或多个事件的事件处理函数events：一个或多个用空格分隔的事件类型，如click或keydown selector：元素的子元素选择器 fn：回调函数，即绑定在元素身上的...
复制链接

扫一扫