jQuery中的事件监听小记

一，一个事件监听的简便写法

最近发现一个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事件列表。

原文地址：https://www.cnblogs.com/benxiaohai-microcosm/p/8482933.html