不同的浏览器绑定事件的代码都不太一样,所以我们使用jQuery来写代码的话,可以屏蔽不同浏览器之间的差异。
在jQuery中,可以使用 on 来绑定一个事件,指定事件的名称和对应的处理函数:
// 获取超链接的jQuery对象:var a = $(‘#test-link‘);a.on(‘click‘, function () { alert(‘Hello!‘);});
但是通常,我们不这样使用,因为我们可以直接使用封装好的事件方法,比如上面的 on click 我们可以直接写成:
a.click(function () { alert(‘Hello!‘);});
1、常用事件
1.1 鼠标事件
| click | 鼠标单击时触发 |
| dblclick | 鼠标双击时触发 |
| mouseenter | 鼠标进入时触发 |
| mouseleave | 鼠标移出时触发 |
| mousemove | 鼠标在DOM内部移动时触发 |
| hover | 鼠标进入和退出时触发两个函数,相当于mouseenter加上mouseleave |
1.2 键盘事件
键盘事件仅作用在当前焦点的DOM上,通常是<input>和<textarea>。
| keydown | 键盘按下时触发 |
| keyup | 键盘松开时触发 |
| keypress | 按一次键后触发 |
1.3 其他事件
| focus | 当DOM获得焦点时触发 |
| blur | 当DOM失去焦点时触发 |
| change | 当<input>、<select>或<textarea>的内容改变时触发 |
| submit | 当<form>提交时触发 |
| ready | 当页面被载入并且DOM树完成初始化后触发 |
注意:ready仅作用于document对象,我们的JS代码通常要等待DOM加载完成后再执行,否则经常会找不到DOM,所以我们自己初始化的代码需要放到ready事件中,保证DOM已经完成了初始化:
<html><head> <script> $(document).on(‘ready‘, function () { $(‘#testForm).on(‘submit‘, function () { alert(‘submit!‘); }); }); </script></head><body> <form id="testForm"> ... </form></body>
或者:
$(document).ready(function () { // on(‘submit‘, function)也可以简化: $(‘#testForm).submit(function () { alert(‘submit!‘); });});
通常我们使用的是如下的方式,更简洁:
$(function () { // init...});
2、事件参数
有些事件比如mousemove和keypress,我们需要获得鼠标的位置和按键的值。所有事件都会传入 Event 对象作为参数,可以从该对象上获取更多的信息:
$(function () { $(‘#testMouseMoveDiv‘).mousemove(function (e) { $(‘#testMouseMoveSpan‘).text(‘pageX = ‘ + e.pageX + ‘, pageY = ‘ + e.pageY); });});
如下图所示,鼠标移动的话x,y坐标值会不断变化:
3、取消绑定
一个已被绑定的事件可以解除绑定,通过off(‘xxx‘, function)实现,值得注意的是,off方式的取消绑定是无法取消直接的事件方法的,如下方式取消绑定是无效的:
// 绑定事件:a.click(function () { alert(‘hello!‘);});// 解除绑定:a.off(‘click‘, function () { alert(‘hello!‘);});
这是两个不同的函数对象,所以off无法取消已经banding的第一个匿名函数。
可以使用 off(‘click‘) 移除所有已绑定的 click 事件的函数,或者 off() 移除已绑定的所有类型的事件处理函数。
4、事件触发条件
记住,事件的触发总是由用户操作引发的,即如果用JS代码去改变值,不会触发对应的事件!
如果一定要使用JS触发事件,可以直接调用无参的事件方法来触发,例如:
var input = $(‘#test-input‘);input.val(‘change it!‘);input.change(); // 触发change事件// input.change()相当于input.trigger(‘change‘),它是trigger()方法的简写
另外,有些JS代码即使设定触发,也因为浏览器的安全设置无法实现,只能由用户触发。
06jQuery-05-事件
原文:http://www.cnblogs.com/deng-cc/p/6684263.html