jQuery——10——jQuery事件(绑定，移出，冒泡，自动触发，自定义事件，事件命名空间，事件委托，事件移入移出等)

最新推荐文章于 2021-07-04 13:52:37 发布

野生小米椒

最新推荐文章于 2021-07-04 13:52:37 发布

阅读量284

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/x1037490413/article/details/102704517

版权

jQuery 专栏收录该内容

39 篇文章 0 订阅

订阅专栏

一：事件绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../jquery/jquery-3.4.1.min.js"></script>
    <script>
    $(function(){
        /*
        jQuery中有两种绑定时间方式
        1：eventName(fn);
        编码效率略高/部分时间jQuery没有实现，所以不能绑定
        2:on(eventName,fn);
        编码效率略低/所有js事件都可以添加

         注意点：
         可以添加多个相同或者不同类型的事件，不会覆盖
        */
        $("button").click(function(){
            alert("第一种方式");
        })
        $("button").mouseenter(function(){
            alert("hello mouseente");
        })
        $("button").mouseleave(function(){
            alert("hello mouseleave");
        })
        $("button").on("click",function(){
            alert("第二种方式");
        })
        $("button").on("mouseente",function(){
            alert("mouse");
        })

    })
    </script>
</head>
<body>
    <button>test</button>
</body>
</html>

二：事件解绑

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../jquery/jquery-3.4.1.min.js"></script>
    <script>
    $(function(){
        
        function test1(){
            alert("hello test1");
        }
        function test2(){
            alert("hello test2");
        }
        
        $("button").click(test1);
        $("button").click(test2);
        /*
        $("button").mouseleave(function(){
            alert("hello mouseleave");
        })
        $("button").mouseenter(function(){
            alert("hello mouseente");
        })
        */
        //off方法如果不传递参数，会移除所有的事件
        $("button").off();
        // 如果传一个参数，会移除所有指定类型的事件
        $("button").off("mouseleave")
        // 如果传递两个参数，会移除所有指定类型的指定时间
        $("button").off("click",test1)
 
    })
    </script>
</head>
<body>
    <button>test</button>
</body>
</html>

三：事件冒泡和默认行为

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .father{
        width: 200px;
        height: 200px;
        background-color: cadetblue;
    }
    .son{
        width: 100px;
        height: 100px;
        background-color: coral;
    }
    a{
        background-color: yellow;
    }
    </style>
    <script src="../jquery/jquery-3.4.1.min.js"></script>
    <script>
    $(function(){
        
        /*
        1：什么是事件冒泡
        2：如何阻止事件冒泡
        3：什么是默认行为
        比如说a标签，提交事件没有监听就会跳转
        4：如何阻止默认行为
        */
       $('.father').click(function(){
           alert('father');
          
       })
         $('.son').click(function(event){
           alert('son'); 
           event.stopPropagation();
           //方法一：return false;    
       })
       $('a').click(function(event){
           alert('阻止跳转百度');
           //方法一：return false;
           event.preventDefault();
       })
    })
    </script>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <a href="http://baidu.com">百度一下</a>
</body>
</html>

四：事件自动触发

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .father{
        width: 200px;
        height: 200px;
        background-color: cadetblue;
    }
    .son{
        width: 100px;
        height: 100px;
        background-color: coral;
    }
   
    </style>
    <script src="../jquery/jquery-3.4.1.min.js"></script>
    <script>
    $(function(){
        
        /*
        trigger:如果你用trigger自动触发事件，会触发事件冒泡
        triggerHandler：如果利用triggerHandler自动触发事件，不会触发事件冒泡
        */
       $('.father').click(function(){
           alert('father');
        })
       $('.father').trigger("click")
        
        $('.son').click(function(){
           alert('son');
        })
        // $('.son').trigger("click")
        $('.son').triggerHandler("click")
      
      /*
      如果利用trigger自动触发事件，会触发默认行为
      如果利用triggerHandler自动触发事件，不会触发默认行为
      */
    //   $("input[type='submit']").trigger("click");
      $("input[type='submit']").triggerHandler("click");
    })
    </script>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <form action="http://taobao.com">
    <input type="text">
    <input type="submit">
    </form>

</body>
</html>

五：一道面试题

因为a标签比较特殊，用trigger会自动触发事件，但并不会使它触发默认行为，可以加个span

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    
   
    </style>
    <script src="../jquery/jquery-3.4.1.min.js"></script>
    <script>
    $(function(){
     
     $('span').click(function (){
         alert('span');
     })
     $('span').trigger("click");
       
    })
    </script>
</head>
<body>
   <a href="http://baidu.com"><span>百度一下</span></body>
</html>

六：自定义事件

想要自定义事件，必须满足两个条件

1：事件必须是通过on绑定的

2：事件必须通过trigger来触发

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .father{
        width: 200px;
        height: 200px;
        background-color: cadetblue;
    }
    .son{
        width: 100px;
        height: 100px;
        background-color: coral;
    }
   
    </style>
    <script src="../jquery/jquery-3.4.1.min.js"></script>
    <script>
    $(function(){
        
        $('.son').on("myClick",function(){
           alert('son');
        })
        $('.son').trigger("myClick")//没有冒泡是因为father没有绑定click事件呀
    })
    </script>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
    

</body>
</html>

七：事件命名空间

当一个项目由不同的人共同完成时，如果同时有人添加了同一个事件，都会被触发不会被覆盖，我们要知道哪个事件由谁添加，就用到了命名空间

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .father{
        width: 200px;
        height: 200px;
        background-color: cadetblue;
    }
    .son{
        width: 100px;
        height: 100px;
        background-color: coral;
    }
   
    </style>
    <script src="../jquery/jquery-3.4.1.min.js"></script>
    <script>
    $(function(){
        /*
        想要事件的命名空间有效，必须满足两个条件
        1：事件是通过on来绑定的
        2：通过trigger触发事件
        */
        $('.son').on("click.ss",function(){
           alert('click1');
        })
        $('.son').on("click.xzx",function(){
           alert('click2');
        })
        $('.son').trigger("click.ss")
    })
    </script>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
    

</body>
</html>

八：事件命名空间面试题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .father{
        width: 200px;
        height: 200px;
        background-color: cadetblue;
    }
    .son{
        width: 100px;
        height: 100px;
        background-color: coral;
    }
   
    </style>
    <script src="../jquery/jquery-3.4.1.min.js"></script>
    <script>
    $(function(){
        /*
        利用trigger触发子元素带命名空间的事件，那么父元素带相同命名空间的事件也会被触发
        而父元素没有命名空间的或者命名空间不同的事件不会被触发
        利用trigger触发子元素不带命名空间的事件，
        那么子元素所有相同类型的事件和父元素所有相同类型的事件会被触发
        */
        $('.father').on("click.ss",function(){
           alert('click1');
        })
        $('.father').on("click",function(){
           alert('click2');
        })
        $('.son').on("click.ss",function(){
           alert('click3');
        })
        // $('.son').trigger("click.ss");
        $('.son').trigger("click");
    })
    </script>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
    

</body>
</html>

九：事件委托

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
   
   
    </style>
    <script src="../jquery/jquery-3.4.1.min.js"></script>
    <script>
    $(function(){
       /*
       什么是事件委托？
          请别人帮忙做事情，然后将做完的结果反馈给我们
       */
       $("button").click(function(){
            $("ul").append('<li>我是新增的li</li>')
       })
       /*
       在jQuery中，如果通过核心函数找到的元素不止一个，那么在添加事件的时候，iQuery会遍历所有找到的元素

       */
       /*
       $("ul>li").click(function(){
           console.log($(this).html());//谁调用this就是谁 能把已经在页面上的li打印出来，但是新增的没有用，是因为新增事件在入口函数里面，入口函数是在所有元素加载完毕才执行
       })*/
       /*所以要用到事件委托*/
       $('ul').delegate('li','click',function(){//找一个在入口函数执行之前就有的元素ul来监听你动态添加的元素li的某些事件(click)
           console.log($(this).html());//用ul监听的click事件，拿到的是li，因为事件冒泡
       })
    })
    </script>
</head>
<body>
<ul>
    <li>我是第1个li</li>
    <li>我是第2个li</li>
    <li>我是第3个li</li>
</ul>
    <button>我是新增的li</button>
    

</body>
</html>

十：事件移入移出

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding:0 ;
        }
   .father{
       height: 200px;
       width:200px;
       background-color:rosybrown;
   }
   .son{
       height: 100px;
       width:100px;
       background-color:blueviolet;
   }
   
    </style>
    <script src="../jquery/jquery-3.4.1.min.js"></script>
    <script>
    $(function(){
  /*
  注意：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被移出了');
//   })

//同时监听移入移出的事件hover，可以一个参数也可以两个参数
//两个参数
    // $('.father').hover(function(){
    //     console.log("father被移入了");
    // },function(){
    //     console.log("father被移出了");
    // })
   //一个参数
   $('.father').hover(function(){
        console.log("father被移入移出了");
    })
    })
    </script>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>

野生小米椒

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery——10——jQuery事件(绑定，移出，冒泡，自动触发，自定义事件，事件命名空间，事件委托，事件移入移出等)

一：事件绑定<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http...
复制链接

扫一扫

专栏目录