如果你在写文章或者 Demo，为了简单，你当然可以用事件监听函数，以及那些事件对象提供的方法等。但在实际中，有一些方法和属性是有兼容性问题的，所以我们会使用 jQuery 来消除兼容性问题。
下面简单的来说一下 jQuery 中事件的基础操作。
绑定事件和事件代理
在 jQuery 中，提供了诸如 click() 这样的语法糖来绑定对应事件，但是这里推荐统一使用 on() 来绑定事件。语法：
events 即为事件的名称，你可以传递第二个参数来实现事件代理，具体文档.on() 这里不再赘述。
处理过兼容性的事件对象（Event Object）
事件对象有些方法等也有兼容性差异，jQuery 将其封装处理，并提供跟标准一直的命名。
如果你想在 jQuery 事件回调函数中访问原来的事件对象，需要使用 event.originalEvent，它指向原生的事件对象。
触发事件 trigger 方法
点击某个绑定了 click 事件的节点，自然会触发该节点的 click 事件，从而执行对应回调函数。
trigger 方法可以模拟触发事件，我们单击另一个节点 elementB，可以使用：
事件监听
jQuery 中的事件监听，完全可以用 addEventListener/attachEvent 模拟，分别对应于现代浏览器和 IE ，可以把两个方法封装一下，但是为了方便，这里把其他事件相关处理，如移除事件监听、阻止默认事件等方法统一写在一个对象中，方便调用，具体代码如下：// 添加事件监听
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,callback){
if(element.removeEventListener){
element.removeEventListener(type,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); // 阻止默认事件
});
