快捷導(dǎo)航

jQuery事件的綁定、觸發(fā)、及監(jiān)聽(tīng)方法簡(jiǎn)單說(shuō)明

更新時(shí)間：2016年05月10日 15:16:24 作者：Kayo Lee

這篇文章主要介紹了jQuery事件的綁定、觸發(fā)、及監(jiān)聽(tīng)方法簡(jiǎn)單說(shuō)明,使用jQuery的事件會(huì)使代碼更加簡(jiǎn)單,同時(shí)對(duì)各瀏覽器的兼容性也還不錯(cuò),需要的朋友可以參考下

如果你在寫文章或者 Demo，為了簡(jiǎn)單，你當(dāng)然可以用事件監(jiān)聽(tīng)函數(shù)，以及那些事件對(duì)象提供的方法等。但在實(shí)際中，有一些方法和屬性是有兼容性問(wèn)題的，所以我們會(huì)使用 jQuery 來(lái)消除兼容性問(wèn)題。

下面簡(jiǎn)單的來(lái)說(shuō)一下 jQuery 中事件的基礎(chǔ)操作。

綁定事件和事件代理

在 jQuery 中，提供了諸如 click() 這樣的語(yǔ)法糖來(lái)綁定對(duì)應(yīng)事件，但是這里推薦統(tǒng)一使用 on() 來(lái)綁定事件。語(yǔ)法：

.on( events [, selector ] [, data ], handler )

events 即為事件的名稱，你可以傳遞第二個(gè)參數(shù)來(lái)實(shí)現(xiàn)事件代理，具體文檔.on() 這里不再贅述。

處理過(guò)兼容性的事件對(duì)象（Event Object）

事件對(duì)象有些方法等也有兼容性差異，jQuery 將其封裝處理，并提供跟標(biāo)準(zhǔn)一直的命名。

如果你想在 jQuery 事件回調(diào)函數(shù)中訪問(wèn)原來(lái)的事件對(duì)象，需要使用 event.originalEvent，它指向原生的事件對(duì)象。

觸發(fā)事件 trigger 方法

點(diǎn)擊某個(gè)綁定了 click 事件的節(jié)點(diǎn)，自然會(huì)觸發(fā)該節(jié)點(diǎn)的 click 事件，從而執(zhí)行對(duì)應(yīng)回調(diào)函數(shù)。

trigger 方法可以模擬觸發(fā)事件，我們單擊另一個(gè)節(jié)點(diǎn) elementB，可以使用：

$(elementB).on('click', function(){
 $(elementA).trigger( "click" );
});

事件監(jiān)聽(tīng)
jQuery 中的事件監(jiān)聽(tīng)，完全可以用 addEventListener/attachEvent 模擬，分別對(duì)應(yīng)于現(xiàn)代瀏覽器和 IE ，可以把兩個(gè)方法封裝一下，但是為了方便，這里把其他事件相關(guān)處理，如移除事件監(jiān)聽(tīng)、阻止默認(rèn)事件等方法統(tǒng)一寫在一個(gè)對(duì)象中，方便調(diào)用，具體代碼如下：

// 事件處理對(duì)象
 
var EventUtil = {
  
 // 添加事件監(jiān)聽(tīng) 
 add: function(element, type, callback){
   
  if(element.addEventListener){
   element.addEventListener(type, callback, false);
  } else if(element.attachEvent){
   element.attachEvent('on' + type, callback);
  } else {
   element['on' + type] = callback;
  }
 },
 
 // 移除事件監(jiān)聽(tīng)
 remove: function(element, type, callback){
   
  if(element.removeEventListener){
   element.removeEventListener(type, callback, false);
  } else if(element.detachEvent){
   element.detachEvent('on' + type, callback);
  } else {
   element['on' + type] = null;
  }
 
 },
 
 // 跨瀏覽器獲取 event 對(duì)象
 getEvent: function(event){
  
  return event ? event : window.event;
 },
 
 // 跨瀏覽器獲取 target 屬性
 getTarget: function(event){
   
  return event.target || event.srcElement;
 },
 
 // 阻止事件的默認(rèn)行為
 preventDefault: function(event){
  
  if(event.preventDefault){
   event.preventDefault();
  } else {
   event.returnValue = false;
  }
 },
 
 // 阻止事件流或使用 cancelBubble
 stopPropagation: function(){
   
  if(event.stopPropagation){
   event.stopPropagation();
  } else {
   event.cancelBubble = true;
  }
 }
 
};
 
// 使用例子
var at = document.getElementbyId('atemp');
EventUtil.add(at, 'click', function(){
 
 console.log('被點(diǎn)擊了');
 
 event = EventUtil.getEvent(event); // 跨瀏覽器獲取 event 對(duì)象
 EventUtil.preventDefault(event); // 阻止默認(rèn)事件
});

您可能感興趣的文章: