集团站切换校区

验证码已发送,请查收短信

复制成功
微信号:togogoi
添加微信好友, 详细了解课程
已复制成功,如果自动跳转微信失败,请前往微信添加好友
打开微信
图标

学习文章

当前位置:首页 > >学习文章 > >

{HTML5}基础事件-绑定事件

发布时间: 2019-02-22 14:26:35

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处理函数的事件





上一篇: IoT联接管理平台介绍03

下一篇: {HTML5}表单过滤器

十八年老品牌
微信咨询:gz_togogo 咨询电话:18922156670 咨询网站客服:在线客服

相关课程推荐

在线咨询 ×

您好,请问有什么可以帮您?我们将竭诚提供最优质服务!