jQuery事件处理详解-优快云博客

本文深入讲解了jQuery中事件处理的基本概念，包括事件绑定、触发、切换及自定义事件的使用方法。探讨了不同事件绑定方式的特点，如基本绑定、bind、on等，并介绍了如何利用这些方法实现事件的委托和切换，以及如何创建和触发自定义事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<button class="btn">按钮</button>
<ul>
    <li>li元素</li>
</ul>
<div class="b">
    <span>123</span>
</div>

jquery中事件可以进行链式操作

基本绑定事件

 $(".btn").click(function(){
     console.log(1);
   }).mouseleave(function(){
       console.log(2)
 })

其中事件的对象

  $(".btn").mouseenter(function(e){
      console.log(e);//对象为window，即w.event
   })
   $(".btn").click(function(e){
       var ele= e.target;
      console.log(ele);//输出值为<button class="btn">按钮</button> 即可通过事件获取当前操作元素的节点
//    })

2.bind绑定事件与js中addEventLisenter一样 bind(“事件类型”，“data”，“function”) 可绑定多个元素

//    $(".btn").bind("click",function(){
//        $(this).css("color","red")
//    })
    //$(".btn").bind("click",show);//调用外部函数时不用加小括号
//    function show(){
//        $(".btn").css("color","red")
//    }
//      $(".btn").bind("click mouseleave",function(e){
//          if(e.type=="click"){
//              $(this).css("color","red")
//          }
//          else if(e.type=="mouseleave"){
//              $(this).css("color","blue")
//          }
//      });//一次性调用多个事件，addEvenTLisenter也是如此,通过函数的对象中type的类型来判断哪一个事件


//     $(".btn").bind("click",2,function(e){
//         console.log(e);//function中的data值为2；
//     })

3.on绑定事件，基本用法与bind一样，但是on可以进行事件的委托

 //  $(".b").on("click","span",function(){
//        $(this).css("backgroundColor","red");
//        console.log(this);//this为span
//    })
//    $(".b").bind("click","span",function(){
//        $(this).css("backgroundColor","blue");
//        console.log(this);//this为div
//    })

4.事件切换

    //事件的切换
    //鼠标悬停执行第一个函数，离开后执行第二个函数

/* $(".b1").mouseover(function (){
     console.log(1);
     }).mouseleave(function (){
     console.log(2);
     });*/
    /* $(".b1").hover(function (){
     console.log(1);
     },function (){
     console.log(2);
     });*/

5.一次性事件只执行一次

//    $(".b").one("click",function(){
//        console.log(1)
//    })

6.自定义事件

   //自定义事件
//    $(".b").bind("mystyle",function(e,b,c){
//        console.log(e,b,c);//e为事件对象 b，c输出为1,2
//    })
//    $(".b").trigger("mystyle",[1,2])

jQuery绑定事件