jQuery中的基础事件

一.绑定事件

jQuery 通过.bind()方法来为元素绑定事件。 可以传递三个参数： bind(type, [data], fn)，type表示一个或多个类型的事件名字符串;[data]是可选的，作为 event.data 属性值传递一个额外的数据，这个数据是一个字符串、一个数字、一个数组或一个对象;fn 表示绑定到指定元素的处理函数。

$('input').bind('click', function () {alert('点击!');});//点击按钮后执行匿名函数

function fn() {alert('点击!');}

$('input').bind('click', fn); //执行普通函数式无须圆括号

$('input').bind('mouseout mouseover',fn) //可以同时绑定多个事件，移入和移出分别执行一次

$('input').bind({ //通过对象键值对绑定多个参数

'mouseout' : function () {alert('移出');}, //事件名的引号可以省略

'mouseover' : function () {alert('移入');}

});

使用 unbind删除绑定的事件：

$('input').unbind(); //删除所有当前元素的事件

$('input').unbind('click'); //删除当前元素的 click 事件

function fn1() {alert('点击 1');}

function fn2() {alert('点击 2');}

$('input').bind('click', fn1);

$('input').bind('click', fn2);

$('input').unbind('click', fn1); //只删除 fn1处理函数的事件

二.简写事件

为了使开发者更加方便的绑定事件，jQuery 封装了常用的事件以便节约更多的代码。 我们称它为简写事件。

.mouseover()和.mouseout()表示鼠标移入和移出的时候触发。那么 jQuery 还封装了另外一组：.mouseenter()和.mouseleave()表示鼠标穿过和穿出的时候触发。那么这两组本质上有什么区别呢?手册上的说明是：.mouseenter()和.mouseleave()这组穿过子元素不会触发，而.mouseover()和.mouseout()则会触发。

.keydown()、.keyup()返回的是键码，而.keypress()返回的是字符编码。

$('input').keydown(function (e) {alert(e.keyCode);}); //按下 a 返回 65

$('input').keypress(function (e) {alert(e.charCode); });//按下 a 返回 97

注意：e.keyCode 和e.charCode在两种事件互换也会产生不同的效果，除了字符还有一些非字符键的区别。

blur()和focusout()都表示光标丢失，对应的focus()和focusin()都表示焦点激活，blur()和focus()必须当前元素触发，另外两个可以是子元素触发。

三.复合事件：jQuery 提供了许多最常用的事件效果，组合一些功能实现了一些复合事件，比如切换功能、智能加载等。

ready(fn) 当DOM 加载完毕触发事件

hover([fn1,]fn2) 当鼠标移入触发第一个 fn1，移出触发fn2

如：背景移入移出切换效果

$('div').hover(function () {$(this).css('background', 'black');}, //mouseenter 效果

function () {$(this).css('background', 'red'); } //mouseleave效果，可省略

);

hover()方法是结合了.mouseenter()方法和.mouseleva()方法，并非mouseover()和mouseout()方法。