jQuery笔记——事件
常用的事件有：click、dblclick、 mousedown、mouseup、mousemove、mouseover、mouseout、change、select、submit、keydown、 keypress、keyup、blur、focus、load、resize、scroll、error等等
jQuery 通过.bind()方法来为元素绑定这些事件。可以传递三个参数：bind(type, [data], fn)， type 表示一个或多个类型的事件名字符串；[data]是可选的，作为 event.data 属性值传递一个 额外的数据，这个数据是一个字符串、一个数字、一个数组或一个对象；fn 表示绑定到指定元素的处理函数
//使用点击事件 $('input').bind('click', function () { //点击按钮后执行匿名函数 alert('点击！'); });
还可以绑定多个事件
//可以同时绑定多个事件 $('input').bind('mouseout mouseover', function () { //移入和移出分别执行一次 $('div').html(function (index, value) { return value + '1'; }); });
使用 unbind 删除绑定的事件
//使用 unbind 删除绑定的事件 $('input').unbind(); //删除所有当前元素的事件 //使用 unbind 参数删除指定类型事件 $('input').unbind('click'); //删除当前元素的 click 事件
简写事件
jQuery 封装了常用的事件以便节约更多的代码
部分事件简写：
| 方法名 | 触发条件 | 事件 |
| click(fn) | 鼠标 | 触发每一个匹配元素的 click(单击)事件 |
| dblclick(fn) | 鼠标 | 触发每一个匹配元素的 dblclick(双击)事件 |
| mousedown(fn) | 鼠标 | 触发每一个匹配元素的 mousedown(点击后)事件 |
| mouseup(fn) | 鼠标 | 触发每一个匹配元素的 mouseup(点击弹起)事件 |
| mouseover(fn) | 鼠标 | 鼠标触发每一个匹配元素的 mouseover(鼠标移入)事件 |
| mouseout(fn) | 鼠标 | 触发每一个匹配元素的 mouseout(鼠标移出)事件 |
| mousemove(fn) | 鼠标 | 触发每一个匹配元素的 mousemove(鼠标移动)事件 |
| mouseenter(fn) | 鼠标 | 触发每一个匹配元素的 mouseenter(鼠标穿过)事件 |
| mouseleave(fn) | 鼠标 | 触发每一个匹配元素的 mouseleave(鼠标穿出)事件 |
| keydown(fn) | 键盘 | 触发每一个匹配元素的 keydown(键盘按下)事件 |
| keyup(fn) | 键盘 | 触发每一个匹配元素的 keyup(键盘按下弹起)事件 |
| keypress(fn) | 键盘 | 触发每一个匹配元素的 keypress(键盘按下)事件 |
| scroll(fn) | 文档 | 触发每一个匹配元素的 scroll(滚动条拖动)事件 |
| focus(fn) | 表单 | 触发每一个匹配元素的 focus(焦点激活)事件 |
| blur(fn) | 表单 | 触发每一个匹配元素的 blur(焦点丢失)事件 |
| select(fn) | 表单 | 触发每一个匹配元素的 select(文本选定)事件 |
| change(fn) | 表单 | 触发每一个匹配元素的 change(值改变)事件 |
| submit(fn) | 表单 | 触发每一个匹配元素的 submit(表单提交)事件 |
mouseover()和.mouseout()表示鼠标移入和移出的时候触发。那么 jQuery 还封装了另外 一组：.mouseenter()和.mouseleave()表示鼠标穿过和穿出的时候触发。那么这两组本质上有 什么区别呢？.mouseenter()和.mouseleave()这组穿过子元素不会触发， 而.mouseover()和.mouseout()则会触发
HTML 页面设置：
//HTML 页面设置 <div style="width:200px;height:200px;background:green;"> <p style="width:100px;height:100px;background:red;"></p> </div> <strong></strong>
jQuery文件进行比较：
//mouseover 移入 $('div').mouseover(function () { //移入 div 会触发，移入 p 再触发 $('strong').html(function (index, value) { return value+'1'; }); }); //mouseenter 穿过 $('div').mouseenter(function () { //穿过 div 或者 p $('strong').html(function (index, value) { //在这个区域只触发一次 return value+'1'; }); }); //mouseout 移出 $('div').mouseout(function () { //移出 p 会触发，移出 div 再触发 $('strong').html(function (index, value) { return value+'1'; }); }); //mouseleave 穿出 $('div').mouseleave(function () { //移出整个 div 区域触发一次 $('strong').html(function (index, value) { return value+'1'; }); });
.keydown()、.keyup()返回的是键码，而.keypress()返回的是字符编码
$('input').keydown(function (e) {
alert(e.keyCode); //按下 a 返回 65
});
$('input').keypress(function (e) {
alert(e.charCode); //按下 a 返回 97
});
事件对象
事件对象就是 event 对象，通过处理函数默认传递接受。之前处理函数的 e 就是 event 事件对象
event 对象的属性 :
//通过 event.type 属性获取触发事件名 $('input').click(function (e) { alert(e.type); }); //通过 event.target 获取绑定的 DOM 元素 $('input').click(function (e) { alert(e.target); }); //通过 event.data 获取额外数据，可以是数字、字符串、数组、对象 $('input').bind('click', 123, function () { //传递 data 数据 alert(e.data); //获取数字数据 });
冒泡和默认行为
冒泡：
如果在页面中重叠了多个元素，并且重叠的这些元素都绑定了同一个事件，那么就会出现冒泡问题
HTML 页面 :
//HTML 页面 <div style="width:200px;height:200px;background:red;"> <input type="button" value="按钮" /> </div>
jQuery文件：
//三个不同元素触发事件 $('input').click(function () { alert('按钮被触发了！'); }); $('div').click(function () { alert('div 层被触发了！'); }); $(document).click(function () { alert('文档页面被触发了！'); });
注意：当我们点击文档的时候，只触发文档事件；当我们点击 div 层时，触发了 div 和 文档两个；当我们点击按钮时，触发了按钮、div 和文档。触发的顺序是从小范围到大范围。 这就是所谓的冒泡现象
jQuery 提供了一个事件对象的方法：event.stopPropagation()；这个方法设置到需要触发 的事件上时，所有上层的冒泡行为都将被取消
$('input').click(function (e) {
alert('按钮被触发了！');
e.stopPropagation();
});
默认行为:
网页中的元素，在操作的时候会有自己的默认行为。比如：右击文本框输入区域，会弹 出系统菜单、点击超链接会跳转到指定页面、点击提交按钮会提交数据，jQuery 提供了一个事件对象的方法：event.preventDefault()；这个方法可以阻止默认行为
$('a').click(function (e) {
e.preventDefault();
});
//禁止提交表单跳转
$('form').submit(function (e) {
e.preventDefault();
});
注意：如果想让上面的超链接同时阻止默认行为且禁止冒泡行为，可以把两个方法同时 写上：event.stopPropagation()和 event.preventDefault()。这两个方法如果需要同时启用的时候， 还有一种简写方案代替，就是直接 return false
$('a').click(function (e) {
return false;
});
事件委托
在 jQuery 中，我们通过事件冒泡的特性，让子元素绑定的事件冒泡到父元素(或祖先元素) 上，然后再进行相关处理即可.法在 jQuery1.7 版本之后 ,使用.on()方法
on、off 和 one
jQuery1.7 以后推出了.on()和.off()方法来前绑定事件（或者是事件委托）和解绑的方法
使用.on来替代.bind()方式 :
//替代.bind()方式 $('.button').on('click', function () { alert('替代.bind()'); });
//替代.bind()方式，并使用额外数据和事件对象 $('.button').on('click', {user : 'Lee'}, function (e) { alert('替代.bind()' + e.data.user); });
//替代.bind()方式，并绑定多个事件 $('.button').on('mouseover mouseout', function () { alert('替代.bind()移入移出！'); });
//替代.bind()方式，以对象模式绑定多个事件 $('.button').on({ mouseover : function () { alert('替代.bind()移入！'); }, mouseout : function () { alert('替代.bind()移出！'); } });
//替代.bind()方式，阻止默认行为并取消冒泡 $('form').on('submit', function () { return false; }); 或 $('form').on('submit', false);
//替代.bind()方式，阻止默认行为 $('form').on('submit', function (e) { e.preventDefault(); });
//替代.bind()方式，取消冒泡 $('form').on('submit', function (e) { e.stopPropagation(); });
使用.off替代.unbind()方式，移除事件：
//替代.unbind()方式，移除事件 $('.button').off('click'); $('.button').off('click', fn); $('.button').off('click.abc');
//替代.live()和.delegate()，事件委托 $('#box').on('click', '.button', function () { $(this).clone().appendTo('#box'); });
//替代.die()和.undelegate()，取消事件委托 $('#box').off('click', '.button');
不管是.bind()还是.on()，绑定事件后都不是自动移除事件的，需要通过.unbind()和.off() 来手工移除。jQuery 提供了.one()方法，绑定元素执行完毕后自动移除事件，可以方法仅触发一次的事件
//类似于.bind()只触发一次 $('.button').one('click', function () { alert('one 仅触发一次！'); });
