jQuery——入門（四）JQuery 事件
jQuery——入門（四）JQuery 事件
一、事件初探
載入文件完成觸發：
window.onload = function(){} //js
$(window).load(function(){}) //jquery
$(document).ready(function(){})
事件可以多次執行
程式碼可以簡寫：$(function(){})
二、JQuery中常見的事件
在網頁瀏覽過程中，會觸發各種各樣的事件，這些事件的處理能很大程度的提升使用者使用的體驗，對於常見事件的瞭解是JS程式開發必不可少的一部分。
| 方法 | 描述 |
|---|---|
| bind() | 向匹配元素附加一個或更多事件處理器 |
| blur() | 觸發、或將函式繫結到指定元素的 blur 事件 |
| |
觸發、或將函式繫結到指定元素的 change 事件 |
| click() | 觸發、或將函式繫結到指定元素的 click 事件 |
| dblclick() | 觸發、或將函式繫結到指定元素的 double click 事件 |
| delegate() | 向匹配元素的當前或未來的子元素附加一個或多個事件處理器 |
| die() | 移除所有通過 live() 函式新增的事件處理程式。 |
| error() | 觸發、或將函式繫結到指定元素的 error 事件 |
| event.isDefaultPrevented() | 返回 event 物件上是否呼叫了 event.preventDefault()。 |
| event.pageX | 相對於文件左邊緣的滑鼠位置。 |
| event.pageY | 相對於文件上邊緣的滑鼠位置。 |
| event.preventDefault() | 阻止事件的預設動作。 |
| event.result | 包含由被指定事件觸發的事件處理器返回的最後一個值。 |
| event.target | 觸發該事件的 DOM 元素。 |
| event.timeStamp | 該屬性返回從 1970 年 1 月 1 日到事件發生時的毫秒數。 |
| event.type | 描述事件的型別。 |
| event.which | 指示按了哪個鍵或按鈕。 |
| focus() | 觸發、或將函式繫結到指定元素的 focus 事件 |
| keydown() | 觸發、或將函式繫結到指定元素的 key down 事件 |
| keypress() | 觸發、或將函式繫結到指定元素的 key press 事件 |
| keyup() | 觸發、或將函式繫結到指定元素的 key up 事件 |
| live() | 為當前或未來的匹配元素新增一個或多個事件處理器 |
| load() | 觸發、或將函式繫結到指定元素的 load 事件 |
| mousedown() | 觸發、或將函式繫結到指定元素的 mouse down 事件 |
| mouseenter() | 觸發、或將函式繫結到指定元素的 mouse enter 事件 |
| mouseleave() | 觸發、或將函式繫結到指定元素的 mouse leave 事件 |
| mousemove() | 觸發、或將函式繫結到指定元素的 mouse move 事件 |
| mouseout() | 觸發、或將函式繫結到指定元素的 mouse out 事件 |
| mouseover() | 觸發、或將函式繫結到指定元素的 mouse over 事件 |
| mouseup() | 觸發、或將函式繫結到指定元素的 mouse up 事件 |
| one() | 向匹配元素新增事件處理器。每個元素只能觸發一次該處理器。 |
| ready() | 文件就緒事件（當 HTML 文件就緒可用時） |
| resize() | 觸發、或將函式繫結到指定元素的 resize 事件 |
| scroll() | 觸發、或將函式繫結到指定元素的 scroll 事件 |
| select() | 觸發、或將函式繫結到指定元素的 select 事件 |
| submit() | 觸發、或將函式繫結到指定元素的 submit 事件 |
| toggle() | 繫結兩個或多個事件處理器函式，當發生輪流的 click 事件時執行。 |
| trigger() | 所有匹配元素的指定事件 |
| triggerHandler() | 第一個被匹配元素的指定事件 |
| unbind() | 從匹配元素移除一個被新增的事件處理器 |
| undelegate() | 從匹配元素移除一個被新增的事件處理器，現在或將來 |
| unload() | 觸發、或將函式繫結到指定元素的 unload 事件 |
1、事件快捷鍵繫結方式
語法：$(selector).eventType(fn);
案例：$(".box").click(function(){... ...})；給box選中的元素增加一個滑鼠單擊事件
問題：不適用於未來元素/新增元素；比較消耗系統資源
程式碼案例：
<body>
<button>按鈕</button>
<p>我是一個p標籤內容</p>
<div class="box"></div>
<script type="text/javascript">
$(function(){
$("button").click(function(){
$("p").toggle(500);
});
var newEle = $("<button></button>");
newEle.text("新增按鈕");
newEle.prependTo($(".box"));
});
</script>
</body>2、JQuery在快捷事件處理方式之外提供了四種繫結事件的方式
(1)、bind（遺留專案中比較多出現的繫結方式 | 不支援未來元素）
(2)、live（遺忘 | 支援未來元素，但是新版本已經刪除）
(3)、delegate（處理遺留專案時選擇的相容模式繫結專案 | 支援未來元素）
(4)、on（官方及專案組規範 | 不支援 / 支援未來元素）
同時對應了四種解除事件監聽的四種方式：
unbind 、die 、undelegate 、off
3、繫結事件
語法：bind（type、[data]、function）
type為事件型別，包括 blur、focus、load、resize、scroll、unload、click、dblclick、mousedown、mouseup、mousemove、mouseout、mouseenter、mouseleave、change、select、submit、keyup等。
data為方法傳遞的引數，可以忽略
function是用來繫結的處理函式
例如：為id為box的div元素繫結單擊事件
$("#box").bind("click",function(){alert（“box被點選”）;})
(1)、繫結單個事件
bind（“事件名”，function(){}）
注：當頁面元素載入時，bind查詢到對應的DOM節點，一個一個繫結對應的事件
當頁面元素是後續動態新增進去的，bind繫結事件在新元素上是沒有效果的
不適用於未來元素 / 新增元素
on（“事件名”，function(){}）
注：官方推薦的事件繫結的方式，也是專案中用的最多的方式
不適用於未來元素 / 新增元素
(2)、繫結多個事件
一個jquery物件可以繫結多個事件，對應一個函式 jquery物件.bind（“事件名1 事件名2 ...”，function(){}）
還可以繫結多個事件各個事件各對應一個方法
jquery物件.bind（{“事件名1”：function(){},"事件名2"：function(){},...}）
on（{“事件名1”：function(){},"事件名2"：function(){},...}） 適用於未來元素 / 新增元素
程式碼案例：
<body>
<button>hello</button>
<script>
$(function(){
// $("button").click(function(){
// alert("hello world");
// });
// $("button").click(function(){
// alert("hello world2");
// });
$("button").bind("click mouseover",function(){
alert("hello world");
});
$("button").bind({
"mouseover":function(){alert("hello world");},
"mouseout":function(){alert("你好世界");}
});
});
</script>
</body>(3)、一次性繫結事件 —— on 官方推薦
on（“事件名”，function(){}）
程式碼案例：
<body>
<button>點選</button>
<div></div>
</body>
<script type="text/javascript">
$(function(){
var i=0;
// $("button").on("click",function(){
// i++;
// $("div").html(i);
// });
//jquery物件.one("事件名",function(){}) 一次性事件
$("button").one("click",function(){
i++;
$("div").html(i);
});
});
</script>(4)、live && die
live方法：可以對動態新增的元素新增繫結事件，解決了bind（）不能給動態新增元素繫結事件的問題
注意：新版本中已經刪除了live（）繫結事件，通常使用delegate（...）、on（...）進行替代
適用於未來元素 / 新增元素 ，測試時請使用jquery1.9以下版本
例如：$("button").live("click",function(){
$("p").toggle(500);
})
die方法：解除指定元素上的所有事件
注意：die方法不再建議使用，舊版本替換可以使用$(selector).off()函式進行解除
(5)、解除繫結 / 事件移除 —— unbind、off
unbind("事件名") 可以解除多個事件
off("事件名") 官方推薦的解除事件繫結的方式，專案中用的最多的解除方式
注：解除繫結事件 jquery物件.unbind(引數) 引數是可選的，如果裡面沒有引數的時候 解除jquery物件上所有的事件繫結
如果有引數， 代表可以指定去解除單個或多個事件
程式碼案例：
<body>
<button>按鈕</button>
<script type="text/javascript">
$(function(){
$("button").bind("click mouseover mouseout",function(){
alert("hello world");
});
// $("button").unbind("click mouseover"); //只有在滑鼠離開按鈕時出現hello world，滑鼠點選和滑鼠放上去均無效
// $("button").unbind(); //解除所有事件
$("button").off("click mouseover"); //和$("button").unbind("click mouseover")實現效果一樣
});
</script>
</body>4、事件合成
JQuery有兩個合成事件：hover（）方法和toggle（）方法
hover(enter,leave)
jquery物件.hover(函式1,函式2) 滑鼠放上去時 呼叫函式1 滑鼠離開時 呼叫函式2
用於模擬游標懸停事件.當游標移動到元素上時,會觸發指定的第一個函式,當游標移出這個元素時,觸發指定的第二個函式.
toggle(fn1,fn2,…fnN)
模擬游標連續點選事件.第一次單擊元素觸發fn1,第二次點選時觸發fn2,依次類推.隨後的單擊都會重複對這幾個函式的輪番呼叫.
jquery9版本已經刪除了此種應用
程式碼案例：
<body>
<div>hello world</div>
</body>
<script type="text/javascript">
$(function(){
$("div").hover(function(){
$(this).css("background-color","red"); //滑鼠放上去顯示紅色背景
},function(){
$(this).css("background-color",""); //滑鼠離開時沒有背景
});
$("div").toggle(function(){ //點選三次hello world時依次顯示紅色、藍色、綠色
$(this).css("background-color","red");
},
function(){
$(this).css("background-color","blue");
},
function(){
$(this).css("background-color","green");
});
})
</script>5、 事件冒泡 && 預設行為
(1)、阻止事件冒泡的方法：
在繫結的事件中加入event引數，並在函式中增加event.stopPropagation()呼叫就可以阻止事件冒泡，也可以使用return false阻止冒泡
案例程式碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#parent{width:400px;height:400px;background:red}
#child{width:200px;height:200px;background:yellow}
</style>
<script src="js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="parent">
<div id="child"></div>
</div>
</body>
<script type="text/javascript">
$(function(){
$("#parent").click(function(e){
alert("hello,parent被點選");
});
$("#child").click(function(ev){
alert("hi，child被點選");
ev.stopPropagation(); //阻止冒泡 ，點選child時，只會顯示“hi，child被點選”
})
});
</script>
</html>(2)、阻止事件預設行為：
event中還有一個方法：event.preventDefault()；作用是阻止預設行為，如表單提交！
程式碼案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>阻止預設行為</title>
<script src="js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<a href="#">我是超連結</a>
<div>我是超連結</div>
</body>
<script type="text/javascript">
$(function(){ //第一種
// $("a").click(function(e){
// e.preventDefault();
// });
$("a").on("click",function(e){ //第二種
e.preventDefault();
});
});
</script>
</html>
(1)、模擬操作可以使用trigger（）方法來完成
例如：$("#box").click(function(){
$("#btn").trigger("click"); //模擬操作觸發的#btn的click事件
})
程式碼案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<button>點選我，有驚喜</button>
<input type="text" />
<div>hello,需要點選我模擬</div>
<script type="text/javascript">
$(function(){
$("button").click(function(){
alert("果然有驚喜"); //2.點選button，再次彈出“果然有驚喜”
});
$("button").trigger("click"); //1.開始彈出“果然有驚喜”
$("div").click(function(){
$("button").trigger("click"); //3.點選div時，彈出“果然有驚喜”
})
$("input").focus(function(){ //4.input邊框變為紅色
$(this).css("border","1px solid red");
});
$("input").trigger("focus");
$("input").triggerHandler("focus");//triggerHandler()不會觸發預設行為,而只執行事件程式碼.
});
</script>
</body>
</html>
(2)、模擬操作 —— 傳遞資料
trigger（type，[data]）方法有兩個引數，第一個引數是要觸發的事件型別，第二個引數是傳遞給事件處理函式的附加資料，以陣列的形式傳遞
#（“#btn”）.bind("click",function(event,mes,mes2){alert(mes+","+mes2);
})
$("#btn").trigger("click",["hello","world!"]);
注意：在事件繫結時的event引數是不可以省略的，但在呼叫時可以不指定