一，一个事件监听的简便写法
最近发现一个jQuery中事件监听的简洁写法，感觉方便好多。同时也深感自己基础薄弱，好多东西竟然都模棱两可。因此，记录的同时，也对jQuery事件监听做个小的总结
原文链接：http://blog.csdn.net/luyinchangdejiqing/article/details/52413368
//鼠标拖拽触发动画 ???????$(".item-wrap").on({ ???????????mousedown: function(e) { ???????????????var el = $(this); ???????????????var os = el.offset(); ???????????????dy1 = e.pageY - os.top; ???????????}, ???????????mouseup: function(e) { ???????????????var el = $(this); ???????????????var os = el.offset(); ???????????????dy2 = e.pageY - os.top; ???????????????//停止拖拽事件 ???????????????$(document).off(‘mousemove.drag‘);// ???????????????根据鼠标拖动的方向触发响应动画 ???????????????var moveDistance=dy1-dy2; ???????????????if (moveDistance>0) {//鼠标向下拖动 ???????????????????direction = ‘down‘; ???????????????????downNum++; ???????????????????if(downNum >= 5) { ???????????????????????downNum = 0; ???????????????????} ???????????????} else{//鼠标向上拖动 ???????????????????direction = ‘up‘; ???????????????????upNum++; ???????????????????if(upNum >= 5) { ???????????????????????upNum = 0; ???????????????????} ???????????????}; ???????????????sumDistance = 0; ???????????????scroll(direction); ???????????} ???????});总结一下就是，当同一个元素需要监听多个事件时，我们可以使用json对象的形式把所有事件和事件的处理函数一并传给on监听。我们回忆下最原始的写法是：
$(‘a‘).on(‘click‘,function(){//code goes there})这里事件和事件的处理函数是一一对应的关系。如何把多个一一对应的东西联系在一起呢，很容易想到的就是json，它的每个键值对都是一一对应的。举个例子：
{‘name1‘:‘value1‘,‘name2‘:‘value2‘,‘name3‘:‘value3‘}把它用到刚刚的a标签的事件监听上：
$(‘a‘).on({click: function() {alert(‘click‘)},mouseover: function() {alert(‘mouseover‘)},dbclick: function() {alert(‘dbclick‘)}})不知道以前用没用过，其实jQuery的css设置也可以这样使用：
$(‘a‘).css(‘color‘,‘red‘);$(‘a‘).css({‘display‘:‘inline-block‘,‘padding‘:‘20px‘,‘background-color‘:‘yellow‘});二，jQuery事件监听总结
第一种，事件就是方法：直接可以在元素上使用具体的方法来绑定事件的回调，这种，是一一对应的，一次对应一个事件。
$("input").blur(function(){ ?$("input").css("background-color","#D6D6FF");});第二种，一次可以附加一个或者多个事件处理器。比如上文提到的on，除此之外还有bind。
其他目前还不清楚，等知道了再慢慢添加。
附：jQuery事件列表。
| 方法 | 描述 |
|---|---|
| bind() | 向匹配元素附加一个或更多事件处理器 |
| blur() | 触发、或将函数绑定到指定元素的 blur 事件 |
| change() | 触发、或将函数绑定到指定元素的 change 事件 |
| click() | 触发、或将函数绑定到指定元素的 click 事件 |
| dblclick() | 触发、或将函数绑定到指定元素的 double click 事件 |
| delegate() | 向匹配元素的当前或未来的子元素附加一个或多个事件处理器 |
| die() | 移除所有通过 live() 函数添加的事件处理程序。 |
| error() | 触发、或将函数绑定到指定元素的 error 事件 |
| event.isDefaultPrevented() | 返回 event 对象上是否调用了 event.preventDefault()。 |
| event.pageX | 相对于文档左边缘的鼠标位置。 |
| event.pageY | 相对于文档上边缘的鼠标位置。 |
| event.preventDefault() | 阻止事件的默认动作。 |
| event.result | 包含由被指定事件触发的事件处理器返回的最后一个值。 |
| event.target | 触发该事件的 DOM 元素。 |
| event.timeStamp | 该属性返回从 1970 年 1 月 1 日到事件发生时的毫秒数。 |
| event.type | 描述事件的类型。 |
| event.which | 指示按了哪个键或按钮。 |
| focus() | 触发、或将函数绑定到指定元素的 focus 事件 |
| keydown() | 触发、或将函数绑定到指定元素的 key down 事件 |
| keypress() | 触发、或将函数绑定到指定元素的 key press 事件 |
| keyup() | 触发、或将函数绑定到指定元素的 key up 事件 |
| live() | 为当前或未来的匹配元素添加一个或多个事件处理器 |
| load() | 触发、或将函数绑定到指定元素的 load 事件 |
| mousedown() | 触发、或将函数绑定到指定元素的 mouse down 事件 |
| mouseenter() | 触发、或将函数绑定到指定元素的 mouse enter 事件 |
| mouseleave() | 触发、或将函数绑定到指定元素的 mouse leave 事件 |
| mousemove() | 触发、或将函数绑定到指定元素的 mouse move 事件 |
| mouseout() | 触发、或将函数绑定到指定元素的 mouse out 事件 |
| mouseover() | 触发、或将函数绑定到指定元素的 mouse over 事件 |
| mouseup() | 触发、或将函数绑定到指定元素的 mouse up 事件 |
| one() | 向匹配元素添加事件处理器。每个元素只能触发一次该处理器。 |
| ready() | 文档就绪事件（当 HTML 文档就绪可用时） |
| resize() | 触发、或将函数绑定到指定元素的 resize 事件 |
| scroll() | 触发、或将函数绑定到指定元素的 scroll 事件 |
| select() | 触发、或将函数绑定到指定元素的 select 事件 |
| submit() | 触发、或将函数绑定到指定元素的 submit 事件 |
| toggle() | 绑定两个或多个事件处理器函数，当发生轮流的 click 事件时执行。 |
| trigger() | 所有匹配元素的指定事件 |
| triggerHandler() | 第一个被匹配元素的指定事件 |
| unbind() | 从匹配元素移除一个被添加的事件处理器 |
| undelegate() | 从匹配元素移除一个被添加的事件处理器，现在或将来 |
| unload() | 触发、或将函数绑定到指定元素的 unload 事件 |
jQuery中的事件监听小记
原文地址：https://www.cnblogs.com/benxiaohai-microcosm/p/8482933.html