jquery 之事件 方法

Posted 2020-10-15 amandaj

一、jquery事件

1 blur()       触发、或将函数绑定到指定元素的 blur 事件

2 change()     触发、或将函数绑定到指定元素的 change 事件

3 click()      触发、或将函数绑定到指定元素的 click 事件

4 dblclick()   触发、或将函数绑定到指定元素的 double click 事件

5 error()      触发、或将函数绑定到指定元素的 error 事件

6 focus()      触发、或将函数绑定到指定元素的 focus 事件

7 keydown()    触发、或将函数绑定到指定元素的 key down 事件

8 keypress()   触发、或将函数绑定到指定元素的 key press 事件

9 keyup()      触发、或将函数绑定到指定元素的 key up 事件

10 load()       触发、或将函数绑定到指定元素的 load 事件

11 mousedown()  触发、或将函数绑定到指定元素的 mouse down 事件

12 mouseenter() 触发、或将函数绑定到指定元素的 mouse enter 事件

13 mouseleave() 触发、或将函数绑定到指定元素的 mouse leave 事件

14 mousemove()  触发、或将函数绑定到指定元素的 mouse move 事件

15.mouseout()   触发、或将函数绑定到指定元素的 mouse out 事件

 

1 mouseover()  触发、或将函数绑定到指定元素的 mouse over 事件

 

2 mouseup()    触发、或将函数绑定到指定元素的 mouse up 事件

 

3 ready()      文档就绪事件（当 html 文档就绪可用时）

 

4 resize()     触发、或将函数绑定到指定元素的 resize 事件

 

5 scroll()     触发、或将函数绑定到指定元素的 scroll 事件

 

6 select()     触发、或将函数绑定到指定元素的 select 事件

 

7 submit()     触发、或将函数绑定到指定元素的 submit 事件

 

8 toggle()     绑定两个或多个事件处理器函数，当发生轮流的 click 事件时执行。

 

9 onload()     触发、或将函数绑定到指定元素的 unload 事件

 

    $(‘div‘).click(function(){
        
    })

 

二、jquery 之  on （）方法

 

注意：使用 on() 方法添加的事件处理程序适用于当前及未来的元素（比如由脚本创建的新元素）。

 

提示：如需移除事件处理程序，请使用 off() 方法。

 

提示：如需添加只运行一次的事件然后移除，请使用 one() 方法。

 

bind()
　　$("p").bind("click",function(){
　　　　alert("The paragraph was clicked.");
　　});

　　$("p").on("click",function(){
　　　　alert("The paragraph was clicked.");
　　});
delegate()

　　$("#div1").on("click","p",function(){
　　　　$(this).css("background-color","pink");
　　});

　　$("#div2").delegate("p","click",function(){
　　　　$(this).css("background-color","pink");
　　});

live()

　　$("#div1").on("click",function(){
　　　　$(this).css("background-color","pink");
　　});

　　$("#div2").live("click",function(){
　　　　$(this).css("background-color","pink");
　　});

 

以上三种方法在jQuery1.8之后都不推荐使用，官方在1.9时已经取消使用live()方法了，所以建议都使用on()方法。

 

tip:如果你需要移除on()所绑定的方法，可以使用off()方法处理。

 

$(document).ready(function(){
　　$("p").on("click",function(){
　　　　$(this).css("background-color","pink");
　　});
　　$("button").click(function(){
　　　　$("p").off("click");
　　});
});

 

tip:如果你的事件只需要一次的操作，可以使用one()这个方法

 

$(document).ready(function(){
　　$("p").one("click",function(){
　　　　$(this).animate({fontSize:"+=6px"});
　　});
});

 

trigger()绑定

 

$(selector).trigger(event,eventObj,param1,param2,...)

 

$(document).ready(function(){
　　$("input").select(function(){
　　　　$("input").after(" Text marked!");
　　});
　　$("button").click(function(){
　　　　$("input").trigger("select");
　　});
});

 

多个事件绑定同一个函数

$(document).ready(function(){
  $("p").on("mouseover mouseout",function(){
    $("p").toggleClass("intro");
  });
});

 

多个事件绑定不同函数

$(document).ready(function(){
  $("p").on({
    mouseover:function(){$("body").css("background-color","lightgray");},  
    mouseout:function(){$("body").css("background-color","lightblue");}, 
    click:function(){$("body").css("background-color","yellow");}  
  });
});

绑定自定义事件

 $(document).ready(function(){

  $("p").on("myOwnEvent", function(event, showName){
    $(this).text(showName + "! What a beautiful name!").show();
  });
  $("button").click(function(){
    $("p").trigger("myOwnEvent",["Anja"]);
  });
});

传递数据到函数

 function handlerName(event) 

{
  alert(event.data.msg);
}

$(document).ready(function(){
  $("p").on("click", {msg: "You just clicked me!"}, handlerName)
});

适用于未创建的元素

$(document).ready(function(){
  $("div").on("click","p",function(){
    $(this).slideToggle();
  });
  $("button").click(function(){
    $("<p>This is a new paragraph.</p>").insertAfter("button");
  });
});
三、off()方法移除事件

$("p").on("click mouseenter",function(){
    $(this).off(‘mouseenter‘); //移除mouseenter事件
   console.log(1)
});

四、使用 map 参数添加多个事件处理程序

$("p").on({
   mouseover:function(){$("body").css("background","#ccc");},  
   mouseout:function(){$("body").css("background","blue");}, 
   click:function(){$("body").css("background","red");}  
});

五、向未来的元素添加事件（通过节点方法添加的新元素没有事件，所以需要通过以下方法）

 

1 $("p").on({

2     mouseover:function(){$("body").css("background","#ccc");},  

3     mouseout:function(){$("body").css("background","blue");},

4     click:function(){$("body").css("background","red");}  

});