目錄

• 事件
• 頁面載入
• 事件委派
• 事件切換
• 事件
• 總結

事件

頁面載入

1.ready(fn)當DOM載入就緒可以查詢及操縱時繫結一個要執行的函式

$(document).ready(function(){
  // 在這裡寫你的程式碼...
});
// 下面是簡寫
$(function($) {
  // 你可以在這裡繼續使用$作為別名...
});
gmQdejbsfB

2.事件處理on(events,fn)在選擇元素上繫結一個或多個事件的事件處理函式

// 給p標籤新增點選事件監聽
$("p").on("click",function(){
	alert( $(this).text() );
});
// 第二種寫法 等效於上面
$("p").click(function(){
	alert( $(this).text() );
});

3.off(events,[fn])在選擇元素上移除一個或多個事件的事件處理函式

// 移除p標籤繫結的所有事件監聽
$("p").off()
// 移除p標籤繫結的click事件監聽
$("p").off( "click")

4.bind(events,fn)為每個匹配元素的特定事件繫結事件處理函式

// 移除p標籤繫結的所有事件監聽
$("p").bind("click",function(){
  alert( $(this).text() );
});
// 同時繫結多個事件型別
$('#foo').bind('mouseenter mouseleave',function() {
  alert();
});

5.unbind(type,fn]])bind()的反向操作，從每一個匹配的元素中刪除繫結的事件

// 把所有段落的所有事件取消繫結
$("p").unbind()
// 將段落的click事件取消繫結
$("p").unbind( "click" )

6.one(type,[data],fn)為每一個匹配元素的特定事件（像click）繫結一個一次性的事件處理函式

// 當所有段落被第一次點選的時候，顯示所有其文字
$("p").one("click",function(){
  alert( $(this).text() );
});

事件委派

1.delegate(selector,[type],fn)

  <div style="background-color:red">
      <p>這是一個段落。</p>
      <button>請點選這裡</button>
  </div>

// 當點選button時，隱藏或顯示 p 元素
  $("div").delegate("button","click",function () {
      $("p").slideToggle();
  });

2.undelegate([selector,fn])刪除由 delegate() 方法新增的一個或多個事件處理程式

// 從p元素刪除由 delegate() 方法新增的所有事件處理器
$("p").undelegate();
// 從p元素刪除由 delegate() 方法新增的所有click事件處理器
$("p").undelegate( "click" )

事件切換

1.hover([over,]out)一個模仿懸停事件（滑鼠移動到一個物件上面及移出這個物件）的方法

over:滑鼠移到元素上要觸發的函式

out:滑鼠移出元素要觸發的函式

// 滑鼠懸停的表格加上特定的類
$("td").hover(
  function () {
    $(this).addClass("hover");
  },function () {
    $(this).removeClass("hover");
  }
);

事件

1.blur([[data],fn])當元素失去焦點時觸發 blur 事件

// 滑鼠懸停的表格加上特定的類
$("td").hover(
  function () {
    $(this).addClass("hover");
  },function () {
    $(this).removeClass("hover");
  }
);

2.change([[data],fn])當元素的值發生改變時，會發生 change 事件

// 觸發被選元素的 change 事件
$(selector).change();

3.click([[data],fn])觸發每一個匹配元素的click事件

// 觸發頁面內所有段落的點選事件
$("p").click();

4.dblclick([[data],fn])當雙擊元素時，會發生 dblclick 事件

// 給頁面上每個段落的雙擊事件綁上 "Hello World!" 警告框
$("p").dblclick( function () { alert("Hello World!"); });

5.error([[data],fn])當元素遇到錯誤（沒有正確載入）時，發生 error 事件

// 在伺服器端記錄錯誤日誌:
$(window).error(function(msg,url,line){
  .post("_error_log.",{ msg: msg,url: url,line: line });
});

6.focus([[data],fn])當元素獲得焦點時，觸發 focus 事件

// 當頁面載入後將 id 為 'login' 的元素設定焦點:
$(document).ready(function(){
  $("#login").focus();
});

7.focusin([data],fn)當元素獲得焦點時，觸發 focuwww.cppcns.comsin 事件

<p><input type="text" /> <span>focusout fire</span></p>
<p><input type="password" /> <span>focusout fire</span></p>

// 獲得焦點後會觸發動畫
$("p").focusin(function() {
	$(this).find("span").('display','inline').fadeOut(1000);
});

8.focusout([data],fn)當元素失去焦點時觸發 focusout 事件

// 獲得焦點後會觸發動畫
$("p").focusout(function() {
  $(this).find("span").css('display','inline').fadeOut(1000);
});

9.keydown([[data],fn])當鍵盤或按鈕被按下時，發生 keydown 事件

// 在頁面內對鍵盤按鍵做出迴應，可以使用如下程式碼
$(window).keydown(function(event){
  switch(event.keyCode) {
    // ...
    // 不同的按鍵可以做不同的事情
    // 不同的瀏覽器的keycode不同
    // 更多詳細資訊:     http://unixpapa.com/js/key.html
    // ...
  }
});

10.keypress([[data],fn])當鍵盤或按鈕被按下時，發生 keypress 事件

// 計算在輸入域中的按鍵次數
$("input").keydown(function(){
  $("span").text(i+=1);
});

11.keyup([[data],fn])當按鈕被鬆開時，發生 keyup 事件。它發生在當前獲得焦點的元素上

// 當按下按鍵時，改變文字域的顏色
$("input").keyup(function(){
  $("input").css("background-color","#D6D6FF");
});

12.mousedown([[data],fn])當滑鼠指標移動到元素上方，並按下滑鼠按鍵時，會發生 mousedown 事件

// 當按下滑鼠按鈕時，隱藏或顯示元素
$("button").mousedown(function(){
  $("p").slideToggle();
});

13.mouseenter([[data],fn])當滑鼠指標穿過元素時，會發生 mouseenter 事件

// 當滑鼠指標進入（穿過）元素時，改變元素的背景色
$("p").mouseenter(function(){
  $("p").css("background-color","yellow");
});

14.mouseleave([[data],fn])當滑鼠指標離開元素時，會發生 mouseleave 事件

// 當滑鼠指標離開元素時，改變元素的背景色$("p").mouseleave(function(){  $("p").css("background-color","#E9E9E4");});// 當滑鼠指標離開元素時，改變元素的背景色
$("p").mouseleave(function(){
  $("p").css("background-color","#E9E9E4");
});

15.mousemove([[data],fn])當滑鼠指標在指定的元素中移動時，就會發生 mousemove 事件

事件座標

• event.clientX,event.clientY相對於視口的左上角
• event.pageX,event.pageY相對於頁面的左上角
• event.offsetX,event.offsetY相對於事件元素的左上角

// 獲得滑鼠指標在頁面中的位置
$(document).mousemove(function(e){
  $("span").text(e.pageX + "," + e.pageY);
});

16.mouseout([[data],fn])當滑鼠指標從元素上移開時，發生 mouseout 事件

// 當滑鼠從元素上移開時，改變元素的背景色：
$("p").mouseout(function(){
  $("p").css("background-color","#E9E9E4");
});

17.mouseover([[data],fn])當滑鼠指標位於元素上方時，會發生 mouseover 事件

// 當滑鼠指標位於元素上方時時，改變元素的背景色
$("p").mouseover(function(){
  $("p").css("background-color","yellow");
});

18.mouseup([[data],fn])當在元素上放鬆滑鼠按鈕時，會發生 mouseup 事件

// 當鬆開滑鼠按鈕時，隱藏或顯示元素
$("button").mouseup(function(){
  $("p").slideToggle();
});

19.resize([[data],fn])當調整瀏覽器視窗的大小時，發生 resize 事件

// 改變頁面視窗的大小時彈出警告窗
$(window).resize(function(){
  alert("Stop it!");
});

20.scroll([[data],fn])當用戶滾動指定的元素時，會發生 scroll 事件

// 當頁面滾動條變化時，執行的函式:
$(window).scroll( function() { 
 	 alert("Stop it!");
});

21.select([[data],fn])當 textarea 或文字型別的 input 元素中的文字被選擇時，會發生 select 事件

// 觸發所有input元素的select事件:
$("input").select();

22.submit([[data],fn])當提交表單時，會發生 submit 事件

// 提交本頁的第一個表單:
$("form:first").submit();
// 阻止表單提交:
$("form").submit( function () {
  return false;
} );

23.unload([[data],fn])在當用戶離開頁面時，會發生 unload 事件

點選某個離開頁面的連結

在位址列中鍵入了新的 URL

使用前進或後退按鈕

關閉瀏覽器

重新載入頁面

// 頁面解除安裝的時候彈出一個警告框:
$(window).unload( function () { alert("Bye now!"); } );

總結

本篇文章gmQdejbsfB就到這裡了，希望能夠給你帶來幫助，也希望您能夠多多關注我們的更多內容!