03 - JQuery - 03.jQuery 事件

LLLuycyxL
已于 2023-11-19 10:42:23 修改
阅读量35
点赞数
分类专栏：前端文章标签： jquery
于 2023-09-18 22:02:06 首次发布
本文链接：https://blog.csdn.net/weixin_44683513/article/details/132998511
版权
前端专栏收录该内容
17 篇文章 0 订阅
订阅专栏
                    
                        
                    
                    jQuery 事件 
jQuery 事件注册 
单个事件注册 
element.事件(function() {})
 如 $("div").click(function() {事件处理程序})
其他事件和原生基本一致，如 mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll 等
 
jQuery 事件处理 
事件处理 on() 绑定事件 
on() 方法在匹配元素上绑定一 / 多个事件的事件处理函数
element.on(events,[selector],fn)
 1.events：一 / 多个用空格分隔的事件类型，如"click"或"keydown"
 2.selector：元素的子元素选择器
 3.fn：回调函数，即绑定在元素身上的侦听函数
on() 方法优势
 1.可以绑定多个事件，多个处理事件处理程序
 2.可以事件委派操作
 ①事件委派：把原来加给子元素身上的事件绑定在父元素身上，即把事件委派给父元素
 ②在此之前有 bind()、live()、delegate() 等方法来处理事件绑定，最新版本的用 on 替代
 3.动态创建的元素，on() 可以给未来动态创建的元素绑定事件，click() 没办法给动态生成的元素绑定事件
基础示例<head>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        .current {
            background-color: purple;
        }
    </style>
    <script src="jquery.min.js"></script>
</head>

<body>
    <div></div>
    <ul>
        <li>我们都是好孩子</li>
        <li>我们都是好孩子</li>
        <li>我们都是好孩子</li>
        <li>我们都是好孩子</li>
        <li>我们都是好孩子</li>
    </ul>
    <ol></ol>
    <script>
        $(function() {
            // 单个事件注册
            // $("div").click(function() {
            //     $(this).css("background", "purple");
            // });
            // $("div").mouseenter(function() {
            //     $(this).css("background", "skyblue");
            // });

            // 事件处理 on()
            // 优势一
            $("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");
            });

            // 优势二
            $("ul li").click();  // 隐式迭代给每一个 ul li 绑定 click() 事件，劣
            $("ul").on("click", "li", function() {  // click 绑定在 ul 上，li 触发。事件冒泡
                alert(11);
            });

            // 优势三
            // $("ol li").click(function() {  // 无效
            //     alert(11);
            // });
            $("ol").on("click", "li", function() {
                alert(11);
            });
            var li = $("<li>我是后来创建的</li>");
            $("ol").append(li);
        })
    </script>
</body>
 
微博发布效果示例<head lang="en">
    <style>
        * {
            margin: 0;
            padding: 0
        }
        ul {
            list-style: none
        }
        .box {
            width: 600px;
            margin: 100px auto;
            border: 1px solid #000;
            padding: 20px;
        }
        textarea {
            width: 450px;
            height: 160px;
            outline: none;
            resize: none;
        }
        ul {
            width: 450px;
            padding-left: 80px;
        }
        ul li {
            line-height: 25px;
            border-bottom: 1px dashed #cccccc;
            display: none;
        }
        input {
            float: right;
        }
        ul li a {
            float: right;
        }
    </style>
    <script src="jquery.min.js"></script>
    <script>
        $(function() {
            $(".btn").on("click", function() {
                var li = $("<li></li>");
                li.html($(".txt").val() + "<a href='javascript:;'> 删除</a>");
                $("ul").prepend(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="" class="txt" cols="30" rows="10"></textarea>
        <button class="btn">发布</button>
        <ul></ul>
    </div>
</body>
 
 
事件处理 off() 解绑事件 
off() 方法可移除通过 on() 方法添加的事件处理程序
$("p").off()【解绑p元素的所有事件处理程序】
$("p").off("click")【解绑p元素的点击事件】
$("ul").off("click", "li")【解绑事件委托】
如果有的事件只想触发一次，可使用 one() 来绑定事件
示例<head>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
    <script src="jquery.min.js"></script>
    <script>
    	$(function() {
    		$("div").on({
    			click: function() {
    				console.log("clicked");
    			},
    			mouseover: function() {
    				console.log("mouseovered");
    			}
    		});
    		// $("div").off();
    		// $("div").off("click");
    		
    		$("ul").on("click", "li", function() {
    			alert(11);
    		});
    		$("ul").off("click", "li");
    		
    		$("p").one("click", function() {  // 只触发一次
    			alert(11);
    		});	
    	})
    </script>
</head>

<body>
    <div></div>
    <ul>
        <li>我们都是好孩子</li>
        <li>我们都是好孩子</li>
        <li>我们都是好孩子</li>
    </ul>
    <p>我是屁</p>
</body>
 
 
自动触发事件 trigger() 
element.click()【元素.事件()】
element.trigger("type")【元素.trigger(“事件”)】
element.triggerHandler(type)【元素.triggerHandler(“事件”)】【不会触发元素的默认行为（默认行为：若表单获得了焦点，就有光标在里面闪动）】
示例<head>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
    <script src="jquery.min.js"></script>
    <script>
        $(function() {
            $("div").on("click", function() {
                alert(11);
            });
            $("input").on("focus", function() {
                $(this).val("你好吗");
            });

            // $("div").click();  // 法一
            // $("div").trigger("click");  // 法二
            // $("div").triggerHandler("click");  // 法三
            // $("input").trigger("focus");  // 法二，光标闪动
            $("input").triggerHandler("focus");  // 法三，光标不闪动
        })
    </script>
</head>

<body>
    <div></div>
    <input type="text">
</body>
 
 
jQuery 事件对象 
element.on(events, [selector], function(event) {})
阻止默认行为
 event.preventDefault() 或 return false
阻止冒泡
 event.stopPropagation()
事件被触发，就会有事件对象的产生
示例<head>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
    <script src="jquery.min.js"></script>
    <script>
        $(function() {
            $(document).on("click", function() {
                console.log("document clicked");
            });
            $("div").on("click", function(event) {
                console.log("div clicked");
                event.stopPropagation();  // 阻止冒泡
            });
        })
    </script>
</head>

<body>
    <div></div>
</body>
 

                