jQuery基础之事件

Love The Way You Lie 2024-04-17 20:24 65阅读 0赞

## 相关知识点导航（按自己理解的来） ##

1, jQuery事件绑定  
        1.1，eventName(fn);  
        1.2，on(eventName, fn);

2，jQuery事件移除=>off()

3，jQuery事件冒泡和默认行为  
      1.什么是事件冒泡?  
            就是给一个元素及其父元素设置一个事件时，当执行子元素的同时，父元素事件也会触发  
      2.如何阻止事件冒泡  
            return false;  
            event.preventDefault();

3.什么是默认行为?  
            顾名思义，默认执行的行为，如‘a’这个标签点击跳转到另一个页面，这就是默认行为

4.如何阻止默认行为  
            return false;  
            event.preventDefault();

如果想同时阻止事件冒泡和阻止元素默认行为，可以在事件函数中返回 false 来代替调用 stopPropagation() 和 preventDefault() 方法。

4，jQuery事件自动触发  
      trigger: 如果利用trigger自动触发事件,会触发事件冒泡  
                   如果利用trigger自动触发事件,会触发默认行为  
      triggerHandler: 如果利用triggerHandler自动触发事件, 不会触发事件冒泡  
                                  如果利用triggerHandler自动触发事件, 不会触发默认行为

5，自定义事件

6，事件命名空间

7，事件委托  
      $(“ul”).delegate(“li”, “click”, function () \{\}）

8，移入移出事件  
mouseover/mouseout事件, 子元素被移入移出也会触发父元素的事件  
mouseenter/mouseleave事件, 子元素被移入移出不会触发父元素的事件  
hover事件是方法触发 mouseenter 和 mouseleave 事件的结合体。

### 1,jQuery事件绑定 ###

jQuery中有两种绑定事件方式  
1.1.eventName(fn);  
编码效率略高/ 部分事件jQuery没有实现,所以不能添加

1.2.on(eventName, fn);  
编码效率略低/ 所有js事件都可以添加

注意点:  
可以添加多个相同或者不同类型的事件,不会覆盖,以下实例中，两种方式产生的效果相同

$(function () { 
                // 编写jQuery相关代码
                $("button").click(function () { 
                    alert("hello lnj");
                });
                $("button").click(function () { 
                    alert("hello 123");
                });
                $("button").mouseleave(function () { 
                    alert("hello mouseleave");
                });
                $("button").mouseenter(function () { 
                    alert("hello mouseenter");
                });
    			
                $("button").on("click", function () { 
                    alert("hello click1");
                });
                $("button").on("click", function () { 
                    alert("hello click2");
                });
                $("button").on("mouseleave", function () { 
                    alert("hello mouseleave");
                });
                $("button").on("mouseenter", function () { 
                    alert("hello mouseenter");
                });
            });

### 2,jQuery事件移除=>off() ###

$(function () { 
                function test1() { 
                    alert("hello lnj");
                }
                function test2() { 
                    alert("hello 123");
                }
                // 编写jQuery相关代码
                $("button").click(test1);
                $("button").click(test2);
                $("button").mouseleave(function () { 
                    alert("hello mouseleave");
                });
                $("button").mouseenter(function () { 
                    alert("hello mouseenter");
                });
    
                // off方法如果不传递参数, 会移除所有的事件
                // $("button").off();
                
                // off方法如果传递一个参数, 会移除所有指定类型的事件
                // $("button").off("click");
                
                // off方法如果传递两个参数, 会移除所有指定类型的指定事件
                $("button").off("click", test1);
            });

### 3,jQuery事件冒泡和默认行为 ###

1.什么是事件冒泡?  
就是给一个元素及其父元素设置一个事件时，当执行子元素的同时，父元素事件也会触发

2.如何阻止事件冒泡  
return false;  
event.preventDefault();

3.什么是默认行为?  
顾名思义，默认执行的行为，如‘a’这个标签点击跳转到另一个页面，这就是默认行为

4.如何阻止默认行为  
return false;  
event.preventDefault();  
如果想同时阻止事件冒泡和阻止元素默认行为，可以在事件函数中返回 false 来代替调用 stopPropagation() 和 preventDefault() 方法。

$(function () { 
                // 编写jQuery相关代码
                jQuery阻止冒泡
                $(".son").click(function (event) { 
                    alert("son");
                    // return false;
                    event.stopPropagation();
                });
                $(".father").click(function () { 
                    alert("father");
                });
                
               jQuery阻止默认行为
                $("a").click(function (event) { 
                    alert("弹出注册框");
                    // return false;//阻止提交按钮的默认行为（提交表单）和事件冒泡
                    event.preventDefault();	
                });
            });

### 4，事件自动触发 ###

事件自动触发有两种  
trigger: 如果利用trigger自动触发事件,会触发事件冒泡  
             如果利用trigger自动触发事件,会触发默认行为

triggerHandler: 如果利用triggerHandler自动触发事件, 不会触发事件冒泡  
                            如果利用triggerHandler自动触发事件, 不会触发默认行为

$(function () { 
                // 编写jQuery相关代码
                $(".son").click(function (event) { 
                    alert("son");
                });
    
                $(".father").click(function () { 
                    alert("father");
                });
                // $(".father").trigger("click");
                // $(".father").triggerHandler("click");
    
                /* trigger: 如果利用trigger自动触发事件,会触发事件冒泡 triggerHandler: 如果利用triggerHandler自动触发事件, 不会触发事件冒泡 */
                // $(".son").trigger("click");
                // $(".son").triggerHandler("click");
    
                $("input[type='submit']").click(function () { 
                    alert("submit");
                });
    
                /* trigger: 如果利用trigger自动触发事件,会触发默认行为 triggerHandler: 如果利用triggerHandler自动触发事件, 不会触发默认行为 */
                // $("input[type='submit']").trigger("click");
                // $("input[type='submit']").triggerHandler("click");
    
    
                $("span").click(function () { 
                    alert("a");
                });
                // $("a").triggerHandler("click");
                $("span").trigger("click");
            });

### 5,自定义事件 ###

想要自定义事件, 必须满足两个条件  
1.事件必须是通过on绑定的  
2.事件必须通过trigger来触发

$(function () { 
                // 编写jQuery相关代码
                // $(".son").myClick(function (event) { 
                // alert("son");
                // });
              
                $(".son").on("myClick", function () { 
                    alert("son");
                });
                $(".son").triggerHandler("myClick");
            });

### 6,jQuery事件命名空间 ###

其实和自定义事件一样，不过区分的人，便于开发

利用trigger触发子元素带命名空间的事件, 那么父元素带相同命名空间的事件也会被触发. 而父元素没有命名空间的事件不会被触发  
利用trigger触发子元素不带命名空间的事件,那么子元素所有相同类型的事件和父元素所有相同类型的事件都会被触发

$(function () { 
    
                /* 想要事件的命名空间有效,必须满足两个条件 1.事件是通过on来绑定的 2.通过trigger触发事件 */
    
                $(".father").on("click.ls", function () { 
                    alert("father click1");
                });
                $(".father").on("click", function () { 
                    alert("father click2");
                });
                $(".son").on("click.ls", function () { 
                    alert("son click1");
                });
                /* 利用trigger触发子元素带命名空间的事件, 那么父元素带相同命名空间的事件也会被触发. 而父元素没有命名空间的事件不会被触发 利用trigger触发子元素不带命名空间的事件,那么子元素所有相同类型的事件和父元素所有相同类型的事件都会被触发 */
                // $(".son").trigger("click.ls");
                $(".son").trigger("click");		//都会触发
            });

### 7,jquery事件委托 ###

$(“ul”).delegate(“li”, “click”, function () \{\}）

1.什么是事件委托?  
请别人帮忙做事情, 然后将做完的结果反馈给我们

由于一般的渲染是直接整个页面渲染的，产出的后果就是 在页面生成之后 ，又生成 的元素就没法选中，因此需要用到事件委托，就是在父元素上开始寻找，由于冒泡，就能在父元素上找到新产生的元素，简单的理解就是坑爹，把自己做不了的事交给老爹办

弹出层练习代码如下

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg_size_16_color_FFFFFF_t_70]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>32-jQuery事件委托练习</title>
        <style>
            *{ 
                margin: 0;
                padding: 0;
            }
            html,body{ 
                width: 100%;
                height: 100%;
            }
            .mask{ 
                width: 100%;
                height: 100%;
                background: rgba(0,0,0,0.5);
                position: fixed;
                top: 0;
                left: 0;
            }
            .login{ 
                width: 522px;
                height: 290px;
                margin: 100px auto;
                position: relative;
            }
            .login>span{ 
                width: 50px;
                height: 50px;
                /*background: red;*/
                position: absolute;
                top: 0;
                right: 0;
            }
        </style>
        <script src="js/jquery-1.12.4.js"></script>
        <script>
            $(function () { 
                // 编写jQuery相关代码
                $("a").click(function () { 
                    var $mask = $("<div class=\"mask\">\n" +
                        " <div class=\"login\">\n" +
                        " <img src=\"images/login.png\" alt=\"\">\n" +
                        " <span></span>\n" +
                        " </div>\n" +
                        "</div>");
                    // 添加蒙版
                    $("body").append($mask);
                    $("body").delegate(".login>span", "click", function () { 
                        // 移除蒙版
                        $mask.remove();
                    });
                    return false;
                });
            });
        </script>
    </head>
    <body>
    
        
            
            
        
    
    <a href="http://www.baidu.com">点击登录</a>
    <div>这里有很多文字</div>
    </body>
    </html>

### 8，jQuery移入移出事件 ###

mouseover/mouseout事件, 子元素被移入移出也会触发父元素的事件

mouseenter/mouseleave事件, 子元素被移入移出不会触发父元素的事件

hover事件是方法触发 mouseenter 和 mouseleave 事件的结合体。

$(function () { 
                // 编写jQuery相关代码
                /* mouseover/mouseout事件, 子元素被移入移出也会触发父元素的事件 */
                /* $(".father").mouseover(function () { console.log("father被移入了"); }); $(".father").mouseout(function () { console.log("father被移出了"); }); */
    
                /* mouseenter/mouseleave事件, 子元素被移入移出不会触发父元素的事件 推荐大家使用 */
                /* $(".father").mouseenter(function () { console.log("father被移入了"); }); $(".father").mouseleave(function () { console.log("father被移出了"); }); */
    
                /* $(".father").hover(function () { console.log("father被移入了"); },function () { console.log("father被移出了"); }); */
    
                $(".father").hover(function () { 
                    console.log("father被移入移出了");
                });
            });

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190831160819639.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg==,size_16,color_FFFFFF,t_70