## 失焦 blur(\[\[data,\] fn\]) 概述：當元素失去焦點時觸發 blur 事件。 ~~~ $(":text").blur(); // 觸發所有文本框的 blur 事件 // 觸發所有文本框的 blur 事件，打印輸入值 $(":text").blur(function() { console.log($(this).val()); }); ~~~ ## 改變 change(\[\[data,\] fn\]) 概述：當元素的值發生改變時，會發生 change 事件。 ~~~ // 輸入框內容改變時，打印輸入值 $(":text").change(function() { console.log($(this).val()); }); ~~~ ## 單擊 click(\[\[data,\] fn\]) 概述：觸發每一個匹配元素的 click 事件。 ~~~ $('button').click(); // 觸發頁面內所有按鈕的點擊事件 // 點擊按鈕隱藏所有段落 $('#btn1').click(function () { $('p').hide(); }); ~~~ ## 雙擊 dblclick(\[\[data,\] fn\]) 概述：當雙擊元素時，會發生 dblclick 事件。 ~~~ $("button").dblclick(function () { alert("Hello World!"); }); ~~~ ## 聚焦 focus(\[\[data,\] fn\]) 概述：當元素獲得焦點時，觸發 focus 事件。 ~~~ // 當頁面加載后將 id 為 'login' 的元素設置焦點 $(document).ready(function(){ $("#login").focus(); }); // 獲得焦點時，打印的文本框的值 $(":text").focus(function(){ console.log($(this).val()); }); ~~~ ## 聚焦 focusin(\[\[data,\] fn\]) 概述：當元素獲得焦點時，觸發 focusin 事件。可以在父元素上檢測子元素獲取焦點的情況。 ~~~ <p><input type="text" /> <span>focusout fire</span></p> <p><input type="password" /> <span>focusout fire</span></p> // 獲得焦點后會觸發動畫 $("p").focusin(function() { $(this).find("span").css('color','red').fadeOut(1000); }); ~~~ ## 失焦 focusout(\[\[data,\] fn\]) 概述：當元素失去焦點時觸發 focusout 事件。可以在父元素上檢測子元素失去焦點的情況。 ~~~ // 失去焦點后會觸發動畫 $("p").focusout(function() { $(this).find("span").css('color', 'blue').fadeOut(1000); }); ~~~ ## 按鍵 keypress(\[\[data,\] fn\]) 概述：當鍵盤或按鈕被按下時，發生 keypress 事件。 ~~~ $(':text').keypress(function(event) { console.log(event.keyCode); }); ~~~ ## 鍵下 keydown(\[\[data,\] fn\]) 概述：當鍵盤或按鈕被按下時，發生 keydown 事件。 ~~~ // 在頁面內對鍵盤按鍵做出回應 $(window).keydown(function(event){ switch(event.keyCode) { // ... // 不同的按鍵可以做不同的事情 // 不同的瀏覽器的 keycode 不同 // 常用 keyCode： 空格 32 Enter 13 ESC 27 } }); ~~~ ## 鍵升 keyup(\[\[data,\] fn\]) 概述：當按鈕被松開時，發生 keyup 事件。它發生在當前獲得焦點的元素上。 ~~~ // 當按下按鍵時，改變文本域的顏色 $("input").keyup(function(){ $("input").css("background-color","#D6D6FF"); }); ~~~ ## 鼠標按下 mousedown(\[\[data,\] fn\]) 概述：當鼠標指針移動到元素上方，并按下鼠標按鍵時，會發生 mousedown 事件。 ~~~ // 當按下鼠標按鈕時，隱藏或顯示元素 $("button").mousedown(function(){ $("p").slideToggle(); }); ~~~ ## 鼠標抬起 mouseup(\[\[data,\] fn\]) 概述：當在元素上放松鼠標按鈕時，會發生 mouseup 事件。 ~~~ // 當松開鼠標按鈕時，隱藏或顯示元素 $("button").mouseup(function(){ $("p").slideToggle(); }); ~~~ ## 進入 mouseenter(\[\[data,\] fn\]) 概述：當鼠標指針穿過元素時，會發生 mouseenter 事件。 ~~~ // 當鼠標指針進入（穿過）元素時，改變元素的背景色 $("p").mouseenter(function(){ $(this).css("background-color","yellow"); }); ~~~ ## 離開 mouseleave(\[\[data,\] fn\]) 概述：當鼠標指針離開元素時，會發生 mouseleave 事件。 ~~~ // 當鼠標指針離開元素時，改變元素的背景色 $("p").mouseleave(function(){ $(this).css("background-color","green"); }); ~~~ ## 移動 mousemove(\[\[data,\] fn\]) 概述：當鼠標指針在指定的元素中移動時，就會發生 mousemove 事件。 ~~~ // 獲得鼠標指針在頁面中的位置 $(document).mousemove(function(e){ $("span").text(e.pageX + ", " + e.pageY); }); ~~~ ## 上方 mouseover(\[\[data,\] fn\]) 概述：當鼠標指針位于元素上方時，會發生 mouseover 事件。不論鼠標指針穿過被選元素或其子元素，都會觸發 mouseover 事件。 ~~~ // 當鼠標指針位于元素上方時時，改變元素的背景色 $("p").mouseover(function(){ $("p").css("background-color","yellow"); }); ~~~ ## 離開 mouseout(\[\[data,\] fn\]) 概述：當鼠標指針從元素上移開時，發生 mouseout 事件。不論鼠標指針離開被選元素還是任何子元素，都會觸發 mouseout 事件。 ~~~ // 當鼠標從元素上移開時，改變元素的背景色 $("p").mouseout(function(){ $("p").css("background-color","#E9E9E4"); }); ~~~ ## 調整大小 resize(\[\[data,\] fn\]) 概述：當調整瀏覽器窗口的大小時，發生 resize 事件。 ~~~ // 對瀏覽器窗口調整大小進行提示 $(window).resize(function() { $('span').text('剛才調整了窗口大小'); }); ~~~ ## 滾動 scroll(\[\[data,\] fn\]) 概述：當用戶滾動指定的元素時，會發生 scroll 事件。 ~~~ // 當頁面滾動條變化時，進行提示 $(window).scroll(function(event) { console.log('正在滾動頁面'); console.log(event); }); ~~~ ## 選擇 select(\[\[data,\] fn\]) 概述：當 textarea 或文本類型的 input 元素中的文本被選擇時，會發生 select 事件。 ~~~ // 當文本框中文本被選中時執行的函數 $(":text").select( function () { /* ...do something... */ } ); ~~~ ## 提交 submit(\[\[data,\] fn\]) 概述：當提交表單時，會發生 submit 事件。 ~~~ $("form:first").submit(); // 提交表單 // 阻止表單提交 $("form").submit(function (event) { return false; }); ~~~