html 页面绑定事件,{HTML5}基础事件-绑定事件

JavaScript 有一个非常重要的功能，就是事件驱动。当页面完全加载后，用户通过鼠标或键盘触发页面中绑定事件的元素即可触发。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处理函数的事件