jQuery事件_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
因?yàn)镴avaScript在瀏覽器中以單線程模式運(yùn)行，頁(yè)面加載后，一旦頁(yè)面上所有的JavaScript代碼被執(zhí)行完后，就只能依賴(lài)觸發(fā)事件來(lái)執(zhí)行JavaScript代碼。
瀏覽器在接收到用戶(hù)的鼠標(biāo)或鍵盤(pán)輸入后，會(huì)自動(dòng)在對(duì)應(yīng)的DOM節(jié)點(diǎn)上觸發(fā)相應(yīng)的事件。如果該節(jié)點(diǎn)已經(jīng)綁定了對(duì)應(yīng)的JavaScript處理函數(shù)，該函數(shù)就會(huì)自動(dòng)調(diào)用。
由于不同的瀏覽器綁定事件的代碼都不太一樣，所以用jQuery來(lái)寫(xiě)代碼，就屏蔽了不同瀏覽器的差異，我們總是編寫(xiě)相同的代碼。
舉個(gè)例子，假設(shè)要在用戶(hù)點(diǎn)擊了超鏈接時(shí)彈出提示框，我們用jQuery這樣綁定一個(gè)click事件：
/* HTML:
*
* <a id="test-link" href="#0" rel="external nofollow" >點(diǎn)我試試</a>
*
*/
// 獲取超鏈接的jQuery對(duì)象:
var a = $('#test-link');
a.on('click', function () {
alert('Hello!');
});
on方法用來(lái)綁定一個(gè)事件，我們需要傳入事件名稱(chēng)和對(duì)應(yīng)的處理函數(shù)。
另一種更簡(jiǎn)化的寫(xiě)法是直接調(diào)用click()方法：
a.click(function () {
alert('Hello!');
});
兩者完全等價(jià)。我們通常用后面的寫(xiě)法。
jQuery能夠綁定的事件主要包括：
鼠標(biāo)事件
click: 鼠標(biāo)單擊時(shí)觸發(fā)； dblclick：鼠標(biāo)雙擊時(shí)觸發(fā)； mouseenter：鼠標(biāo)進(jìn)入時(shí)觸發(fā)； mouseleave：鼠標(biāo)移出時(shí)觸發(fā)； mousemove：鼠標(biāo)在DOM內(nèi)部移動(dòng)時(shí)觸發(fā)； hover：鼠標(biāo)進(jìn)入和退出時(shí)觸發(fā)兩個(gè)函數(shù)，相當(dāng)于mouseenter加上mouseleave。
鍵盤(pán)事件
鍵盤(pán)事件僅作用在當(dāng)前焦點(diǎn)的DOM上，通常是<input>和<textarea>。
keydown：鍵盤(pán)按下時(shí)觸發(fā)； keyup：鍵盤(pán)松開(kāi)時(shí)觸發(fā)； keypress：按一次鍵后觸發(fā)。
其他事件
focus：當(dāng)DOM獲得焦點(diǎn)時(shí)觸發(fā)； blur：當(dāng)DOM失去焦點(diǎn)時(shí)觸發(fā)； change：當(dāng)<input>、<select>或<textarea>的內(nèi)容改變時(shí)觸發(fā)； submit：當(dāng)<form>提交時(shí)觸發(fā)； ready：當(dāng)頁(yè)面被載入并且DOM樹(shù)完成初始化后觸發(fā)。
其中，ready僅作用于document對(duì)象。由于ready事件在DOM完成初始化后觸發(fā)，且只觸發(fā)一次，所以非常適合用來(lái)寫(xiě)其他的初始化代碼。假設(shè)我們想給一個(gè)<form>表單綁定submit事件，下面的代碼沒(méi)有預(yù)期的效果：
<html>
<head>
<script>
// 代碼有誤:
$('#testForm).on('submit', function () {
alert('submit!');
});
</script>
</head>
<body>
<form id="testForm">
...
</form>
</body>
因?yàn)镴avaScript在此執(zhí)行的時(shí)候，<form>尚未載入瀏覽器，所以$('#testForm)返回[]，并沒(méi)有綁定事件到任何DOM上。
所以我們自己的初始化代碼必須放到document對(duì)象的ready事件中，保證DOM已完成初始化：
<html>
<head>
<script>
$(document).on('ready', function () {
$('#testForm).on('submit', function () {
alert('submit!');
});
});
</script>
</head>
<body>
<form id="testForm">
...
</form>
</body>
這樣寫(xiě)就沒(méi)有問(wèn)題了。因?yàn)橄嚓P(guān)代碼會(huì)在DOM樹(shù)初始化后再執(zhí)行。
由于ready事件使用非常普遍，所以可以這樣簡(jiǎn)化：
$(document).ready(function () {
// on('submit', function)也可以簡(jiǎn)化:
$('#testForm).submit(function () {
alert('submit!');
});
});
甚至還可以再簡(jiǎn)化為：
$(function () {
// init...
});
上面的這種寫(xiě)法最為常見(jiàn)。如果你遇到$(function () {...})的形式，牢記這是document對(duì)象的ready事件處理函數(shù)。
完全可以反復(fù)綁定事件處理函數(shù)，它們會(huì)依次執(zhí)行：
$(function () {
console.log('init A...');
});
$(function () {
console.log('init B...');
});
$(function () {
console.log('init C...');
});
事件參數(shù)
有些事件，如mousemove和keypress，我們需要獲取鼠標(biāo)位置和按鍵的值，否則監(jiān)聽(tīng)這些事件就沒(méi)什么意義了。所有事件都會(huì)傳入Event對(duì)象作為參數(shù)，可以從Event對(duì)象上獲取到更多的信息：
$(function () {
$('#testMouseMoveDiv').mousemove(function (e) {
$('#testMouseMoveSpan').text('pageX = ' + e.pageX + ', pageY = ' + e.pageY);
});
});
取消綁定
一個(gè)已被綁定的事件可以解除綁定，通過(guò)off('click', function)實(shí)現(xiàn)：
function hello() {
alert('hello!');
}
a.click(hello); // 綁定事件
// 10秒鐘后解除綁定:
setTimeout(function () {
a.off('click', hello);
}, 10000);
需要特別注意的是，下面這種寫(xiě)法是無(wú)效的：
// 綁定事件:
a.click(function () {
alert('hello!');
});
// 解除綁定:
a.off('click', function () {
alert('hello!');
});
這是因?yàn)閮蓚€(gè)匿名函數(shù)雖然長(zhǎng)得一模一樣，但是它們是兩個(gè)不同的函數(shù)對(duì)象，off('click', function () {...})無(wú)法移除已綁定的第一個(gè)匿名函數(shù)。
為了實(shí)現(xiàn)移除效果，可以使用off('click')一次性移除已綁定的click事件的所有處理函數(shù)。
同理，無(wú)參數(shù)調(diào)用off()一次性移除已綁定的所有類(lèi)型的事件處理函數(shù)。
事件觸發(fā)條件
一個(gè)需要注意的問(wèn)題是，事件的觸發(fā)總是由用戶(hù)操作引發(fā)的。例如，我們監(jiān)控文本框的內(nèi)容改動(dòng)：
var input = $('#test-input');
input.change(function () {
console.log('changed...');
});
當(dāng)用戶(hù)在文本框中輸入時(shí)，就會(huì)觸發(fā)change事件。但是，如果用JavaScript代碼去改動(dòng)文本框的值，將不會(huì)觸發(fā)change事件：
var input = $('#test-input');
input.val('change it!'); // 無(wú)法觸發(fā)change事件
有些時(shí)候，我們希望用代碼觸發(fā)change事件，可以直接調(diào)用無(wú)參數(shù)的change()方法來(lái)觸發(fā)該事件：
var input = $('#test-input');
input.val('change it!');
input.change(); // 觸發(fā)change事件
input.change()相當(dāng)于input.trigger('change')，它是trigger()方法的簡(jiǎn)寫(xiě)。
為什么我們希望手動(dòng)觸發(fā)一個(gè)事件呢？如果不這么做，很多時(shí)候，我們就得寫(xiě)兩份一模一樣的代碼。
瀏覽器安全限制
在瀏覽器中，有些JavaScript代碼只有在用戶(hù)觸發(fā)下才能執(zhí)行，例如，window.open()函數(shù)：
// 無(wú)法彈出新窗口，將被瀏覽器屏蔽:
$(function () {
window.open('/');
});
這些“敏感代碼”只能由用戶(hù)操作來(lái)觸發(fā)：
var button1 = $('#testPopupButton1');
var button2 = $('#testPopupButton2');
function popupTestWindow() {
window.open('/');
}
button1.click(function () {
popupTestWindow();
});
button2.click(function () {
// 不立刻執(zhí)行popupTestWindow()，100毫秒后執(zhí)行:
setTimeout(popupTestWindow, 100);
});
當(dāng)用戶(hù)點(diǎn)擊button1時(shí)，click事件被觸發(fā)，由于popupTestWindow()在click事件處理函數(shù)內(nèi)執(zhí)行，這是瀏覽器允許的，而button2的click事件并未立刻執(zhí)行popupTestWindow()，延遲執(zhí)行的popupTestWindow()將被瀏覽器攔截。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
利用filter函數(shù)可以從wrapper set中過(guò)濾符合條件的DOM元素，下面是其具體的用法，希望對(duì)大家有所幫助2014-05-05
jQuery JSON實(shí)現(xiàn)無(wú)刷新三級(jí)聯(lián)動(dòng)實(shí)例探討
無(wú)刷新三級(jí)聯(lián)動(dòng)的實(shí)現(xiàn)方法有很多，今天將與大家討論下jQuery JSON如何實(shí)現(xiàn)，感興趣的朋友們可以參考下哈2013-05-05
Struts2+jquery.form.js實(shí)現(xiàn)圖片與文件上傳的方法
這篇文章主要介紹了Struts2+jquery.form.js實(shí)現(xiàn)圖片與文件上傳的方法,結(jié)合實(shí)例形式詳細(xì)分析了jquery.form.js插件實(shí)現(xiàn)前臺(tái)圖片上傳提交及Struts2進(jìn)行后臺(tái)處理的相關(guān)步驟與實(shí)現(xiàn)技巧,需要的朋友可以參考下2016-05-05
這里獲得標(biāo)簽名為大寫(xiě)，如:A , DIV，需要的朋友可以參考下2012-07-07
JQuery 動(dòng)態(tài)擴(kuò)展對(duì)象之另類(lèi)視角
大家都知道javascript是動(dòng)態(tài)語(yǔ)言，它對(duì)動(dòng)態(tài)的支持是與身俱來(lái)的。2010-05-05
