jQuery事件

1.鼠标事件
1.1 click([[data],fn]) 鼠标单击时触发
dblclick([[data],fn]) 鼠标双击时触发
双击事件包含单击事件

$('a').click(function(){...});

只针对鼠标左键

1.2 mousedown 鼠标按下时触发
mouseup 按下的鼠标放松时触发

$('a').mousedown(function(){...});
$('a').mouseup(function(){...});

鼠标左右键都可以

1.3 mouseenter、mouseleave
鼠标进入（移出）时触发

$('a').mouseenter(function(){...});
$('a').mouseleave(function(){...});

1.4 hover（[over，]out） 鼠标进入和退出时触发两个函数，相当于mouseenter加上mouseleave

$('a').hover(function(){...},function(){...});//第一个函数为鼠标进入时触发，第二个函数为鼠标离开时触发，如果只写一个，默认为进入时触发

$(document).ready(function(){
            $('li').hover(function(){
                $(this).css({
                    'color':'red',
                    'font-size':'40px'//不用写成驼峰形式
                });
            },function(){
                $(this).css({
                    'color':'black',
                    'font-size':'20px'
                });
            });
        });

1.5 mouseover、mouseout
鼠标进入（移出）指定元素及其子元素时触发（冒泡机制）

$(document).ready(function(){
            $('ul').mouseenter(function(){
                console.log($(this));
                });//只有进入ul才触发，里面的li不会触发
            $('ul').mouseover(function(){
                console.log($(this));
                });
            });//进入li也会触发

为避免错误，尽量不用

1.6 mousemove([data],fn)
在DOM内部移动时，才会发生mousemove事件

$('ul').mousemove(function(){
                console.log(1);
                });

太容易触发，消耗内存

1.7 scroll([data],fn)
当滚动指定的元素时，会发生scroll事件

$('ul').scroll(function(){
                console.log(1);
                });

只有当内部元素溢出，且overflow设置为auto或scroll时才可以，滚动滚轮或者拖动滚动条都会触发

2.键盘事件
2.1 keydown([[data],fn])
当键盘或按钮被按下时，发生keydown事件（按钮代指一切可以作为输入设备使用的）

$(document).keydown(function(){
	console.log($(this));//$(this)返回的是整个document
});
$(document).keydown(function(event){
	console.log(event);//event是事件默认的参数，保存该事件的所有属性记录，如charcode、type、key、keyCode等
	//key值存储键盘按键值'a'，keyCode值存储按键值的ASCII码'65'
	console.log(event.keyCode);//大写
});

键盘事件能够触发的前提是绑定的对象可以获得焦点（input等表单元素）

2.2 keyup([[data],fn])
当按钮被松开时，发生keyup事件，它发生在当前获得焦点的元素上。（document事件也可以）

$(document).keyup(function(event){
	console.log(event.keyCode);//大写
});

2.3 keypress([[data],fn])
当键盘或按钮被按下时，发生keypress事件—新版本浏览器中，该事件已被keydown兼容，jQuery保留它仅仅为了向下兼容低版本浏览器

$(document).keypress(function(event){
	console.log(event.keyCode);//大写
});

keypress事件只有在实实在在输入内容的时候触发，shift、ctrl、上下左右等键不触发

3.其它事件
3.1 ready(fn) 当DOM载入就绪可以查询及操作时绑定一个要执行的函数

$(document).ready(function(){...});//前跟document

3.2 resize([[data],fn]) 当调整浏览器窗口的大小时，发生resize事件

$(window).resize(function(){...});//前跟window

3.3 focus([[data],fn])、blur([[data],fn])
当元素获得（失去）焦点时触发focus/blur事件–表单相关

$('input').focus(function(){...});
$('input').blur(function(){...});

$('input').val();//返回input的输入值
$('span').text('hello');//修改span的文本

3.4 change([[data],fn]) 当元素的值发生改变时，会发生change事件

$('input').change(function(){...});

需要检测value是否发生改变来判断是否触发，判断发生在失去焦点或按下Enter后；内部存在轮询机制，每隔一段时间检测一下，而不是实时检测；更多检测keydown，而不是输入—经常用于select下拉菜单

3.5 select([[data],fn]) 当textarea或文本类型的input元素中的文本被选择时，会发生select事件

<input type='text'>
$('input').select(function(){...});//选择输入框内部的文本

3.6 submit([[data],fn]) 当提交表单时，会发生submit事件

<form action='javascript:alert("已提交")'>
	...
</form>
//提交表单-先获取按钮
$('input[type=button]').click(function(){
	$('form').submit();//将事件绑定在按钮上，不带参数
});
//阻止表单提交
$('form').submit(function(){
	return false;//不用绑定于任何按钮，直接阻止表单提交
});
//提交表单时做一些其它操作（多用于表单验证）
$('form').submit(function(){
	console.log(...);
});

4.事件参数
event 参数
有些事件，如mousemove和keypress，我们需要获取鼠标位置和按键的值，否则监听这些事件就没什么意义；所有事件都会传入event对象作为参数，可以从event对象上获取到更多的信息。

$(document).ready(function(){
	$(document).keydown(function(event){
		console.log(event.key);
		console.log(event.keyCode);
	});//使用keydown时，键盘上所有按键都可以触发，与keypress有区别
});

通过index()获得的值从0开始

5.事件绑定与取消
5.1 on(events,[selector],[data],fn)
在选择元素上绑定一个或多个事件的事件处理函数

on里至少要有两个参数，第一个为事件类型名(events)，第二个为处理函数(fn)—类似addEventListener

$('a').on('mouseenter',function(){
	...
});

[selector] 为选择器，也可以是通过createElement动态生成的对象

$(document).on('mouseenter','a',function(event){
	event.stopPropagation();//阻止事件冒泡
});

绑定多个事件以对象方式传入值

$(document).on({
	mouseenter:function(event){
		event.stopPropagation();
	},
	keydown:function(event){
		...
	}
},'a');//第二个参数为选择器，指定以上事件的绑定元素

$('a').add(document).on({
	mouseenter:function(event){
		event.stopPropagation();
	},
	keydown:function(event){
		...
	}
});

补充：
add() 方法
把元素添加到已存在的元素组合中，对其进行后连的相同处理

$(selector).add(element,context)

element 必需，规定要添加到已存在的元素集合的选择器表达式、jQuery对象、一个或多个元素、HTML片段

$('p').add('span,div')...//选择器，可以选择多个
$("p").add(document.getElementsByTagName("span")[0])...//DOM元素
$("p").add("<br><span>A new span element.</span>").appendTo("p");//HTML片段，appendTO('p')表示将元素添加为p的子元素

context 可选，规定选择器表达式在文档中开始进行匹配的位置

5.2 off(events,[selector],[fn])
在选择元素上移除一个或多个事件的事件处理函数

function flash(){
	$('.button').show().fadeout('slow');//show()将按钮显示出来，fadeout('slow')表示缓慢消失
}
$(document).on('click','.one',flash)
.find('.obj').text('点击按钮');//将flash绑定到.one上,然后将它的文字修改
$(document).off('click','.one',flash);//取消绑定事件，参数填写与on完全一致--类似removeEventListener

完全一致不光指参数写法，还包括前面的 $ （document），也可以用$ (’.obj’).on(‘click’,flash)，但依然要完全一致，同时fn不能为匿名函数！

5.3 one(type,[data],fn)
为每一个匹配元素的特定事件（比如click）绑定一个一次性的事件处理函数

$(document).one('click','.obj',flash);//参数写法与前面一样
$('.obj').one('click',flash);//效果一样