第1章 WEB前端开发工程师-jQuery框架 1-16：jQuery绑定事件

                                                        jQuery绑定事件

 

本节课所讲内容：

1. jQuery绑定事件

                                                                            主讲教师：Head老师

一. 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('click', fn); //执行普通函数式无须圆括号

function fn() {

alert('点击！');

}

//可以同时绑定多个事件

$('input').bind('mouseout mouseover', function () { //移入和移出分别执行一次

$('div').html(function (index, value) {

return value + '1';

});

});

//通过对象键值对绑定多个参数

$('input').bind({ //传递一个对象

'mouseout' : function () { //事件名的引号可以省略

alert('移出');

},

'mouseover' : function () {

alert('移入');

}

});

//使用 unbind 删除绑定的事件

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

//使用 unbind 参数删除指定类型事件

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

//使用 unbind 参数删除指定处理函数的事件

function fn1() {

alert('点击 1');

}

function fn2() {

alert('点击 2');

}

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

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

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