jQuery事件用法詳解
JavaScript在瀏覽器中以單線程模式運(yùn)行，頁面加載后，一旦頁面上所有的JavaScript代碼被執(zhí)行完后，就只能依賴觸發(fā)事件來執(zhí)行JavaScript代碼。
我們可以用jQuery這樣綁定一個(gè)click事件：
/* HTML:
*
* <a id="test-link" href="#0">點(diǎn)我試試</a>
*
*/
// 獲取超鏈接的jQuery對(duì)象:
var a = $('#test-link');
a.on('click', function () {
alert('Hello!');
});
on方法用來綁定一個(gè)事件，我們需要傳入事件名稱和對(duì)應(yīng)的處理函數(shù)。
另一種更簡化的寫法是直接調(diào)用click()方法：
a.click(function () {
alert('Hello!');
});
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。
鍵盤事件
鍵盤事件僅作用在當(dāng)前焦點(diǎn)的DOM上，通常是<input>和<textarea>
keydown：鍵盤按下時(shí)觸發(fā)；
keyup：鍵盤松開時(shí)觸發(fā)；
keypress：按一次鍵后觸發(fā)
其他事件
ready僅作用于document對(duì)象。由于ready事件在DOM完成初始化后觸發(fā)，且只觸發(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)頁面被載入并且DOM樹完成初始化后觸發(fā)
下面的代碼沒有預(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)返回[]，并沒有綁定事件到任何DOM上
正確版本：
<script>
$(document).on('ready', function () {
$('#testForm).on('submit', function () {
alert('submit!');
});
});
</script>
ready事件使用非常普遍，也這樣簡化：
$(document).ready(function () {
$('#testForm).submit(function () {
alert('submit!');
});
});
甚至還可以再簡化為(最為常見):
$(function () {
// init...
});
可以反復(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)聽這些事件就沒什么意義了。所有事件都會(huì)傳入Event對(duì)象作為參數(shù)（下邊e就是一個(gè)event對(duì)象），可以從Event對(duì)象上獲取到更多的信息：
$(function () {
$('#testMouseMoveDiv').mousemove(function (e) {
$('#testMouseMoveSpan').text('pageX = ' + e.pageX + ', pageY = ' + e.pageY);
});
});
取消綁定
一個(gè)已被綁定的事件可以解除綁定，通過off('click', function)實(shí)現(xiàn)：
function hello() {
alert('hello!');
}
a.click(hello); // 綁定事件
// 10秒鐘后解除綁定:
setTimeout(function () {
a.off('click', hello);
}, 10000);
可以使用off('click')一次性移除已綁定的click事件的所有處理函數(shù)
無參數(shù)調(diào)用off()一次性移除已綁定的所有類型的事件處理函數(shù)
事件觸發(fā)條件
事件的觸發(fā)總是由用戶操作引發(fā)的。例如，我們監(jiān)控文本框的內(nèi)容改動(dòng)，當(dāng)用戶在文本框中輸入時(shí)，就會(huì)觸發(fā)change事件。但是，如果用JavaScript代碼去改動(dòng)文本框的值，將不會(huì)觸發(fā)change事件。
有些時(shí)候，我們希望用代碼觸發(fā)change事件，可以直接調(diào)用無參數(shù)的change()方法來觸發(fā)該事件：
var input = $('#test-input');
input.val('change it!');
input.change(); // 觸發(fā)change事件
input.change()相當(dāng)于input.trigger('change')，它是trigger()方法的簡寫。
瀏覽器安全限制
在瀏覽器中，有些JavaScript代碼只有在用戶觸發(fā)下才能執(zhí)行，例如，window.open()函數(shù)。
以上就是本文的全部內(nèi)容，希望對(duì)大家有所幫助，希望大家繼續(xù)關(guān)注腳本之家的最新內(nèi)容。
- JQuery?綁定select標(biāo)簽的onchange事件，彈出選擇的值，并實(shí)現(xiàn)跳轉(zhuǎn)、傳參
- JQuery觸發(fā)radio或checkbox的change事件
- jquery獲取焦點(diǎn)和失去焦點(diǎn)事件代碼
- jQuery事件綁定.on()簡要概述及應(yīng)用
- jQuery事件 delegate()使用方法介紹
- jquery鍵盤事件使用介紹
- 使用JS或jQuery模擬鼠標(biāo)點(diǎn)擊a標(biāo)簽事件代碼
- JQuery入門——事件切換之hover()方法應(yīng)用介紹
- jquery移除、綁定、觸發(fā)元素事件使用示例詳解
- jquery實(shí)現(xiàn)input輸入框?qū)崟r(shí)輸入觸發(fā)事件代碼
相關(guān)文章
如何在頁面上同時(shí)使用 jQuery 和其他框架？2013-04-04
jQuery textarea的長度進(jìn)行驗(yàn)證
Textarea 控件不能使用form validate.js 進(jìn)行判斷.2009-05-05
jquery轉(zhuǎn)盤抽獎(jiǎng)功能實(shí)現(xiàn)
這篇文章主要介紹了jquery轉(zhuǎn)盤抽獎(jiǎng)功能實(shí)現(xiàn)，實(shí)現(xiàn)的效果是九宮格大轉(zhuǎn)盤抽獎(jiǎng)，應(yīng)用特別廣泛的轉(zhuǎn)盤抽獎(jiǎng)方式，感興趣的小伙伴們可以參考一下2015-11-11
這篇文章主要介紹了jquery分頁插件jpaginate不兼容ie的問題,需要的朋友可以參考下2014-04-04
jquery實(shí)現(xiàn)點(diǎn)擊頁面計(jì)算點(diǎn)擊次數(shù)
這篇文章主要給大家分享了一段使用jquery實(shí)現(xiàn)點(diǎn)擊頁面計(jì)算點(diǎn)擊次數(shù)的代碼，非常實(shí)用，有需要的小伙伴參考下。2015-01-01
JQuery+Bootstrap 自定義全屏Loading插件的示例demo
這篇文章主要介紹了JQuery+Bootstrap 自定義全屏Loading插件，本文通過示例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-07-07
寫得不錯(cuò)的jquery table鼠標(biāo)經(jīng)過變色代碼
鼠標(biāo)經(jīng)過table變色的效果，想必大家都有遇到過吧，其實(shí)實(shí)現(xiàn)并不難，在本文為大家詳細(xì)介紹下jquery是如何實(shí)現(xiàn)的，感興趣的朋友可以參看下2013-09-09
這篇文章主要介紹了jQuery動(dòng)畫特效,詳細(xì)敘述了jQuery動(dòng)畫特效的實(shí)現(xiàn)方法,非常實(shí)用,需要的朋友可以參考下2014-08-08
jquery實(shí)現(xiàn)帶二級(jí)菜單的導(dǎo)航示例
這篇文章主要介紹了jquery實(shí)現(xiàn)帶二級(jí)菜單的導(dǎo)航示例,需要的朋友可以參考下2014-04-04
Jquery 實(shí)現(xiàn)表格顏色交替變化鼠標(biāo)移過顏色變化實(shí)例
Jquery 實(shí)現(xiàn)表格顏色交替變化，點(diǎn)擊選中行，鼠標(biāo)移過顏色變化效果附演示代碼 ，喜歡的朋友可以參考下2013-08-08