jQuery事件用法詳解
JavaScript在瀏覽器中以單線程模式運行，頁面加載后，一旦頁面上所有的JavaScript代碼被執(zhí)行完后，就只能依賴觸發(fā)事件來執(zhí)行JavaScript代碼。
我們可以用jQuery這樣綁定一個click事件：
/* HTML:
*
* <a id="test-link" href="#0">點我試試</a>
*
*/
// 獲取超鏈接的jQuery對象:
var a = $('#test-link');
a.on('click', function () {
alert('Hello!');
});
on方法用來綁定一個事件，我們需要傳入事件名稱和對應的處理函數(shù)。
另一種更簡化的寫法是直接調(diào)用click()方法：
a.click(function () {
alert('Hello!');
});
jQuery能夠綁定的事件
鼠標事件
click: 鼠標單擊時觸發(fā)；
dblclick：鼠標雙擊時觸發(fā)；
mouseenter：鼠標進入時觸發(fā)；
mouseleave：鼠標移出時觸發(fā)；
mousemove：鼠標在DOM內(nèi)部移動時觸發(fā)；
hover：鼠標進入和退出時觸發(fā)兩個函數(shù)，相當于mouseenter加上mouseleave。
鍵盤事件
鍵盤事件僅作用在當前焦點的DOM上，通常是<input>和<textarea>
keydown：鍵盤按下時觸發(fā)；
keyup：鍵盤松開時觸發(fā)；
keypress：按一次鍵后觸發(fā)
其他事件
ready僅作用于document對象。由于ready事件在DOM完成初始化后觸發(fā)，且只觸發(fā)一次，所以非常適合用來寫其他的初始化代碼。
focus：當DOM獲得焦點時觸發(fā)；
blur：當DOM失去焦點時觸發(fā)；
change：當<input>、<select>或<textarea>的內(nèi)容改變時觸發(fā)；
submit：當<form>提交時觸發(fā)；
ready：當頁面被載入并且DOM樹完成初始化后觸發(fā)
下面的代碼沒有預期的效果：
<html>
<head>
<script>
// 代碼有誤:
$('#testForm).on('submit', function () {
alert('submit!');
});
</script>
</head>
<body>
<form id="testForm">
...
</form>
</body>
因為JavaScript在此執(zhí)行的時候，<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...
});
可以反復綁定事件處理函數(shù)，它們會依次執(zhí)行：
$(function () {
console.log('init A...');
});
$(function () {
console.log('init B...');
});
$(function () {
console.log('init C...');
});
事件參數(shù)
有些事件，如mousemove和keypress，我們需要獲取鼠標位置和按鍵的值，否則監(jiān)聽這些事件就沒什么意義了。所有事件都會傳入Event對象作為參數(shù)（下邊e就是一個event對象），可以從Event對象上獲取到更多的信息：
$(function () {
$('#testMouseMoveDiv').mousemove(function (e) {
$('#testMouseMoveSpan').text('pageX = ' + e.pageX + ', pageY = ' + e.pageY);
});
});
取消綁定
一個已被綁定的事件可以解除綁定，通過off('click', function)實現(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)容改動，當用戶在文本框中輸入時，就會觸發(fā)change事件。但是，如果用JavaScript代碼去改動文本框的值，將不會觸發(fā)change事件。
有些時候，我們希望用代碼觸發(fā)change事件，可以直接調(diào)用無參數(shù)的change()方法來觸發(fā)該事件：
var input = $('#test-input');
input.val('change it!');
input.change(); // 觸發(fā)change事件
input.change()相當于input.trigger('change')，它是trigger()方法的簡寫。
瀏覽器安全限制
在瀏覽器中，有些JavaScript代碼只有在用戶觸發(fā)下才能執(zhí)行，例如，window.open()函數(shù)。
以上就是本文的全部內(nèi)容，希望對大家有所幫助，希望大家繼續(xù)關注腳本之家的最新內(nèi)容。
相關文章
操作下拉列表框的jquery代碼，方便學習jquery的朋友。2010-02-02
發(fā)開中個人是比較喜歡用Repeater控件，特別是前臺可老是遇到一個問題就是一個列表的最后一項總是和上面的樣式不一樣 如上面的都有下邊框，最后一個就沒有2010-01-01
下面小編就為大家?guī)硪黄猨query實現(xiàn)用戶登陸界面(示例講解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
jQuery UI Dialog控件中的表單無法正常提交的解決方法
研究了頁面源碼后發(fā)現(xiàn)，jQuery UI Dialog控件初始化時動態(tài)生成的HTML元素被添加到頁面的尾部、form元素的后面，而原始的Dialog模板部分（其內(nèi)包含表單元素）也被移到了 動態(tài)生成的HTML元素內(nèi)。2010-12-12
用jQuery取值，當一個id中含有.時，這個時候正常的取法是做不到的，因此請看下文2014-05-05
基于jquery鼠標點擊其它地方隱藏層的實例代碼，需要的朋友可以參考下。2011-01-01
這篇文章主要介紹了jQuery插件的簡單用法,列舉了分頁插件、放大鏡插件、自動完成插件、上傳插件、日歷插件等的簡單使用方法,需要的朋友可以參考下2016-07-07
resize事件是在窗口或框架的大小被調(diào)整時發(fā)生，包括最小化、最大化。在IE和Opera瀏覽器中，只要窗口邊框被拖動，就觸發(fā)該事件，在Mozilla瀏覽器中，resize 事件只是在停止改變窗口大小時才會觸發(fā)。2011-07-07
在toggle()方法中，可以依次調(diào)用N個指定的函數(shù)，直到最后一個函數(shù)，然后重復對這個函數(shù)輪番調(diào)用,在函數(shù)之間切換調(diào)用的時候相當?shù)姆奖?接下來將會詳細介紹toggle()方法的使用，感興趣的你可不要錯過了啊2013-02-02
SuperSlide 是致力于實現(xiàn)網(wǎng)站統(tǒng)一特效調(diào)用的函數(shù)，能解決大部分標簽切換、焦點圖切換等效果，還能多個slide組合創(chuàng)造更多的效果。（兼容ie內(nèi)核(包括無敵的 ie6)、webkit內(nèi)核、ff、opera等主流瀏覽器）。2015-03-03