jquery提供了許多的事件處理函數，下面對其總結一下，梳理一下知識點，便於記憶和使用。
一、鼠標事件
1. click()：鼠標單擊事件
$div = $("div")
$div.click(data,function (event) { //點擊盒子變藍
$(this).css({
"background": "blue",
});
console.log(event);
})
- 參數function：匿名函數有且只有一個默認的參數event，event輸出事件相關的信息；不允許有其他的參數，可以不寫。
- 參數data：有時候需要傳遞額外的數據給函數，data可以是一個數組，不需要可以省略。
擴展：
//event參數可以獲取事件的各種屬性，有幾個常用
event.target: 獲取觸發事件的元素
$div.click(function (event) {
$(event.target).css({
"background": "blue",
});
})
event.data: 獲取事件傳入的參數數據。
event.pageX: 獲取鼠標光標點擊距離文檔左邊left的距離；
event.pageY: 獲取鼠標光標點擊距離文檔上邊top的距離；
event.offsetX: 獲取鼠標光標點擊距離元素左邊left的距離；
event.offssetY: 獲取鼠標光標點擊距離元素上邊top的距離；
event.screenX: 獲取鼠標光標點擊距離屏幕left的距離；
event.screenY: 獲取鼠標光標點擊距離屏幕top的距離；
2. dblclick()：鼠標雙擊事件
$div = $("div")
$div.dblclick()(function (event) { //雙擊盒子變藍
$(this).css({
"background": "blue",
});
})
- 參數和click的用法完全一樣，event同樣可以獲取眾多的屬性。
3. 鼠標進入和離開（進入子元素也觸發）
- mouseover()：進入
- mouseout()：離開
$div = $("div")
$div.mouseover(function (event) {
$(this).css({
"background": "blue",
});
})
$div.mouseout(function (event) {
$(this).css({
"background": "blue",
});
})
- 參數同上，綁定后鼠標進入元素的子元素會再次觸發。
4. 鼠標進入和離開（進入子元素不觸發）
- mouseenter() 鼠標進入
- mouseleave() 鼠標離開
$div = $("div")
$div.mouseenter(function (event) {
$(this).css({
"background": "blue",
});
})
$div.mouseleave(function (event) {
$(this).css({
"background": "blue",
});
})
- 參數同上，綁定后鼠標進入和離開子元素不會再次觸發。
5. hover():同時為mouseenter和mouseleave事件指定處理函數
$div = $("div")
// 鼠標進入和移出事件
$div.hover(function (event) {
$div.css({
"background": "blue",
})
},function (event) {
$div.css({
"background": "red",
});
})
- hover可以同時加入兩個function，第一個是鼠標進入觸發，第二個是移出觸發。
- 前面不可以添加data參數，否則報錯。
6. 鼠標按下和松開
- mouseup() 松開鼠標
- mousedown() 按下鼠標
$div = $("div")
$div.mousedown(function (event) {
$(this).css({
"background": "blue",
});
console.log(event);
})
$div.mouseup(function (event) {
$(this).css({
"background": "blue",
});
console.log(event);
})
- 參數同click，和點擊事件click不同的是，click在鼠標點擊（包括按下和松開）后才觸發事件，這里是按下或松開就會觸發。
7. mousemove() 鼠標在元素內部移動
- 同法和參數同上。
二、鍵盤事件
*keypress()：按下鍵盤（指的是按下）
$(window).keypress([20],function (event) {
$div.css({
"background": "blue",
});
console.log(event.which);
})
- 參數：同鼠標事件，第一個參數傳遞數據，function默認參數event值按下鍵盤事件。
- 鍵盤事件需要綁定可獲得焦點的元素，如：input，body，html，一般綁定窗口：window。
- 如果需要具體判斷按下了那個按鍵，使用event.which,返回鍵盤字母的ascii碼。
注意：如果按下不放開，事件會連續觸發。
*按下和松開
- keydown() 按下鍵盤
- keyup() 松開鍵盤
$(window).keydown([20],function (event) {
$div.css({
"background": "blue",
});
console.log(event);
})
$(window).keyup([20],function (event) {
$div.css({
"background": "blue",
});
console.log(event);
})
- 參數同上。
- keydown和keypress方法區別在於，keypress事件不會觸發所有的按鍵，比如 ALT、CTRL、SHIFT、ESC等。
三、焦點事件
* 元素獲取和失去焦點
- blur() 元素失去焦點
- focus() 元素獲得焦點
$put = $("input");
$put.focus():元素自動獲取焦點
$put.focus(function (event) {
console.log(event);
$div.css({
"background": "blue",
})
})//獲取焦點后觸發事件
$put.blur(function (event) {
console.log(event);
$div.css({
"background": "blue",
})
})//失去焦點后觸發事件
- 參數同click；
- 焦點事件一般使用在input標簽上，其他的標簽一般得不到焦點。
四、表單事件
* submit()： 用戶遞交表單
$(".form").submit(function (event) {
alert("提交事件");
console.log(event);
//阻止系統默認事件
event.defaultPrevented();
return false;
})
- submit事件綁定在form表單上，點擊提交按鈕時觸發該事件，可以對系統默認的提交進行攔截。
- event.defaultPrevented();//阻止系統提交數據
五、其他事件
* ready()：DOM加載完成后執行
- 這個事件用來防止js報錯，每次引入js都要使用，不在贅述。
* resize()：瀏覽器窗口的大小發生改變觸發事件
$(window).resize(function () {
console.log($(window).width());
})
- 參數同click,這個事件需要綁定在window上才會生效，用於監控窗口的變化。
* scroll()：滾動條的位置發生變化
* change()： 表單元素的值發生變化
$put.change(function () {
$div.css({
"background": "blue",
});
})
- 當表單元素如單選框、多選框、文本框等值發生變化時觸發。
* unload() ：用戶離開頁面
$(document).unload(function () {
$div.css({
"background": "blue",
});
console.log("likai");
})
六、通用的綁定事件和解綁方法
* bind()：綁定
$(function(){
$('div').bind('mouseover click', function(event) {
alert($(this).html());
});
});
- 參數：第一個參數為需要綁定的事件的名字，可以綁定多個事件，之間用空格隔開；第二個參數是處理函數。
* unbind():解綁
$(function(){
$('#div1').bind('mouseover click', function(event) {
// $(this).unbind();解綁所有事件
$(this).unbind('mouseover');解綁指定事件
});
});
- 參數同bind。
* on():綁定和委托都可用的方法
$("div").on(event,childSelector,data,function);
//四個參數
$(function(){
$('div').on('mouseover click', function(event) {
$(this).css({
"background": "blue",
});
});
});
- 參數：
- event,需要綁定的事件，多個事件用空格隔開；
- function：事件的處理方法。
- childSelector：選擇需要委托的元素，用於委托事件。
- data：額外的傳參。
* off():解綁
$(function(){
$('#div1').on('mouseover click', function(event) {
// $(this).off();解綁所有事件
$(this).off('mouseover');解綁指定事件
});
});
* one():綁定一次自動解綁
如果需要觸發事件一次后就自動失效，比如：按鈕點擊一次后 就失效使用這個方法。
$(function(){
$('div').one('mouseover click', function(event) {
$(this).css({
"background": "blue",
});
});
});
- 注意：當一次性綁定多個事件時，多個事件相互是獨立的，即如果有一個事件被觸發，那么這個事件解綁，對另外沒有被觸發的事件沒有影響。
七、自定義和主動觸發事件
說明：對於系統沒有提供的事件，可以自己定義並主動觸發。
$div.bind("abc",function () {
$(this).css({
"background": "blue",
});
})
$div.trigger("abc");
- trigger():觸發事件的方法；這種方式類似協程。
八、事件的兩大特征運用：
1. 事件的冒泡：
- 定義：一個元素標簽如div,在上面觸發某種事件，如單擊；如果div上沒有定義單擊事件或者定義了單擊事件，但返回值不是false，即沒有阻止冒泡；那么事件會向父級傳遞，每一個定義了單擊事件的父級都會被觸發事件，直到到達document或window。
注意：冒泡是事件的固有屬性（自定義不適用），適合所有的系統事件。
- 作用： 允許多個事件被擊中到父級處理，減少綁定次數，提高性能。
$(function(){
var $box1 = $('.father');
var $box2 = $('.son');
var $box3 = $('.grandson');
$box1.click(function() {
alert('father');
});
$box2.click(function() {
alert('son');
});
$box3.click(function(event) {
alert('grandson');
// event.stopPropagation();阻止冒泡
});
$(document).click(function(event) {
alert('grandfather');
});
})
......
<div class="father">
<div class="son">
<div class="grandson"></div>
</div>
</div>
- 說明：上面代碼界面，單擊“grandson”的div，所有事件都會被觸發；
- 如果要阻止事件冒泡，使用stopPropagation()；
擴展：合並阻止操作
event.stopPropagation();//阻止冒泡
event.preventDefault();//阻止默認行為
// 合並寫法：
return false;
- 實際開發中，一般把阻止冒泡和阻止默認行為合並起來寫。
2. 事件委托
-
定義：
-
利用冒泡原理，將要處理相同事件的子元素的事件委托給父級，從而極大減少事件綁定的次數，提高性能。
-
委托事件：
- delegate():
$(function(){
$list = $('list');
$list.delegate('li', 'click', function(event) {
$(this).css({background:'red'});
});
})//給列表下面的每個li元素的事件委托給list列表。
-
參數：第一個參數是需要委托的元素，采用css選擇器的寫法，默認從一級子元素開始；第二個參數時要委托的事件，可以是多個，之間用空格隔開，第三個參數是處理函數。
-
event指觸發事件的那個對象。
- on():
$(function(){
$list = $('list');
$list.on('click', 'li', function(event) {
$(this).css({background:'red'});
});
})//給列表下面的每個li元素的事件委托給list列表。
- 參數：
- 第一個是需要委托的事件，多個用空格隔開；
- 第二個是需要委托事件的子元素；
- 第三個是觸發處理函數。
- one():委托觸發一次自動取消委托
$(function(){
$('div').one('click',"li" function(event) {
$(this).css({
"background": "blue",
});
});
});
-
說明：參數用法和on事件一樣。
-
取消委托
- undelegate():
$list.undelegate();//選擇器找到委托對象取消委托
- 使用undelegate（）方法取消委托，所有的子元素的委托都將被取消。
- off():
$list.off("click","li");
總結：
- 每一個事件相當於一個協程，異步操作；
- 所有的事件並列處理，事件不要嵌套事件，否則會出現重復綁定。
- 可以進行事件委托盡量使用委托，減少系統資源消耗。
- 作者：天宇之游
- 出處：http://www.cnblogs.com/cwp-bg/
- 本文版權歸作者和博客園共有，歡迎轉載、交流，但未經作者同意必須保留此段聲明，且在文章明顯位置給出原文鏈接。