第8章 jQuery事件機制
- JavaScript中已經學習過了事件，jQuery對JavaScript事件進行了封裝，增長並擴展了事件處理機制。jQuery不只提供了更加優雅的事件處理語法，並且極大的加強了事件的處理能力。
8.1 jQuery事件發展歷程(瞭解)
簡單事件綁定–bind事件綁定–delegate事件綁定–on事件綁定(推薦)javascript
- 簡單事件註冊
click(handler) 單擊事件 mouseenter(handler) 鼠標進入事件 mouseleave(handler) 鼠標離開事件
- bind方式註冊事件（不用）
// 第一個參數：事件類型 // 第二個參數：事件處理程序 $('p').bind('click mouseenter', function(){ // 事件響應方法 });
- delegate註冊委託事件（不用）
// 第一個參數：selector，要綁定事件的元素 // 第二個參數：事件類型 // 第三個參數：事件處理函數 $('.parentBox').delegate('p', 'click', function(){ // 爲 .parentBox下面的全部的p標籤綁定事件 });
8.2 on註冊事件(重點)
- jQuery1.7以後，jQuery用on統一了全部事件的處理方法。
- 強烈建議使用。
on註冊簡單事件java
// 表示給$(selector)綁定事件，而且由本身觸發，不支持動態綁定。 $(selector).on( 'click', function() { });
on註冊事件委託web
// 表示給$(selector)綁定代理事件，當必須是它的內部元素span才能觸發這個事件，支持動態綁定 $(selector).on( 'click','span', function() { });
on註冊事件的語法：瀏覽器
// 第一個參數：events，綁定事件的名稱能夠是由空格分隔的多個事件（標準事件或者自定義事件） // 第二個參數：selector, 執行事件的後代元素（可選），若是沒有後代元素，那麼事件將由本身執行。 // 第三個參數：data，傳遞給處理函數的數據，事件觸發的時候經過event.data來使用（不常使用） // 第四個參數：handler，事件處理函數 $(selector).on(events[,selector][,data],handler);
8.3 事件解綁
- unbind方式（不用）
$(selector).unbind(); // 解綁全部的事件 $(selector).unbind('click'); // 解綁指定的事件
- undelegate方式（不用）
$( selector ).undelegate(); // 解綁全部的delegate事件 $( selector).undelegate( 'click' ); // 解綁全部的click事件
- off方式（推薦）
// 解綁匹配元素的全部事件 $(selector).off(); // 解綁匹配元素的全部click事件 $(selector).off('click');
8.5 觸發事件
$(selector).click(); // 觸發 click事件 $(selector).trigger('click');
8.6 jQuery事件對象
jQuery事件對象其實就是js事件對象的一個封裝，處理了兼容性。svg
// screenX和screenY 對應屏幕最左上角的值 // clientX和clientY 距離頁面左上角的位置（忽視滾動條） // pageX和pageY 距離頁面最頂部的左上角的位置（會計算滾動條的距離） // event.keyCode 按下的鍵盤代碼 // event.data 存儲綁定事件時傳遞的附加數據 // event.stopPropagation() 阻止事件冒泡行爲 // event.preventDefault() 阻止瀏覽器默認行爲 // return false:既能阻止事件冒泡，又能阻止瀏覽器默認行爲。
本文同步分享在 博客「cwl_java」（CSDN）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。函數