本文章是老馬jQuery視頻的講義和上課的代碼。具體觀看視頻地址：https://chuanke.baidu.com/v5508922-202194-1810316.html

1. 綁定簡(jiǎn)單事件

在DOM中DOM0級(jí)綁定事件的方式是直接給事件屬性賦值，但是這樣有個(gè)缺點(diǎn)就是每次指定的事件處理程序會(huì)把之前的覆蓋掉。

jQuery簡(jiǎn)單綁定事件的方式，可以讓我綁定多個(gè)事件處理程序跟DOM2級(jí)綁定事件的方式一樣.

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

1.1 簡(jiǎn)單綁定click事件

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

• 參數(shù)：

  • data 可以省略，給可傳入到函數(shù)fn處理?？梢酝ㄟ^事件處理程序的事件對(duì)象的data屬性獲取此值。

  • fn 事件處理程序。fn的內(nèi)部作用域中this指向當(dāng)前的DOM對(duì)象（注意不是jQuery的包裝對(duì)象)

• 返回值： jQuery的包裝對(duì)象?。。。ㄦ?zhǔn)骄幊痰脑?

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

1.2 jQuery簡(jiǎn)單綁定事件方式和DOM0級(jí)的區(qū)別

DOM0級(jí)綁定事件的方式

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

jQuery簡(jiǎn)單綁定事件的方式

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

總結(jié)：DOM0級(jí)綁定事件的方式只能指定一個(gè)事件處理程序，不能指定多個(gè)。jQuery的可以綁定多次，而且相互不干擾。

上課代碼：

 <input type="button" value="按鈕" id="btn">
  <!-- dom綁定事件的方式 -->
  <script>
    window.onload = function() {
      var btn = document.getElementById('btn');
      // dom 0 級(jí)綁定事件的方式
      // 事件處理程序只能綁定一個(gè)，綁定多個(gè)事件處理程序后面的會(huì)覆蓋前面的。
      btn.onclick = function() {
        console.log('1234');
        // this === 綁定事件的dom對(duì)象
      };

      // dom2級(jí)綁定事件的方式
      // 可以綁定多個(gè)事件處理程序，多個(gè)事件處理程序的執(zhí)行順序不能保證。
      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樹已經(jīng)初始化好了，可以進(jìn)行交互訪問)
      $('#btn').click(function(e){ // e =jQuery.fn.event
        console.log('1234');
        console.log(this.value); // jQuery的事件處理程序中，this也執(zhí)行綁定當(dāng)前事件處理程序的dom對(duì)象
      });
      $('#btn').click(function(e){ // e =jQuery.fn.event
        console.log('12345');
      });
      $('#btn').click(function(e){ // e =jQuery.fn.event
        console.log('123456');
      });
      // jQuery綁定事件的事件方式：類似于我們的DOM2級(jí)綁定事件的方式
      // 可以綁定多個(gè)事件處理程序。而且執(zhí)行順序是按照注冊(cè)順序執(zhí)行。
      // jQuery的事件處理程序中，this也執(zhí)行綁定當(dāng)前事件處理程序的dom對(duì)象
    });
  </script>

1.3 其他常用綁定簡(jiǎn)單事件的方法

所有的簡(jiǎn)單事件的返回值都是調(diào)用此方法的jQuery包裝對(duì)象。

上課代碼：

<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構(gòu)造函數(shù)傳入選擇器，返回的是一個(gè)jQuery的包裝對(duì)象
    // 大部分的api都是在jQuery包裝對(duì)象上
    // console.dir($inputArray);
    $inputArray.focus(function(e) {
      console.log(this.value); // this 就是當(dāng)前的input標(biāo)簽
    });

    // 簡(jiǎn)單綁定事件，接受兩個(gè)參數(shù)的情況
    $inputArray.change('12334', function(e) {
      console.dir(e); // jQuery封裝的事件對(duì)象。
      console.log(e.data);
    });

    // 事件方法被調(diào)用，但沒有傳遞參數(shù)
    // 代碼觸發(fā)此事件，并模擬當(dāng)前事件對(duì)應(yīng)的操作。
    $inputArray[3].focus(); // 觸發(fā)focuse事件，模擬獲取焦點(diǎn)的操作。
  });
</script>

1.4 觸發(fā)這些簡(jiǎn)單事件

1.4.1 直接調(diào)用jQuery包裝對(duì)象的簡(jiǎn)單綁定事件方法

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

1.4.2 trigger觸發(fā)事件

包裝對(duì)象的trigger(type,[data])方法，可以幫助開發(fā)人員通過代碼觸發(fā)事件的執(zhí)行，跟正常觸發(fā)一樣，會(huì)進(jìn)行事件冒泡。

• 參數(shù)：

  • type 觸發(fā)的事件類型
  • data 給事件處理程序的事件對(duì)象的額外參數(shù)，數(shù)組類型

• 返回值：依然是jQuery的包裝對(duì)象

• 實(shí)例：

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

//給一個(gè)事件傳遞參數(shù)
$("p").click( function (event, a, b) {
  // 一個(gè)普通的點(diǎn)擊事件時(shí)，a和b是undefined類型
  // 如果用下面的語句觸發(fā)，那么a指向"foo",而b指向"bar"
} ).trigger("click", ["foo", "bar"]);

1.4.3 觸發(fā)事件處理程序執(zhí)行

觸發(fā)事件處理程序執(zhí)行函數(shù)：triggerHandler(type, [data])

• 參數(shù)：

  • type:要觸發(fā)的事件類型
  • data:傳遞給事件處理函數(shù)的附加參數(shù)

• 說明
  這個(gè)特別的方法將會(huì)觸發(fā)指定的事件類型上所有綁定的處理函數(shù)。但不會(huì)執(zhí)行瀏覽器默認(rèn)動(dòng)作，也不會(huì)產(chǎn)生事件冒泡。

• 這個(gè)方法的行為表現(xiàn)與trigger類似，但有以下三個(gè)主要區(qū)別：

  • 第一，他不會(huì)觸發(fā)瀏覽器默認(rèn)事件。
  • 第二，只觸發(fā)jQuery對(duì)象集合中第一個(gè)元素的事件處理函數(shù)。
  • 第三，這個(gè)方法的返回的是事件處理函數(shù)的返回值，而不是據(jù)有可鏈性的jQuery對(duì)象。此外，如果最開始的jQuery對(duì)象集合為空，則這個(gè)方法返回 undefined 。

• 實(shí)例

$("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');
      });

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

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

案例：省市選擇

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

    $(function() {
      // 初始化省的數(shù)據(jù)
      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>')
      }

      // 把拼接好的 標(biāo)簽放到  省的select下面
      // jQuery的html方法已經(jīng)對(duì)ie8的 select設(shè)置innerHTML的bug做了相關(guān)處理?？梢灾苯佑谩?      $("#proSel").html(strHTMLArray.join(''));

      // 給省的select標(biāo)簽綁定change事件
      $('#proSel').change(function() {
        // 當(dāng)省選擇完之后，要加載城市的信息到citySel
        // 拿到當(dāng)前選擇的省的名字
        // 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);
          }
        }
      });

      // 觸發(fā)省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. 高級(jí)綁定事件方法

2.1 bind綁定事件的方式

語法：bind(type,[data],fn)，這個(gè)也是包裝對(duì)象的方法。
含義：為每個(gè)匹配元素的特定事件綁定事件處理函數(shù)。在綁定事件之前，一定要確保頁面中的DOM元素已經(jīng)就緒。如果沒有就緒或者后面動(dòng)態(tài)添加的DOM元素則不會(huì)動(dòng)態(tài)更新事件處理程序。

參數(shù)：

• type: 含有一個(gè)或多個(gè)事件類型的字符串，由空格分隔多個(gè)事件。比如"click"或"submit"，還可以是自定義事件名。
• data:作為event.data屬性值傳遞給事件對(duì)象的額外數(shù)據(jù)對(duì)象
• fn:綁定到每個(gè)匹配元素的事件上面的處理函數(shù)

實(shí)例：

$("form").bind("submit", function() {
  return false; // 取消默認(rèn)操作。
})

// 同時(shí)綁定多個(gè)事件
$('#foo').bind('mouseenter mouseleave', function() {
  $(this).toggleClass('entered');
});

//同時(shí)綁定多個(gè)事件類型/處理程序
$("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 簡(jiǎn)單綁定事件
      // $('#btn').click(function(e) {
      // });

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

      // 第一個(gè)參數(shù)： 事件類型，String
      // 第二個(gè)參數(shù)： 給事件處理程序的參數(shù)的data屬性傳遞數(shù)據(jù)
      // 第三個(gè)參數(shù)： 事件處理程序的回調(diào)函數(shù)。
      // jQuery 的bind方法，傳遞三個(gè)參數(shù)
      $('#btn').bind('focus', '2222', function(e) {
        console.log(e.data);
      });

      // bind方法可以對(duì)同一個(gè)事件綁定多個(gè)事件處理程序。執(zhí)行順序就是綁定事件的順序。
      $('#btn').bind('focus', '3333', function(e) {
        console.log(e.data);
      });

      // 第二種； 同時(shí)綁定多個(gè)事件
      // $('#btn2').bind('click focus', function(e) {
      //   console.log(e.type);
      // });

      // 第三種： 綁定一個(gè)事件對(duì)象， 最好不要用。
      $('#btn2').bind({
        click: function(e) {
          console.log('click');
        },
        mousedown: function(e) {
          console.log(e.type);
        }
      });
    });
  </script>

2.2 綁定事件只執(zhí)行一次的事件處理程序

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

說明：為每一個(gè)匹配元素的特定事件（像click）綁定一個(gè)一次性的事件處理函數(shù)。在每個(gè)對(duì)象上，這個(gè)事件處理函數(shù)只會(huì)被執(zhí)行一次。其他規(guī)則與bind()函數(shù)相同。這個(gè)事件處理函數(shù)會(huì)接收到一個(gè)事件對(duì)象，可以通過它來阻止（瀏覽器）默認(rèn)的行為。如果既想取消默認(rèn)的行為，又想阻止事件起泡，這個(gè)事件處理函數(shù)必須返回false.

參數(shù)：

• type:添加到元素的一個(gè)或多個(gè)事件。由空格分隔多個(gè)事件。必須是有效的事件。
• data:將要傳遞給事件處理函數(shù)的數(shù)據(jù)映射
• fn:每當(dāng)事件觸發(fā)時(shí)執(zhí)行的函數(shù)。

實(shí)例：

// 當(dāng)所有段落被第一次點(diǎn)擊的時(shí)候，顯示所有其文本。
$("p").one("click", function(){
  alert( $(this).text() );
});

2.3 動(dòng)態(tài)元素的綁定

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

說明：jQuery 給所有匹配的元素附加一個(gè)事件處理函數(shù)，即使這個(gè)元素是以后再添加進(jìn)來的也有效。這個(gè)方法是基本是的 .bind() 方法的一個(gè)變體。使用 .bind() 時(shí)，選擇器匹配的元素會(huì)附加一個(gè)事件處理函數(shù)，而以后再添加的元素則不會(huì)有。為此需要再使用一次 .bind() 才行。

參數(shù):

• type:一個(gè)或多個(gè)事件類型，由空格分隔多個(gè)事件。
• data:傳遞給事件處理函數(shù)的附加參數(shù)
• fn:要從每個(gè)匹配元素的事件中反綁定的事件處理函數(shù)

實(shí)例:

// 先綁定事件
$('.clickme').live('click', function() {
  alert("Live handler called."); 
});
// 然后再添加一個(gè)新元素：
$('body').append('<div class="clickme">Another target</div>');

2.4 事件委托綁定

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

說明：指定的元素（屬于被選元素的子元素）添加一個(gè)或多個(gè)事件處理程序，并規(guī)定當(dāng)這些事件發(fā)生時(shí)運(yùn)行的函數(shù)。使用 delegate() 方法的事件處理程序適用于當(dāng)前或未來的元素（比如由腳本創(chuàng)建的新元素）在選擇元素上綁定一個(gè)或多個(gè)事件的事件處理函數(shù)。on()方法綁定事件處理程序到當(dāng)前選定的jQuery對(duì)象中的元素。on匯總了bind和live兩種綁定事件的方式。可以支持一般的bind方法或者委托的方法。

參數(shù):

• selector:選擇器字符串，用于過濾器觸發(fā)事件的元素。
• type:附加到元素的一個(gè)或多個(gè)事件。由空格分隔多個(gè)事件值。必須是有效的事件。
• data:傳遞到函數(shù)的額外數(shù)據(jù)
• fn:當(dāng)事件發(fā)生時(shí)運(yùn)行的函數(shù)

實(shí)例:

<!-- HTML 代碼 -->
<div style="background-color:red">
  <p>這是一個(gè)段落。</p>
  <button>請(qǐng)點(diǎn)擊這里</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() {
      // 事件委托綁定的方式，第一個(gè)參數(shù)，是過濾子元素。
      // 第二個(gè)參數(shù)：事件類型
      // 第三個(gè)參數(shù)： 事件處理程序
      $('.list').delegate('li', 'click', function(e) {
        // dom
        // console.log(this.innerHTML); // innerText(ie), textContent(ff)
        //jq
        console.log($(this).text());
      });

      // jQuery:  click(簡(jiǎn)單綁定事件) 
      // bind : 普通綁定事件方法
      // one : 事件只執(zhí)行一次。
      // live ： 對(duì) 動(dòng)態(tài)創(chuàng)建的dom元素綁定事件。
      // delegate : 事件委托綁定事件。
    });
  </script>

2.5 大一統(tǒng)的on綁定事件方法

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

說明：自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。on()方法綁定事件處理程序到當(dāng)前選定的jQuery對(duì)象中的元素。on匯總了bind和live兩種綁定事件的方式。可以支持一般的bind方法或者委托的方法。

參數(shù):

• events:一個(gè)或多個(gè)用空格分隔的事件類型和可選的命名空間，如"click"或"keydown.myPlugin" 。
• selector:一個(gè)選擇器字符串用于過濾器的觸發(fā)事件的選擇器元素的后代。如果選擇的< null或省略，當(dāng)它到達(dá)選定的元素，事件總是觸發(fā)。
• data:當(dāng)一個(gè)事件被觸發(fā)時(shí)要傳遞event.data給事件處理函數(shù)。
• fn:該事件被觸發(fā)時(shí)執(zhí)行的函數(shù)。 false 值也可以做一個(gè)函數(shù)的簡(jiǎn)寫，返回false。

實(shí)例:

// 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 動(dòng)態(tài)創(chuàng)建元素綁定事件的方法
      // dom動(dòng)態(tài)創(chuàng)建
      // var domP = document.createElement('p');
      // domP.innerHTML = "1234";
      // $(domP).on('click', function(e) {
      //   console.log($(this).text());
      // })
      // document.body.appendChild(domP);
      // jQuery 動(dòng)態(tài)創(chuàng)建dom標(biāo)簽,
      var $p = $('<p>123445667</p>');

      // 給動(dòng)態(tài)標(biāo)簽綁定事件
      $p.on('click', function(e) {
        console.log($(this).text());
      });

      // 給頁面中的body添加$p標(biāo)簽
      $("body").append($p);

      // jQuery構(gòu)造函數(shù)的用法復(fù)習(xí)
      // 1、接受一個(gè)回調(diào)函數(shù)，作為：document ready事件
      // 2、可以接受一個(gè)字符串作為 選擇器進(jìn)行選擇頁面中元素，返回jQuery包裝對(duì)象。
      // 3、可以接受一個(gè)dom對(duì)象，將dom對(duì)象轉(zhuǎn)換 jQuery包裝對(duì)象
      // 4、可以接受一個(gè)html標(biāo)簽字符串，創(chuàng)建成jQuery包裝對(duì)象


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

手風(fēng)琴案例

<ul class="ac">
    <li class="ac-item on">
      <div class="ac-item-hd">頭部1</div>
      <div class="ac-item-bd">內(nèi)容1</div>
    </li>
    <li class="ac-item">
      <div class="ac-item-hd">頭部2</div>
      <div class="ac-item-bd">內(nèi)容2</div>
    </li>
    <li class="ac-item">
      <div class="ac-item-hd">頭部3</div>
      <div class="ac-item-bd">內(nèi)容3</div>
    </li>
    <li class="ac-item">
      <div class="ac-item-hd">頭部4</div>
      <div class="ac-item-bd">內(nèi)容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])

• 如果沒有參數(shù)，則刪除所有綁定的事件。
• 如果提供了事件類型作為參數(shù)，則只刪除該類型的綁定事件。
• 如果把在綁定時(shí)傳遞的處理函數(shù)作為第二個(gè)參數(shù)，則只有這個(gè)特定的事件處理函數(shù)會(huì)被刪除。

實(shí)例：

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

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

// 刪除特定函數(shù)的綁定，將函數(shù)作為第二個(gè)參數(shù)傳入
var foo = function () {
  // 處理某個(gè)事件的代碼
};
$("p").bind("click", foo); // ... 當(dāng)點(diǎn)擊段落的時(shí)候會(huì)觸發(fā) foo 

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

2.6.2 解綁live的事件（die)

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

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

參數(shù)說明：

• 如果不帶參數(shù)，則所有綁定的live事件都會(huì)被移除。
• 如果提供了type參數(shù)，那么會(huì)移除對(duì)應(yīng)的live事件。
• 如果也指定了第二個(gè)參數(shù)function,則只移出指定的事件處理函數(shù)。

實(shí)例：

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

2.6.3 解綁delegate綁定的事件（undelegate）

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

刪除由 delegate() 方法添加的一個(gè)或多個(gè)事件處理程序。

參數(shù)說明：

• selector:需要?jiǎng)h除事件處理程序的選擇器。
• type:需要?jiǎng)h除處理函數(shù)的一個(gè)或多個(gè)事件類型。 由空格分隔多個(gè)事件值。必須是有效的事件。
• fn:要?jiǎng)h除的具體事件處理函數(shù)。

實(shí)例：

// 從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])

如果一個(gè)簡(jiǎn)單的事件名稱，比如提供"click"，所有 這種類型的事件（包括直接和委派）從jQuery設(shè)置的元素上刪除。

要?jiǎng)h除特定的委派事件處理程序，提供一個(gè)selector 的參數(shù)。選擇器字符串必須是完全匹配遞到.on()事件處理程序附加的選擇器。要?jiǎng)h除非委托元素上的所有事件，使用特殊值 "**" 。

處理程序也可以刪除handler參數(shù)指定名稱的函數(shù)。

實(shí)例：

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

// 解綁具體的某個(gè)事件處理程序
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 表示當(dāng)前事件所屬 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. 事件對(duì)象

在DOM學(xué)習(xí)的時(shí)候我們很痛的一點(diǎn)就是早期的ie版本的瀏覽器和最新標(biāo)準(zhǔn)的瀏覽器的事件對(duì)象的獲取及事件對(duì)象的屬性直接都有些兼容問題。

事件對(duì)象獲取兼容。

• IE678：window.event
• 標(biāo)準(zhǔn)瀏覽器直接從事件處理程序的參數(shù)中獲得事件對(duì)象e
• e = e || window.event;

在jQuery的事件處理程序中，可以直接獲取事件對(duì)象，所有瀏覽器都兼容。

3.1 事件對(duì)象的屬性介紹

• event.type 獲取到事件的類型
• event.target 獲取到觸發(fā)事件的元素。jQuery對(duì)其封裝后，避免了各個(gè)瀏覽器不同標(biāo)準(zhǔn)的差異。
• event.currentTarget 在事件冒泡階段中的當(dāng)前DOM元素
• event.delegateTarget 此屬性是最經(jīng)常有用是通過過.delegate() 或.on()附加委派的事件，事件處理程序附加在正在處理的元素的祖先上。
• event.data 當(dāng)前執(zhí)行的處理程序被綁定的時(shí)候傳遞的參數(shù)。
• event.pageX和event.pageY該方法的作用是獲取光標(biāo)相對(duì)于頁面的x坐標(biāo)和y坐標(biāo)。
• event.result 這個(gè)屬性包含了當(dāng)前事件事件最后觸發(fā)的那個(gè)處理函數(shù)的返回值，除非值是 undefined
• event.which 針對(duì)鍵盤和鼠標(biāo)事件，這個(gè)屬性能確定你到底按的是哪個(gè)鍵或按鈕。event.which 將 event.keyCode 和 event.charCode 標(biāo)準(zhǔn)化了。推薦用 event.which 來監(jiān)視鍵盤輸入。值是unicode編碼。
• originalEvent dom的原始event對(duì)象。

3.2 事件對(duì)象的方法介紹

• event.preventDefault()

阻止默認(rèn)事件行為的觸發(fā)。

• event.stopPropagation()

防止事件冒泡到DOM樹上，也就是不觸發(fā)的任何前輩元素上的事件處理函數(shù)。

4. 自定義事件

jQuery對(duì)象的的on方法不僅僅能綁定DOM中已經(jīng)定義的事件，而且還可以注冊(cè)和觸發(fā)非標(biāo)準(zhǔn)事件也就是自定義的事件。

綁定自定義事件：

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

// 觸發(fā)自定義事件，并給自定義事件傳遞參數(shù)
$btn.trigger('myevent', [1, 2, 3]);
// =>myevent 1 2 3

5. 事件命名空間

如果一個(gè)dom標(biāo)簽上添加的事件非常多的時(shí)候，有時(shí)候需要進(jìn)行對(duì)這些事件做一些分類和統(tǒng)一處理。那么對(duì)綁定的事件分類就需要用到事件的命名空間。

$(function () {
  // 給按鈕綁定多個(gè)jQuery的事件
  // 給按鈕綁定點(diǎn)擊事件，后面的.和demo就是命名空間
  $('#btn').on('click.demo', function (e) {
    console.log('click.demo');
  });

  // 綁定點(diǎn)擊事件不帶命名空間
  $('#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');  // 觸發(fā)所有的click事件，包括所有的命名空間的
  // $('#btn').trigger('click.demo');  // 只觸發(fā)click.demo命名空間的事件
});

6. 合成事件

6.1 合成鼠標(biāo)進(jìn)入和離開的hover方法

jQuery為鼠標(biāo)進(jìn)入和離開提供了一個(gè)簡(jiǎn)便的綁定事件的方法hover(enter, leave)。hover方法接受兩個(gè)參數(shù)，第一個(gè)參數(shù)是鼠標(biāo)進(jìn)入的事件處理程序，第二個(gè)是鼠標(biāo)離開的事件處理程序。

用法:

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

顯示和隱藏學(xué)校信息案例：

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

聯(lián)系老馬

對(duì)應(yīng)視頻地址：http://qtxh.ke.qq.com
老馬qq： 515154084
老馬微信：請(qǐng)掃碼

微信：Flydragon_malun