事件處理

一、事件API

jQuery物件的核心事件方法，核心事件函式，主要用於為元素的任意事件(包括自定義事件)新增、取消、觸發繫結的一個或多個事件處理函式

二、on()方法(首選方法)

1、說明

on() 方法在被選元素及子元素上新增一個或多個事件處理程式。
自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。該方法給 API 帶來很多便利，我們推薦使用該方法，它簡化了 jQuery 程式碼庫。

2、語法

​ $(selector).on(event,childSelector,data,function,map)

3、引數

1. event:必需。規定要從被選元素移除的一個或多個事件或名稱空間。由空格分隔多個事件值。必須是有效的事件
2. data:可選。規定只能新增到指定的子元素上的事件處理程式（且不是選擇器本身，比如已廢棄的 delegate() 方法）。
3. function:可選。規定當事件發生時執行的函式。
4. map:規定事件對映 ({event:function, event:function, …})，包含要新增到元素的一個或多個事件，以及當事件發生時執行的函式。

三、toggle([speed],[easing],[fn])

1、說明

用於繫結兩個或多個事件處理器函式，以響應被選元素的輪流的click

事件。如果元素是可見的，切換為隱藏的；如果元素是隱藏的，切換為可見的。

2、語法

​ $(selector).toggle(speed,easing,function)

3、引數

1. speed： 隱藏/顯示 效果的速度。預設是 "0"毫秒。可能的值：slow，normal，fast。
2. easing：可選引數。用來指定切換效果，預設是"swing"，可用引數"linear"。
3. fn：在動畫完成時執行的函式，每個元素執行一次。

四、change([[data],fn])

1、說明

當元素的值發生改變時，會發生change事件。

該事件僅適用於文字域（text field），以及 textarea 和 select 元素。當用於 select 元素時，change

事件會在選擇某個選項時發生。當用於 text field 或 text area 時，該事件會在元素失去焦點時發生

2、語法

​ $(selector).change(data,fn);

3、引數

1. data：fn處理函式的引數或資料。
2. fn：在每一個匹配元素的keydown事件中繫結的處理函式。

五、click([[data],fn])

1、說明

觸發每一個匹配元素的click事件。這個函式會呼叫執行繫結到click事件的所有函式。

2、語法

​ $(selector).click(data,fn);

3、引數

1. data：fn處理函式的引數或資料。
2. fn：在每一個匹配元素的click事件中繫結的處理函式。

六、mouseover([[data],fn])

1、說明

當滑鼠指標位於元素上方時，會發生mouseover事件。該事件大多數時候會與mouseout事件一起使用。

與mouseenter事件不同，不論滑鼠指標穿過被選元素或其子元素，都會觸發mouseover事件。只有在滑鼠指標穿過被選元素時，才會觸發mouseenter事件

2、語法

​ $(selector).mouseover(data,fn);

3、引數

1. data：fn處理函式的引數或資料。
2. fn：在每一個匹配元素的keydown事件中繫結的處理函式。

七、mouseout([[data],fn])

1、說明

當滑鼠指標從元素上移開時，發生mouseout事件。該事件大多數時候會與mouseover事件一起使用。

2、語法

​ $(selector).mouseout(data,fn);

3、引數

1. data：fn處理函式的引數或資料。
2. fn：在每一個匹配元素的keydown事件中繫結的處理函式。

八、select([[data],fn])

1、說明

當textarea或文字型別的input元素中的文字被選擇時，會發生select事件

2、語法

​ $(selector).mouseout(data,fn);

3、引數

1. data：fn處理函式的引數或資料。
2. fn：在每一個匹配元素的select事件中繫結的處理函式。

九、submit([[data],fn])

1、說明

當提交表單時，會發生 submit 事件。該事件只適用於表單元素。

2、語法

​ $(selector).submit(data,fn);

3、引數

1. data：fn處理函式的引數或資料。
2. fn：在每一個匹配元素的submit事件中繫結的處理函式。

十、示例程式碼

給p元素新增單擊事件
$("p").on("click",function(){
alert("");
});
$("p").on({
  click:function{
  }
  dblclick:function{	
  }
});

給a元素新增hover事件
$("a").hover(
  function () {
    $(this).addClass("hover");
  },
  function () {
    $(this).removeClass("hover");
  }
);    


/*用於繫結兩個或多個事件處理器函式，以響應被選元素的輪流的click事件。如果元素是可見的，切換為隱藏的；如果元素是隱藏的，切換為可見的*/
$("li").toggle(
  function () {
    $(this).addClass("visibled");
  },
  function () {
    $(this).removeClass("visibled");
  }
);  
	
$(selector).change(function(){
	
});      	
	
$("btn").click(function(){
	
});

$("a").mouseout(function(){
  $(this).css("color","#ffaaaa");
});  

$("a").mouseover(function(){
  $(this).css("color","red");
});   

$(":text").select( function () { /* ...do something... */ } );   



$("form").submit( function () {
  return false;
} );  

一、其它事件

1. 元素事件

2. 瀏覽器事件——主要用於瀏覽器Window物件的事件

   resize()	1.0	為resize事件繫結處理函式，或觸發該事件。該事件會在瀏覽器視窗大小被改變時觸發。
   scroll()	1.2	為scroll事件繫結處理函式，或觸發該事件。該事件會在元素滾動(滾動條有變化)時觸發。

3. 表單事件——主要用於表單元素的事件

   focus()	1.0	為focus事件繫結處理函式，或觸發該事件。該事件會在元素獲得焦點時觸發。
   blur()	1.0	為blur事件繫結處理函式，或觸發該事件。該事件會在元素失去焦點時觸發。
   focusin()	1.0	為focusin事件繫結處理函式。該事件會在元素獲得焦點時觸發。
   focusout()	1.0	為focusout事件繫結處理函式。該事件會在元素失去焦點時觸發。
   change()	1.0	為change事件繫結處理函式，或觸發該事件。該事件會在元素的值被更改時觸發。
   select()	1.0	為select事件繫結處理函式，或觸發該事件。該事件會在元素的使用者輸入被選中時觸發。
   submit()	1.0	為submit事件繫結處理函式，或觸發該事件。該事件會在表單被提交時觸發。

4. 鍵盤事件——與鍵盤按鍵操作相關的事件

   keydown()	1.0	為keydown事件繫結處理函式，或觸發該事件。該事件會在鍵盤按鍵被按下時觸發。
   keypress()	1.0	為keypress事件繫結處理函式，或觸發該事件。該事件會在鍵盤按鍵被按下時觸發。
   keyup()	1.0	為keyup事件繫結處理函式，或觸發該事件。該事件會在鍵盤按鍵被按下並釋放時觸發。

5. 滑鼠事件——與滑鼠按鍵操作相關的事件

   click()	1.0	為click事件繫結處理函式，或觸發該事件。該事件會在點選滑鼠按鈕時觸發。
   dblclick()	1.0	為dblclick事件繫結處理函式，或觸發該事件。該事件會在雙擊滑鼠按鈕時觸發。
   toggle()	1.01.81.9	為click事件繫結兩個以上的處理函式，每次觸發事件時將輪流切換執行其中的單個函式。
   hover()	1.0	為hover事件繫結處理函式。該事件會在滑鼠進入或離開元素時觸發。
   mouseenter()	1.0	為mouseenter事件繫結處理函式。該事件會在滑鼠進入元素時觸發。
   mouseleave()	1.0	為mouseleave事件繫結處理函式。該事件會在滑鼠離開元素時觸發。
   mouseover()	1.0	為mouseover事件繫結處理函式。該事件會在滑鼠進入元素時觸發。
   mouseout()	1.0	為mouseout事件繫結處理函式。該事件會在滑鼠離開元素時觸發。
   mousedown()	1.0	為mousedown事件繫結處理函式。該事件會在滑鼠按鈕被按下時觸發。
   mouseup()	1.0	為mouseup事件繫結處理函式。該事件會在滑鼠按鈕被按下並釋放時觸發。