教育行业A股IPO第一股(股票代码 003032)

全国咨询/投诉热线:400-618-4000

jquery事件绑定方法有哪些?

更新时间:2021年11月11日17时27分 来源:传智教育 浏览次数:

好口碑IT培训

在jQuery中,实现事件绑定有两种方式,一种是通过事件方法进行绑定,另一种是通过on()方法进行绑定,下面我们分别进行详细讲解。

1. 通过事件方法绑定事件

在前面的学习中,我们已经用过了单个事件的绑定,是通过调用某个事件方法,传入事件处理函数来实现的,如click()、change()等。jQuery的事件和DOM中的事件相比,省略了开头的“on”,如jQuery中的click()对应DOM中的onclick。并且,jQuery的事件方法允许为一个事件绑定多个事件处理函数,只需多次调用事件方法,传入不同的函数即可。

接下来我们通过下面列举jQuery中的一些常用的事件方法。

jQuery常用事件方法

分类

方法

说明

表单
事件

blur([[data],function]) 当元素失去焦点时触发
focus([[data],function]) 当元素获得焦点时触发
change([[data],function]) 当元素的值发生改变时触发
focusin([dta],function) 在父元素上检测子元素获取焦点的情况
focusout([data],function) 在父元素上检测子元素失去焦点的情况
select([[data],function]) 当文本框(包括<input>和<textarea>)中
的文本被选择时触发
submit([[data],function]) 当表单提交时触发

键盘
事件

keydown([[data],function]) 键盘按键按下时触发
keypress([[data],function]) 键盘按键(Shift、Fn、CapsLOck等非
字符键除外)按下时触发
keyup([[data],function) 键盘按键弹起时触发

鼠标
事件

mouseover([[data],function]) 当鼠标指针移入对象时触发
mouseout([[data],function]) 当鼠标指针从元素上离开时触发
click([[data],function]) 当单击时元素触发
dbclick([[data],function]) 当双击元素时触发
mousedown([[data],function]) 当鼠标指针移动到元素上方,并按下
鼠标按键时触发
mouseup([[data],function]) 当在元素上放开鼠标按钮时,会被触发

浏览器
事件

scroll([[data],function]) 当滚动条发生变化触发
resize([[data],function) 当调整浏览器窗口的大小时会被触发

在上表中,参数function表示触发事件时执行的处理函数,参数data表示函数传入的数据,可以使用“事件对象.data”获取。如果调用时省略参数,则表示手动触动事件。

下面我们通过代码演示事件方法的使用。

<div>绑定事件</div>
<script>
    $("div").click(function(){
        $(this).css("background", "purple");
    });
    $("div").mouseenter(function(){
        $(this).css("background", "skyblue");
    });
</script>

上述代码中,第1行代码定义了div元素。第3~5行代码为div元素绑定单击事件,通过第4行代码修改当前元素背景色为紫色。第6~8行代码为div元素绑定鼠标指针移入事件,实现当鼠标指针移入div元素时,将背景色修改为天蓝色。

2.通过on()方法绑定事件

on()方法在匹配元素上绑定一个或多个事件处理函数,语法如下所示。

element.on(events, [selector], fn)

上述代码中,events表示一个或多个用空格分隔的事件类型,如click;selector表示子元素选择器;fn表示回调函数,即绑定在元素身上的侦听函数。

下面我们通过代码演示on()方法的使用。

//一次绑定一个事件
$("div").on("click", function(){
    $(this).css("background","yellow")
});

//一次绑定多个事件
$("div").on({
    mouseenter: function(){
            $(this).css("background", "skyblue");
    },
    click: function(){
        $(this).css("background", "purple");
    },
    mouseleave: function(){
        $(this).css("background", "blue");
    }
});

// 为不同事件绑定相同的事件处理函数
$("div").on("mouseenter mouseleave", function(){
    $(this).toggleClass("current");
});

上述代码演示了on()方法的3种用法。第1种用法非常简单,和事件方法的方式类似;第2种用法是为on()方法传入了一个对象,对象的属性名表示事件类型,属性值表示对应的事件处理函数;第3种用法是同时为mouseenter、mouseleave事件绑定相同的事件处理函数,实现div元素的current类的切换效果。



猜你喜欢

jQuery选择器基本语法格式和jQuery选择器的优势

jQuery中attr()和prop()的区别是什么?

jQuery框架有什么特点?如何安装jQuery?

传智教育HTML&JS+前端开发课程

0 分享到:
和我们在线交谈!