jQuery 事件
jQuery?事件
什麼是事件？
頁面對不同訪客的回應(yīng)叫做事件。
事件處理程序指的是當(dāng) HTML 中發(fā)生某些事件時所呼叫的方法。
實例：
在元素上移動滑鼠。選取單選按鈕點擊元素
在事件中經(jīng)常使用術(shù)語"觸發(fā)"（或"激發(fā)"）例如： "當(dāng)您按下按鍵時觸發(fā) keypress 事件"。
事件清單。
1.blur() 當(dāng)失去焦點時觸發(fā)。包括滑鼠點擊離開和TAB鍵離開。
2.change() 當(dāng)元素取得焦點後，值改變失去焦點事觸發(fā)。
3.click() 當(dāng)滑鼠點選時觸發(fā)。
4.dblclick() 當(dāng)滑鼠雙擊時觸發(fā)。
5.error() 當(dāng)javascript出錯或img的src屬性無效時觸發(fā)。
6.focus() 當(dāng)元素取得焦點時觸發(fā)。注意：某些物件不支援。
7.focusin() 當(dāng)元素或其子元素取得焦點時觸發(fā)，與focus()區(qū)別在於能夠偵測其內(nèi)部子元素取得焦點的情況。
8.focusout() 當(dāng)元素或其子元素失去焦點時觸發(fā)，與focusout()區(qū)別在於能夠偵測內(nèi)部子元素失去焦點的情況?！?/p>
9.keydown() 當(dāng)鍵盤按下時觸發(fā)。
10.keyup() 當(dāng)按鍵放開時觸發(fā)。
11.mousedown() 當(dāng)滑鼠在元素上點擊後觸發(fā)。
12.mouseenter() 當(dāng)滑鼠在元素上穿過時觸發(fā)。 mouseenter與mouseover的差別是，滑鼠從mouseover的子元素穿過時也會觸發(fā)而mouseenter不會。
13.mouseleave() 當(dāng)滑鼠從元素上移出時觸發(fā)。
14.mousemove() 當(dāng)滑鼠在元素上移動時觸發(fā)。 .clientX 和 .clientY分別代表滑鼠的X座標(biāo)與Y座標(biāo)。
15.mouseout() 當(dāng)滑鼠從元素上移開時觸發(fā)。
16.mouseover() 當(dāng)滑鼠移入元素時觸發(fā)。
17.mouseup() 當(dāng)滑鼠左鍵按下釋放時觸發(fā)。
18.resize() 當(dāng)瀏覽器視窗大小改變時觸發(fā)。 $(window).resize();
19.scroll() 當(dāng)捲軸發(fā)生變化時觸發(fā)。
20.select() 當(dāng)input裡的內(nèi)容被選取時觸發(fā)。
21.submit() 提交選取的表單。
22.unload() 當(dāng)頁面卸載時觸發(fā)。
jQuery 事件方法語法
在 jQuery 中，大多數(shù) DOM 事件都有一個等效的 jQuery 方法。
頁面中指定一個點擊事件：
$("p").click();
下一步是定義什麼時間觸發(fā)事件。您可以透過一個事件函數(shù)實現(xiàn)：
$("p").click(function(){??//?動作觸發(fā)後執(zhí)行的程式碼!!});
常用的jQuery 事件方法
$(document).ready()
$(document).ready() 方法允許我們在文件完全載入後執(zhí)行函數(shù)。該事件方法在?jQuery 語法?章節(jié)中已經(jīng)提到。
click()
click() 方法是當(dāng)按鈕點擊事件被觸發(fā)時會呼叫一個函數(shù)。
函數(shù)在使用者點擊 HTML 元素時執(zhí)行。
在下面的實例中，當(dāng)點擊事件在某個<p> 元素上觸發(fā)時，隱藏目前的<p> 元素：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>點我我就不見了！</p>
<p>我們?nèi)齻€都是的！</p>
<p>他們說的是真的！</p>
</body>
</html>dblclick()
當(dāng)雙擊元素時，會發(fā)生dblclick 事件。
dblclick() 方法觸發(fā)dblclick 事件，或規(guī)定發(fā)生dblclick 事件時執(zhí)行的函數(shù)：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("p").dblclick(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>雙擊鼠標(biāo)左鍵的，我就消失。</p>
<p>雙擊我也消失！</p>
<p>雙擊我也是！</p>
</body>
</html>mouseenter()，mouseover()比較：
<html>
<meta charset="utf-8">
<head>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
x=0;
y=0;
$(document).ready(function(){
$("div.over").mouseover(function(){
$(".over span").text(x+=1);
});
$("div.enter").mouseenter(function(){
$(".enter span").text(y+=1);
});
});
</script>
</head>
<body>
<p>不論鼠標(biāo)指針穿過被選元素或其子元素，都會觸發(fā) mouseover 事件。</p>
<p>只有在鼠標(biāo)指針穿過被選元素時，才會觸發(fā) mouseenter 事件。</p>
<div class="over" style="background-color:lightgray;padding:20px;width:40%;float:left">
<h2 style="background-color:white;">被觸發(fā)的 Mouseover 事件：<span></span></h2>
</div>
<div class="enter" style="background-color:lightgray;padding:20px;width:40%;float:right">
<h2 style="background-color:white;">被觸發(fā)的 Mouseenter 事件：<span></span></h2>
</div>
</body>
</html>mouseleave( )
當(dāng)滑鼠指標(biāo)離開元素時，會發(fā)生mouseleave 事件。
mouseleave() 方法觸發(fā)mouseleave 事件，或規(guī)定當(dāng)發(fā)生mouseleave 事件時執(zhí)行的函數(shù)：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#p1").mouseleave(function(){
alert("再見，您的鼠標(biāo)離開了該段落。");
});
});
</script>
</head>
<body>
<p id="p1">這是一個段落。</p>
</body>
</html>mousedown()
當(dāng)滑鼠指標(biāo)移到元素上方，並按下滑鼠按鍵時，會發(fā)生mousedown 事件。
mousedown() 方法觸發(fā)mousedown 事件，或規(guī)定當(dāng)發(fā)生mousedown 事件時執(zhí)行的函數(shù)：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#p1").mousedown(function(){
alert("鼠標(biāo)在該段落上按下！");
});
});
</script>
</head>
<body>
<p id="p1">這是一個段落</p>
</body>
</html>mouseup()
當(dāng)在元素上放開滑鼠按鈕時，會發(fā)生mouseup 事件。
mouseup() 方法觸發(fā)mouseup 事件，或規(guī)定當(dāng)發(fā)生mouseup 事件時運行的函數(shù)：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#p1").mouseup(function(){
alert("鼠標(biāo)在段落上松開。");
});
});
</script>
</head>
<body>
<p id="p1">這是一個段落。</p>
</body>
</html>hover()
hover()方法用於模擬遊標(biāo)懸停事件。
當(dāng)滑鼠移到元素上時，會觸發(fā)指定的第一個函數(shù)(mouseenter);當(dāng)滑鼠移出這個元素時，會觸發(fā)指定的第二個函數(shù)(mouseleave)。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#p1").hover(function(){
alert("你進入了 p1!");
},
function(){
alert("拜拜! 現(xiàn)在你離開了 p1!");
});
});
</script>
</head>
<body>
<p id="p1">這是一個段落。</p>
</body>
</html>focus()
當(dāng)元素獲得焦點時，發(fā)生 focus 事件。
當(dāng)透過滑鼠點擊選取元素或透過 tab 鍵定位到元素時，該元素就會獲得焦點。
focus() 方法觸發(fā)focus 事件，或規(guī)定當(dāng)發(fā)生focus 事件時執(zhí)行的函數(shù)：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("input").focus(function(){
$(this).css("background-color","#cccccc");
});
$("input").blur(function(){
$(this).css("background-color","#ffffff");
});
});
</script>
</head>
<body>
Name: <input type="text" name="fullname"><br>
Email: <input type="text" name="email">
</body>
</html>blur()
當(dāng)元素失去焦點時，發(fā)生blur 事件。
blur() 方法觸發(fā) blur 事件，或規(guī)定發(fā)生 blur 事件時執(zhí)行的函數(shù)：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("input").focus(function(){
$(this).css("background-color","#cccccc");
});
$("input").blur(function(){
$(this).css("background-color","#ffffff");
});
});
</script>
</head>
<body>
Name: <input type="text" name="fullname"><br>
Email: <input type="text" name="email">
</body>
</html>
