1. 繫結簡單事件

---

在DOM中DOM0級繫結事件的方式是直接給事件屬性賦值，但是這樣有個缺點就是每次指定的事件處理程式會把之前的覆蓋掉。

jQuery簡單繫結事件的方式，可以讓我繫結多個事件處理程式跟DOM2級繫結事件的方式一樣.

如果需要了解DOM的教程參考地址：https://chuanke.baidu.com/v5508922-239160-1771112.html

1.1 簡單繫結click事件

• 語法格式：click([[data],fn])

• 引數：

  • data 可以省略，給可傳入到函式fn處理。可以通過事件處理程式的事件物件的data屬性獲取此值。

  • fn 事件處理程式。fn的內部作用域中this指向當前的DOM物件（注意不是jQuery的包裝物件)

• 返回值： jQuery的包裝物件！！！（鏈式程式設計的原理)

// 例如：
$('#btn').click(function(){});

1.2 jQuery簡單繫結事件方式和DOM0級的區別

DOM0級繫結事件的方式

var btn = document.getElementById('btn');
btn.onclick = function(e) {
  console.log(1);
}
// 第二次賦值會把之前的覆蓋掉。
btn.onclick = function(e) {
  console.log(2);
}
 

jQuery簡單繫結事件的方式

var btn = $('#btn');
btn.click(function(){
  console.log(1);
});
// 多次繫結click不會覆蓋。
btn.click(function(){
  console.log(2);
})

總結：DOM0級繫結事件的方式只能指定一個事件處理程式，不能指定多個。jQuery的可以繫結多次，而且相互不干擾。

上課程式碼：

 <input type="button" value="按鈕" id="btn">
  <!-- dom繫結事件的方式 -->
  <script>
    window.onload = function() {
      var btn = document.getElementById('btn');
      // dom 0 級繫結事件的方式
      // 事件處理程式只能繫結一個，繫結多個事件處理程式後面的會覆蓋前面的。
      btn.onclick = function() {
        console.log('1234');
        // this === 繫結事件的dom物件
      };

      // dom2級繫結事件的方式
      // 可以繫結多個事件處理程式，多個事件處理程式的執行順序不能保證。
      if(btn.addEventListener) {
        btn.addEventListener('click', function(e) {
          console.log('1234');
        }, false);
      } else {
        // 相容ie8及以下瀏覽器。
        btn.attachEvent('onclick', function() {
          var e = window.event;
        });
      }
    };
  </script>

  <!-- jQuery繫結事件的方法 -->
  <script>
    $(function(){
      // 頁面載入完成（dom樹已經初始化好了，可以進行互動訪問)
      $('#btn').click(function(e){ // e =jQuery.fn.event
        console.log('1234');
        console.log(this.value); // jQuery的事件處理程式中，this也執行綁定當前事件處理程式的dom物件
      });
      $('#btn').click(function(e){ // e =jQuery.fn.event
        console.log('12345');
      });
      $('#btn').click(function(e){ // e =jQuery.fn.event
        console.log('123456');
      });
      // jQuery繫結事件的事件方式：類似於我們的DOM2級繫結事件的方式
      // 可以繫結多個事件處理程式。而且執行順序是按照註冊順序執行。
      // jQuery的事件處理程式中，this也執行綁定當前事件處理程式的dom物件
    });
  </script>
 

1.3 其他常用繫結簡單事件的方法

方法名	例項	說明
blur([[data],fn])	$("p").blur();	當元素失去焦點時觸發 blur 事件，這個函式會呼叫執行繫結到blur事件的所有函式，包括瀏覽器的預設行為。可以通過返回false來防止觸發瀏覽器的預設行為。blur事件會在元素失去焦點的時候觸發，既可以是滑鼠行為，也可以是按tab鍵離開的
focus([[data],fn])	$("p").focus();	當元素獲得焦點時，觸發 focus 事件。
focusin([data],fn)	$("p").focusin();	當元素獲得焦點時，觸發 focusin 事件。當元素獲得焦點時，觸發 focusin 事件。
focusout([data],fn)	$("p").focusout();	當元素失去焦點時觸發 focusout 事件。focusout事件跟blur事件區別在於，他可以在父元素上檢測子元素失去焦點的情況
change([[data],fn])	$('p').change();	當元素的值發生改變時，會發生 change 事件該事件僅適用於文字域（text field），以及 textarea 和 select 元素。當用於 select 元素時，change 事件會在選擇某個選項時發生。當用於 text field 或 text area 時，該事件會在元素失去焦點時發生
mousedown([[data],fn])	$("p").mousedown(fn);	當滑鼠指標移動到元素上方，並按下滑鼠按鍵時，會發生 mousedown 事件mousedown 與 click 事件不同，mousedown 事件僅需要按鍵被按下，而不需要鬆開即可發生
mouseleave([[data],fn])	$("p").mouseleave(fn)	當滑鼠指標離開元素時，會發生 mouseleave 事件。該事件大多數時候會與mouseenter 事件一起使用。與 mouseout 事件不同，只有在滑鼠指標離開被選元素時，才會觸發 mouseleave 事件。如果滑鼠指標離開任何子元素，同樣會觸發 mouseout 事件。
resize([[data],fn])	$('p').resize(fn)	當調整瀏覽器視窗的大小時，發生 resize 事件。
scroll([[data],fn])	$('p').scroll(fn)	當用戶滾動指定的元素時，會發生 scroll 事件。scroll 事件適用於所有可滾動的元素和 window 物件（瀏覽器視窗）
submit([[data],fn])	$("form").submit();	當提交表單時，會發生 submit 事件。該事件只適用於表單元素。
keydown([[data],fn])	$('p').keydown(fn);	當鍵盤或按鈕被按下時，發生 keydown 事件。註釋：如果在文件元素上進行設定，則無論元素是否獲得焦點，該事件都會發生。
keyup([[data],fn])	$('p').keyup(fn);	當按鈕被鬆開時，發生 keyup 事件。它發生在當前獲得焦點的元素上。註釋：如果在文件元素上進行設定，則無論元素是否獲得焦點，該事件都會發生。
keypress([[data],fn])	$('p').keypress(fn);	當鍵盤或按鈕被按下時，發生 keypress 事件。keypress 事件與 keydown 事件類似。當按鈕被按下時，會發生該事件。它發生在當前獲得焦點的元素上。 不過，與 keydown 事件不同，每插入一個字元，就會發生 keypress 事件。註釋：如果在文件元素上進行設定，則無論元素是否獲得焦點，該事件都會發生。
load([[data],fn])	$(window).load(fn);	當頁面載入完成
unload([[data],fn])	$(window).unload(fn);	當頁面解除安裝完成後，離開頁面時。

所有的簡單事件的返回值都是呼叫此方法的jQuery包裝物件。

上課程式碼：

<div class="input-box">
  <input type="text" value="1">
  <input type="text" value="2">
  <input type="text" value="3">
  <input type="text" value="4">
</div>
<script>
  $(function(){
    var $inputArray = $('.input-box input');
    // jQuery建構函式傳入選擇器，返回的是一個jQuery的包裝物件
    // 大部分的api都是在jQuery包裝物件上
    // console.dir($inputArray);
    $inputArray.focus(function(e) {
      console.log(this.value); // this 就是當前的input標籤
    });

    // 簡單繫結事件，接受兩個引數的情況
    $inputArray.change('12334', function(e) {
      console.dir(e); // jQuery封裝的事件物件。
      console.log(e.data);
    });

    // 事件方法被呼叫，但沒有傳遞引數
    // 程式碼觸發此事件，並模擬當前事件對應的操作。
    $inputArray[3].focus(); // 觸發focuse事件，模擬獲取焦點的操作。
  });
</script>

1.4 觸發這些簡單事件

1.4.1 直接呼叫jQuery包裝物件的簡單繫結事件方法

$('#btn').click(); // 觸發點選事件
$('#btn').dbclick(); // 觸發雙擊事件
$('#btn').focus(); // 觸發獲取焦點事件
$('#btn').blur(); // 觸發失去焦點事件
$('#btn').submit(); // 觸發失去焦點事件

1.4.2 trigger觸發事件

包裝物件的trigger(type,[data])方法，可以幫助開發人員通過程式碼觸發事件的執行，跟正常觸發一樣，會進行事件冒泡。

• 引數：

  • type 觸發的事件型別
  • data 給事件處理程式的事件物件的額外引數，陣列型別

• 返回值：依然是jQuery的包裝物件

• 例項：

//提交第一個表單，但不用submit()
$("form:first").trigger("submit")

//給一個事件傳遞引數
$("p").click( function (event, a, b) {
  // 一個普通的點選事件時，a和b是undefined型別
  // 如果用下面的語句觸發，那麼a指向"foo",而b指向"bar"
} ).trigger("click", ["foo", "bar"]);

1.4.3 觸發事件處理程式執行

觸發事件處理程式執行函式：triggerHandler(type, [data])

• 引數：

  • type:要觸發的事件型別
  • data:傳遞給事件處理函式的附加引數

• 說明
  這個特別的方法將會觸發指定的事件型別上所有繫結的處理函式。但不會執行瀏覽器預設動作，也不會產生事件冒泡。

• 這個方法的行為表現與trigger類似，但有以下三個主要區別：

  • 第一，他不會觸發瀏覽器預設事件。
  • 第二，只觸發jQuery物件集合中第一個元素的事件處理函式。
  • 第三，這個方法的返回的是事件處理函式的返回值，而不是據有可鏈性的jQuery物件。此外，如果最開始的jQuery物件集合為空，則這個方法返回 undefined 。

• 例項

$("input").triggerHandler("focus");

上課程式碼：

 <div>
    <input type="button" value="按鈕" id="btn">
  </div>
  <script>
    $(function(){
      // 繫結事件
      $('#btn').click(function(e, a, b) {
        console.log(e, a, b);
      });

      $('div').click(function(e) {
        console.log('div is cliced');
      });

      // 觸發事件。
      // $('#btn').click(); // 第一種觸發點選事件的方式
      // 第二種觸發點選事件,下面這種觸發事件，可以觸發任何事件，包括自定義事件。
      // $("#btn").trigger('click', ['1234', '3333']);

      // 觸發事件處理程式執行，不觸發事件本身
      $('#btn').triggerHandler('click', [2, 5]);
    });
  </script>

案例：省市選擇

 <select name="pro" id="proSel"></select>
  <select name="city" id="citySel"></select>
  
  <script>
    // 第一步： 初始化好所有的省資訊
     // 模擬從ajax獲取的資料
    var data = [{
        name: "北京",
        cities: ["西城", "東城", "崇文", "宣武", "朝陽", "海淀", "豐臺", "石景山", "門頭溝", "房山", "通州", "順義", "大興", "昌平", "平谷", "懷柔",
          "密雲", "延慶"
        ]
      },
      {
        name: "天津",
        cities: ["青羊", "河東", "河西", "南開", "河北", "紅橋", "塘沽", "漢沽", "大港", "東麗", "西青", "北辰", "津南", "武清", "寶坻", "靜海", "寧河",
          "薊縣", "開發區"
        ]
      },
      {
        name: "河北",
        cities: ["石家莊", "秦皇島", "廊坊", "保定", "邯鄲", "唐山", "邢臺", "衡水", "張家口", "承德", "滄州", "衡水"]
      },
      {
        name: "山西",
        cities: ["太原", "大同", "長治", "晉中", "陽泉", "朔州", "運城", "臨汾"]
      }
    ];

    $(function() {
      // 初始化省的資料
      initProSel();
    });

    // 省的下拉列表的初始化
    function initProSel() {
      var strHTMLArray = [];
      for(var i = 0; i < data.length; i++) {
        var proName = data[i].name;
        // <option value="北京">北京</option>
        strHTMLArray.push('<option value="'+ proName +'">' + proName +'</option>')
      }

      // 把拼接好的 標籤放到  省的select下面
      // jQuery的html方法已經對ie8的 select設定innerHTML的bug做了相關處理。可以直接用。
      $("#proSel").html(strHTMLArray.join(''));

      // 給省的select標籤繫結change事件
      $('#proSel').change(function() {
        // 當省選擇完之後，要載入城市的資訊到citySel
        // 拿到當前選擇的省的名字
        // console.log($('#proSel').val());
        var proName = $('#proSel').val(); 
        for(var j = 0; j < data.length; j++) {
          if(data[j].name == proName) {
            var cities = data[j].cities;
            initCityes(cities);
          }
        }
      });

      // 觸發省chagne的事件處理程式
      $('#proSel').triggerHandler('change');
    }

    // 初始化城市的資訊
    function initCityes(cities) {
      var strHTMLArray = [];
      for(var i = 0; i < cities.length; i++) {
        // var cityName = cities[i];
        strHTMLArray.push('<option value="' + cities[i] + '">'+ cities[i] + '</option>')
      }

      $('#citySel').html(strHTMLArray.join(''));
    }
  </script>

2. 高階繫結事件方法

---

2.1 bind繫結事件的方式

語法：bind(type,[data],fn)，這個也是包裝物件的方法。
含義：為每個匹配元素的特定事件繫結事件處理函式。在繫結事件之前，一定要確保頁面中的DOM元素已經就緒。如果沒有就緒或者後面動態新增的DOM元素則不會動態更新事件處理程式。

引數：

• type: 含有一個或多個事件型別的字串，由空格分隔多個事件。比如"click"或"submit"，還可以是自定義事件名。
• data:作為event.data屬性值傳遞給事件物件的額外資料物件
• fn:繫結到每個匹配元素的事件上面的處理函式

例項：

$("form").bind("submit", function() {
  return false; // 取消預設操作。
})

// 同時繫結多個事件
$('#foo').bind('mouseenter mouseleave', function() {
  $(this).toggleClass('entered');
});

//同時繫結多個事件型別/處理程式
$("button").bind({
  click: function(){
    $("p").slideToggle();
  },
  mouseover: function(){
    $("body").css("background-color","red");
  },
  mouseout: function(){
    $("body").css("background-color","#FFFFFF");
  }
});

上課程式碼：

<input type="button" value="按鈕" id="btn">
  <input type="button" value="按鈕" id="btn2">
  <script>
    $(function() {
      // jQuery 簡單繫結事件
      // $('#btn').click(function(e) {
      // });

      // 第一種：繫結事件的方式 ****
      // jQuery高階繫結事件的方式
      $('#btn').bind('click', function(e) {
        console.log(this.value, e);
      });

      // 第一個引數： 事件型別，String
      // 第二個引數： 給事件處理程式的引數的data屬性傳遞資料
      // 第三個引數： 事件處理程式的回撥函式。
      // jQuery 的bind方法，傳遞三個引數
      $('#btn').bind('focus', '2222', function(e) {
        console.log(e.data);
      });

      // bind方法可以對同一個事件繫結多個事件處理程式。執行順序就是繫結事件的順序。
      $('#btn').bind('focus', '3333', function(e) {
        console.log(e.data);
      });

      // 第二種； 同時繫結多個事件
      // $('#btn2').bind('click focus', function(e) {
      //   console.log(e.type);
      // });

      // 第三種： 繫結一個事件物件， 最好不要用。
      $('#btn2').bind({
        click: function(e) {
          console.log('click');
        },
        mousedown: function(e) {
          console.log(e.type);
        }
      });
    });
  </script>

2.2 繫結事件只執行一次的事件處理程式

語法：$dom.one(type,[data],fn)

說明：為每一個匹配元素的特定事件（像click）繫結一個一次性的事件處理函式。在每個物件上，這個事件處理函式只會被執行一次。其他規則與bind()函式相同。這個事件處理函式會接收到一個事件物件，可以通過它來阻止（瀏覽器）預設的行為。如果既想取消預設的行為，又想阻止事件起泡，這個事件處理函式必須返回false.

引數：

• type:新增到元素的一個或多個事件。由空格分隔多個事件。必須是有效的事件。
• data:將要傳遞給事件處理函式的資料對映
• fn:每當事件觸發時執行的函式。

例項：

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

2.3 動態元素的繫結

語法： $dom.live(type, [data], fn)

說明：jQuery 給所有匹配的元素附加一個事件處理函式，即使這個元素是以後再新增進來的也有效。這個方法是基本是的 .bind() 方法的一個變體。使用 .bind() 時，選擇器匹配的元素會附加一個事件處理函式，而以後再新增的元素則不會有。為此需要再使用一次 .bind() 才行。

引數:

• type:一個或多個事件型別，由空格分隔多個事件。
• data:傳遞給事件處理函式的附加引數
• fn:要從每個匹配元素的事件中反繫結的事件處理函式

例項:

// 先繫結事件
$('.clickme').live('click', function() {
  alert("Live handler called."); 
});
// 然後再新增一個新元素：
$('body').append('<div class="clickme">Another target</div>');

2.4 事件委託繫結

語法： $dom.delegate(selector,[type],[data],fn)

說明：指定的元素（屬於被選元素的子元素）新增一個或多個事件處理程式，並規定當這些事件發生時執行的函式。使用 delegate() 方法的事件處理程式適用於當前或未來的元素（比如由指令碼建立的新元素）在選擇元素上繫結一個或多個事件的事件處理函式。on()方法繫結事件處理程式到當前選定的jQuery物件中的元素。on彙總了bind和live兩種繫結事件的方式。可以支援一般的bind方法或者委託的方法。

引數:

• selector:選擇器字串，用於過濾器觸發事件的元素。
• type:附加到元素的一個或多個事件。由空格分隔多個事件值。必須是有效的事件。
• data:傳遞到函式的額外資料
• fn:當事件發生時執行的函式

例項:

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

// jQuery 程式碼:
$("div").delegate("button","click",function(){
  $("p").slideToggle();
});

以後推薦大家使用on的方式

上課程式碼：

<ul class="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>
  <script>
    $(function() {
      // 事件委託繫結的方式，第一個引數，是過濾子元素。
      // 第二個引數：事件型別
      // 第三個引數： 事件處理程式
      $('.list').delegate('li', 'click', function(e) {
        // dom
        // console.log(this.innerHTML); // innerText(ie), textContent(ff)
        //jq
        console.log($(this).text());
      });

      // jQuery:  click(簡單繫結事件) 
      // bind : 普通繫結事件方法
      // one : 事件只執行一次。
      // live ： 對 動態建立的dom元素繫結事件。
      // delegate : 事件委託繫結事件。
    });
  </script>

2.5 大一統的on繫結事件方法

語法： $dom.on(events,[selector],[data],fn)

說明：自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。on()方法繫結事件處理程式到當前選定的jQuery物件中的元素。on彙總了bind和live兩種繫結事件的方式。可以支援一般的bind方法或者委託的方法。

引數:

• events:一個或多個用空格分隔的事件型別和可選的名稱空間，如"click"或"keydown.myPlugin" 。
• selector:一個選擇器字串用於過濾器的觸發事件的選擇器元素的後代。如果選擇的< null或省略，當它到達選定的元素，事件總是觸發。
• data:當一個事件被觸發時要傳遞event.data給事件處理函式。
• fn:該事件被觸發時執行的函式。 false 值也可以做一個函式的簡寫，返回false。

例項:

// bind繫結事件
$("p").on("click", function(){
  alert( $(this).text() );
});

// 事件委託
$('div').on('click', 'p', function(e){
  console.log(this.innerHTML);
})

以後推薦大家使用on的方式

上課程式碼：

<input type="button" value="按鈕" id="btn">
  <ul class="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
  </ul>
  <script>
    $(function() {
      // on 替代 bind繫結事件的方式。
      $('#btn').on('click', function(e) {
        console.log(123);
      });

      // on 替代 live 動態建立元素繫結事件的方法
      // dom動態建立
      // var domP = document.createElement('p');
      // domP.innerHTML = "1234";
      // $(domP).on('click', function(e) {
      //   console.log($(this).text());
      // })
      // document.body.appendChild(domP);
      // jQuery 動態建立dom標籤,
      var $p = $('<p>123445667</p>');

      // 給動態標籤繫結事件
      $p.on('click', function(e) {
        console.log($(this).text());
      });

      // 給頁面中的body新增$p標籤
      $("body").append($p);

      // jQuery建構函式的用法複習
      // 1、接受一個回撥函式，作為：document ready事件
      // 2、可以接受一個字串作為 選擇器進行選擇頁面中元素，返回jQuery包裝物件。
      // 3、可以接受一個dom物件，將dom物件轉換 jQuery包裝物件
      // 4、可以接受一個html標籤字串，建立成jQuery包裝物件


      // On 替代delegate方法
      $('.list').on('click', 'li', function(e) {
        console.log( $(this).html() );
      });
    });
  </script>

手風琴案例

<ul class="ac">
    <li class="ac-item on">
      <div class="ac-item-hd">頭部1</div>
      <div class="ac-item-bd">內容1</div>
    </li>
    <li class="ac-item">
      <div class="ac-item-hd">頭部2</div>
      <div class="ac-item-bd">內容2</div>
    </li>
    <li class="ac-item">
      <div class="ac-item-hd">頭部3</div>
      <div class="ac-item-bd">內容3</div>
    </li>
    <li class="ac-item">
      <div class="ac-item-hd">頭部4</div>
      <div class="ac-item-bd">內容4</div>
    </li>
  </ul>
  <script src="./lib/jquery-1.12.4.js"></script>
  <script>
    $(function() {
      $('.ac-item-hd').on('click', function(e) {
        // addClass 新增樣式類
        $(this).parent().addClass('on');
        // removeClass是移除樣式類
        $(this).parent().siblings('li').removeClass('on');// 隱式迭代。
      });
    });
  </script>

2.6 解綁事件

2.6.1 解綁bind繫結事件。

語法：$dom.unbind(type,[fn])

• 如果沒有引數，則刪除所有繫結的事件。
• 如果提供了事件型別作為引數，則只刪除該型別的繫結事件。
• 如果把在繫結時傳遞的處理函式作為第二個引數，則只有這個特定的事件處理函式會被刪除。

例項：

// 解綁所有事件
$("p").unbind()

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

// 刪除特定函式的繫結，將函式作為第二個引數傳入
var foo = function () {
  // 處理某個事件的程式碼
};
$("p").bind("click", foo); // ... 當點選段落的時候會觸發 foo 

$("p").unbind("click", foo); // ... 再也不會被觸發 foo

2.6.2 解綁live的事件（die)

語法： $dom.die(type, [fn])

元素中刪除先前用.live()繫結的所有事件.(此方法與live正好完全相反。)

引數說明：

• 如果不帶引數，則所有繫結的live事件都會被移除。
• 如果提供了type引數，那麼會移除對應的live事件。
• 如果也指定了第二個引數function,則只移出指定的事件處理函式。

例項：

function aClick() {
    $("div").show().fadeOut("slow");
}
$("#unbind").click(function () {
    $("#theone").die("click", aClick)
});

2.6.3 解綁delegate繫結的事件（undelegate）

語法： undelegate([selector,[type],fn])

刪除由 delegate() 方法新增的一個或多個事件處理程式。

引數說明：

• selector:需要刪除事件處理程式的選擇器。
• type:需要刪除處理函式的一個或多個事件型別。 由空格分隔多個事件值。必須是有效的事件。
• fn:要刪除的具體事件處理函式。

例項：

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

// 從form元素刪除由 delegate() 方法新增的".whatever"名稱空間：
var foo = function () {
  //.....
};
//用delegate() 方法給click事件增加".whatever"名稱空間
$("form").delegate(":button", "click.whatever", foo);
$("form").delegate("input[type='text']", "keypress.whatever", foo);

2.6.4 解綁on的事件 (off)

語法：off(events,[selector],[fn])

如果一個簡單的事件名稱，比如提供"click"，所有 這種型別的事件（包括直接和委派）從jQuery設定的元素上刪除。

要刪除特定的委派事件處理程式，提供一個selector 的引數。選擇器字串必須是完全匹配遞到.on()事件處理程式附加的選擇器。要刪除非委託元素上的所有事件，使用特殊值 "**" 。

處理程式也可以刪除handler引數指定名稱的函式。

例項：

// 解綁所有的on的事件
$("p").off()
// 解綁所有的p的委託click事件，所有子元素都被取消繫結
$("p").off( "click", "**" )

// 解綁具體的某個事件處理程式
var foo = function () {
  // code to handle some kind of event
};

$("body").on("click", "p", foo);
// ... foo will no longer be called.
$("body").off("click", "p", foo);

上課程式碼:

<input type="button" value="解綁事件" id="btn">
  <input type="button" value="解綁名稱空間事件" id="btnOffNameSpace">
  <ul class="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>

  <script>
    $(function() {
      $('.list li').on('click', function(e) {
        console.log(this.innerHTML);
      });

      // 事件型別後面加 .demo 表示當前事件所屬 demo名稱空間
      $('.list li').on('click.demo', function(e) {
        console.log("==",this.innerHTML, "==");
      });

      $('.list li').on('click.demo', function(e) {
        console.log("===",this.innerHTML, "===");
      });


      $('#btn').on('click', function(e) {
        // 解綁on的click事件
        // $('.list li').off('click');

        // 解綁所有的事件
        // $('.list li').off();
      });

      // 解綁名稱空間事件
      $("#btnOffNameSpace").on('click', function(e) {
        // 解綁了名稱空間的事件，其他名稱空間的事件或者沒有名稱空間的事件不受影響。
        $('.list li').off('click.demo');
      });
    });
  </script>

3. 事件物件

---

在DOM學習的時候我們很痛的一點就是早期的ie版本的瀏覽器和最新標準的瀏覽器的事件物件的獲取及事件物件的屬性直接都有些相容問題。

事件物件獲取相容。

• IE678：window.event
• 標準瀏覽器直接從事件處理程式的引數中獲得事件物件e
• e = e || window.event;

在jQuery的事件處理程式中，可以直接獲取事件物件，所有瀏覽器都相容。

3.1 事件物件的屬性介紹

• event.type 獲取到事件的型別
• event.target 獲取到觸發事件的元素。jQuery對其封裝後，避免了各個瀏覽器不同標準的差異。
• event.currentTarget 在事件冒泡階段中的當前DOM元素
• event.delegateTarget 此屬性是最經常有用是通過過.delegate() 或.on()附加委派的事件，事件處理程式附加在正在處理的元素的祖先上。
• event.data 當前執行的處理程式被繫結的時候傳遞的引數。
• event.pageX和event.pageY該方法的作用是獲取游標相對於頁面的x座標和y座標。
• event.result 這個屬性包含了當前事件事件最後觸發的那個處理函式的返回值，除非值是 undefined
• event.which 針對鍵盤和滑鼠事件，這個屬效能確定你到底按的是哪個鍵或按鈕。event.which 將 event.keyCode 和 event.charCode 標準化了。推薦用 event.which 來監視鍵盤輸入。值是unicode編碼。
• originalEvent dom的原始event物件。

3.2 事件物件的方法介紹

• event.preventDefault()

阻止預設事件行為的觸發。

• event.stopPropagation()

防止事件冒泡到DOM樹上，也就是不觸發的任何前輩元素上的事件處理函式。

4. 自定義事件

---

jQuery物件的的on方法不僅僅能繫結DOM中已經定義的事件，而且還可以註冊和觸發非標準事件也就是自定義的事件。

繫結自定義事件：

var $btn = $('#btn');
// 繫結自定義事件myevent
$btn.on('myevent', function(e, a, b, c){
  console.log(e.type, a, b, c);
});

// 觸發自定義事件，並給自定義事件傳遞引數
$btn.trigger('myevent', [1, 2, 3]);
// =>myevent 1 2 3

5. 事件名稱空間

如果一個dom標籤上新增的事件非常多的時候，有時候需要進行對這些事件做一些分類和統一處理。那麼對繫結的事件分類就需要用到事件的名稱空間。

$(function () {
  // 給按鈕繫結多個jQuery的事件
  // 給按鈕繫結點選事件，後面的.和demo就是名稱空間
  $('#btn').on('click.demo', function (e) {
    console.log('click.demo');
  });

  // 繫結點選事件不帶名稱空間
  $('#btn').on('click', function (e) {
    console.log('click');
  });

  // 繫結blur事件帶demo名稱空間
  $('#btn').on('blur.demo', function (e) {
    console.log('blur.demo');
  });

  // $('#btn').off('.demo'); // 解綁所有的demo名稱空間的事件  click.demo 和blur.demo
  // $('#btn').trigger('click');  // 觸發所有的click事件，包括所有的名稱空間的
  // $('#btn').trigger('click.demo');  // 只觸發click.demo名稱空間的事件
});

6. 合成事件

---

6.1 合成滑鼠進入和離開的hover方法

jQuery為滑鼠進入和離開提供了一個簡便的繫結事件的方法hover(enter, leave)。hover方法接受兩個引數，第一個引數是滑鼠進入的事件處理程式，第二個是滑鼠離開的事件處理程式。

用法:

$(function(){
  $('tr').hover(function(e){
    $(this).css('backgroundColor', '#ccc');
  },function(e){
    $(this).css('backgroundColor', '#fff');
  });
})

顯示和隱藏學校資訊案例：

 <div class="box">
    <div class="left"></div>
    <div class="aside"></div>
  </div>
  <script>
    $(function() {
      $('.box').hover(function(e) {
        // 滑鼠移入， 讓asiide標籤顯示
        $('.aside').css('display', 'block');
      }, function(e) {
        // 滑鼠移出
        $('.aside').css('display', 'none');
      });
    });
  </script>