如果你在寫文章或者 Demo，為了簡單，你當然可以用事件監聽函數，以及那些事件對象提供的方法等。但在實際中，有一些方法和屬性是有兼容性問題的，所以我們會使用 jQuery 來消除兼容性問題。
下面簡單的來說一下 jQuery 中事件的基礎操作。
綁定事件和事件代理
在 jQuery 中，提供了諸如 click() 這樣的語法糖來綁定對應事件，但是這里推薦統一使用 on() 來綁定事件。語法：
.on( events [, selector ] [, data ], handler )
events 即為事件的名稱，你可以傳遞第二個參數來實現事件代理，具體文檔.on() 這里不再贅述。
處理過兼容性的事件對象（Event Object）
事件對象有些方法等也有兼容性差異，jQuery 將其封裝處理，并提供跟標準一直的命名。
如果你想在 jQuery 事件回調函數中訪問原來的事件對象，需要使用 event.originalEvent，它指向原生的事件對象。
觸發事件 trigger 方法
點擊某個綁定了 click 事件的節點，自然會觸發該節點的 click 事件，從而執行對應回調函數。
trigger 方法可以模擬觸發事件，我們單擊另一個節點 elementB，可以使用：
$(elementB).on('click', function(){ $(elementA).trigger( "click" );});事件監聽
jQuery 中的事件監聽，完全可以用 addEventListener/attachEvent 模擬，分別對應于現代瀏覽器和 IE ，可以把兩個方法封裝一下，但是為了方便，這里把其他事件相關處理，如移除事件監聽、阻止默認事件等方法統一寫在一個對象中，方便調用，具體代碼如下：
// 事件處理對象 var EventUtil = { // 添加事件監聽 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; } }, // 移除事件監聽 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 對象 getEvent: function(event){ return event ? event : window.event; }, // 跨瀏覽器獲取 target 屬性 getTarget: function(event){ return event.target || event.srcElement; }, // 阻止事件的默認行為 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('被點擊了'); event = EventUtil.getEvent(event); // 跨瀏覽器獲取 event 對象 EventUtil.preventDefault(event); // 阻止默認事件});新聞熱點
疑難解答
