学科分类

事件绑定

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

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

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

接下来,通过表1列举jQuery中的一些常用的事件方法。

表1 jQuery常用事件方法

分类 方法 说明
表单事件 blur([[data],function]) 当元素失去焦点时触发
focus([[data],function]) 当元素获得焦点时触发
change([[data],function]) 当元素的值发生改变时触发
focusin([data],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]) 当单击元素时触发
dblclick([[data],function]) 当双击元素时触发
mousedown([[data], function]) 当鼠标指针移动到元素上方,并按下鼠标按键时触发
mouseup([[data], function]) 当在元素上放松鼠标按钮时,会被触发
浏览器事件 scroll([[data],function]) 当滚动条发生变化时触发
resize([[data], function]) 当调整浏览器窗口的大小时会被触发

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

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

 1  <div>绑定事件</div>
 2  <script>
 3   $("div").click(function() {
 4    $(this).css("background", "purple");
 5   });
 6   $("div").mouseenter(function() {
 7    $(this).css("background", "skyblue");
 8   });
 9  </script>

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

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

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

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

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

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

 1  // 一次绑定一个事件
 2  $("div").on("click", function() {
 3   $(this).css("background", "yellow")
 4  });
 5  // 一次绑定多个事件
 6  $("div").on({
 7   mouseenter: function() {
 8    $(this).css("background", "skyblue");
 9   },
 10  click: function() {
 11   $(this).css("background", "purple");
 12  },
 13  mouseleave: function() {
 14   $(this).css("background", "blue");
 15  }
 16 });
 17 // 为不同事件绑定相同的事件处理函数
 18 $("div").on("mouseenter mouseleave", function() {
 19  $(this).toggleClass("current");
 20 });

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

点击此处
隐藏目录