jquery 之事件 方法
一、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");}
});
jquery 之事件 方法