【jQuery学习】jQuery事件

阿大的冰棒

已于 2022-11-12 19:28:06 修改

阅读量139

点赞数

文章标签： jquery 学习 javascript

于 2022-11-10 21:12:39 首次发布

本文链接：https://blog.csdn.net/qq_53582888/article/details/127796282

版权

1 jQuery事件注册

单个事件注册

element.事件（function() {}）

2 事件处理 on()绑定事件

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

语法：

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

selector:元素的子元素选择器

 <div></div>
    <script>
        $(function(){
            $("div").on({
                click: function(){
                    $(this).css("background", "blue");
                },
                mouseenter: function(){
                    $(this).css("background", "purple");
                },
                mouseleave: function(){
                    $(this).css("background", "green");
                }

            })
            // 类似于hover
            $("div").on("mouseenter mouseleave", function(){

            })
        })
    </script>

on()方法可以实现事件委派。

事件委托原理：不是每个子节点单独设置事件监听器，而是事件监听器设置在父节点上，利用冒泡原理影响设置每个子节点。

这样只给父元素绑定事件，而不是给每一个孩子绑定事件，提高了代码的运行效率。

 // 绑定在ul身上，但是却是li触发事件
             $("ul").on("click", "li", function(){
                alert(11);
             })

可以给未来动态创建的元素绑定事件。

 $("ol").on("click", "li", function(){

                alert(22);

             })

             var li = $("<li>我是新创建的li</li>");

             $("ol").append(li);

案例：微博发布案例

<!DOCTYPE html>
<html lang="en">
<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="jquery.min.js"></script>
    <style>
        .box{
            width: 800px;
            /* height: 400px; */
            margin: 100px auto;
            padding-top: 50px;
            /* line-height: 400px; */
            text-align: center;
            border: 1px solid #000;
            box-sizing: border-box;
        }
        .txt{
            width: 600px;
            height: 250px;
            resize: none;
            outline: none;
        }
        ul{
            width: 450px;
            padding-left: 120px;
            text-align: left;
        }
        ul li{
            line-height: 25px;
            border-bottom: 1px dashed #ccc;
            display: none;
            list-style: none;
        }
        ul li a{
            float: right;
        }

    </style>
    <script>
        $(function(){
            $(".btn").on("click", function(){
                var li = $("<li></li>");
                li.html($(".txt").val() + "<a href = 'javascript:;'>删除</a>")
                $("ul").append(li);
                li.slideDown();
                $(".txt").val("");
            })
            $("ul").on("click", "a", function(){
                $(this).parent().slideUp(function(){
                    $(this).remove();
                })
            })
        })
    </script>
</head>
<body>
    <div class="box" id="weibo">
        <span>发布微博</span>
        <textarea name="" id="" cols="30" rows="10" class="txt"></textarea>
        <button class="btn">发布</button>
        <ul></ul>
    </div>
    
</body>
</html>

3 事件处理off()解绑事件

off()方法可以移除通过on()方法添加的事件处理程序。解除元素身上的所有事件。

$("div").off();//解绑div上的所有事件
$("div").off("click");//解绑div上的click事件
$("ul").off("click", "li");//解绑事件委托

4 one()绑定事件，但是只能触发一次

$("p").one("click", function(){
                alert(11);
             })

5 自动触发事件 trigger()

不会触发元素默认事件指的是，不点击input就会显示出来你好吗，且光标不在后面闪烁，前两种光标会在后面闪烁。

<div></div>
    <input type="text" name="" id="">
    <script>
        $(function(){
            $("div").on("click", function(){
                alert(11);
            })
            // 自动触发事件
            //元素.事件()
            $("div").click();
            //元素.trigger("事件")
            $("div").trigger("click");
            //元素.triggerHandler("事件") 不会触发元素的默认行为
            $("div").triggerHandler("click");

            $("input").on("click", function(){
                $(this).val("你好吗");
            })
            $("input").triggerHandler("click");
        })
    </script>

阿大的冰棒

关注

0
点赞
踩
0

收藏

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

on()方法在匹配元素上绑定一个或多个事件的事件处理函数。element.事件（function() {}）selector:元素的子元素选择器。2 事件处理 on()绑定事件。1 jQuery事件注册。
复制链接

扫一扫