jQuery——事件操作（一）

最新推荐文章于 2021-03-02 15:33:26 发布

转载最新推荐文章于 2021-03-02 15:33:26 发布 · 496 阅读

文章标签：

#jquery #事件

jQuery 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了jQuery中的事件绑定、简写事件及复合事件等核心概念。包括如何使用.bind()方法绑定事件，简写事件如.mouseover()和.mouseenter()的区别，以及复合事件如.hover()和.toggle()的具体应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jQuery——事件操作（一）

JavaScript 有一个非常重要的功能，就是事件驱动。当页面完全加载后，用户通过鼠标或键盘触发页面中绑定事件的元素即可触发。jQuery 为开发者更有效率的编写事件行为，封装了大量有益的事件方法供我们使用。

一．绑定事件

在JavaScript 课程的学习中，我们掌握了很多使用的事件，常用的事件有：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 处理函数的事件

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

二．简写事件

为了使开发者更加方便的绑定事件，jQuery 封装了常用的事件以便节约更多的代码。称它为简写事件。

这里写图片描述

.mouseover()和.mouseout()表示鼠标移入和移出的时候触发。那么jQuery 还封装了另外一组：.mouseenter()和.mouseleave()表示鼠标穿过和穿出的时候触发。那么这两组本质上有什么区别呢？说明：.mouseenter()和.mouseleave()这组穿过子元素不会触发，而.mouseover()和.mouseout()则会触发。
html:

<div style="width:200px;height:200px;background:green;">  
   <p style="width:100px;height:100px;background:red;"></p>  
</div>  
<strong></strong>

js:

//mouseover 移入

$('div').mouseover(function () {//移入div 会触发，移入p 再触发  

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

    return value+'1';  

  });  

});

//mouseenter 穿过

$('div').mouseenter(function () {  //穿过div 或者p  

  $('strong').html(function (index, value) {  //在这个区域只触发一次  

    return value+'1';  

  });  

});

//mouseout 移出

$('div').mouseout(function () {  //移出p 会触发，移出div 再触发  

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

    return value+'1';  

  });  

});

//mouseleave 穿出

$('div').mouseleave(function () {  //移出整个div 区域触发一次  

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

    return value+'1';  

  });  

});

//.keydown()、.keyup()返回的是键码，而.keypress 返回的是字符编码。

$('input').keydown(function (e) {  

  alert(e.keyCode); //按下a 返回65  

});  

$('input').keypress(function (e) {  

  alert(e.charCode); //按下a 返回97  

});

注意：e.keyCode 和e.charCode 在两种事件互换也会产生不同的效果，除了字符还有一些非字符键的区别。

.focus()和.blur()分别表示光标激活和丢失，事件触发时机是当前元素。而.focusin()和.focusout()也表示光标激活和丢失，但事件触发时机可以是子元素。

html :

<div style="width:200px;height:200px;background:green;">  
  <p style="width:100px;height:100px;background:red;"></p>  
</div>  
<strong></strong>

</pre>//focus 光标激活<p></p><p><span style="font-family:Courier New; font-size:12px"></span></p><pre name="code" class="javascript">$('input').focus(function () { //当前元素触发  

  $('strong').html('123');  

});

//focusin 光标激活


$('div').focusin(function () { //绑定的是div 元素，子类input 触发  

  $('strong').html('123');  

});

注意：.blur()和.focusout()表示光标丢失，和激活类似，一个必须当前元素触发，一个可以是子元素触发。

三．复合事件

jQuery 提供了许多最常用的事件效果，组合一些功能实现了一些复合事件，比如切换功能、智能加载等。

这里写图片描述

//背景移入移出切换效果
[javascript] view plain copy print?
$('div').hover(function () {  

  $(this).css('background', 'black'); //mouseenter 效果  

}, function () {  

  $(this).css('background', 'red'); //mouseleave 效果，可省略  

});

注意：.hover()方法是结合了.mouseenter()方法和.mouseleva()方法，并非.mouseover()和.mouseout()方法。

.toggle()这个方法比较特殊，这个方法有两层含义，第一层含义就是已经被1.8 版废用、1.9 版删除掉的用法，也就是点击切换复合事件的用法。第二层函数将会在动画那章讲解到。
既然废弃掉了，就不应该使用。被删除的原因是：以减少混乱和提高潜在的模块化程度。但你又非常想用这个方法，并且不想自己编写类似的功能，可以下载jquery-migrate.js
文件，来向下兼容已被删除掉的方法。

//背景点击切换效果(1.9 版删除掉了)

<script type="text/javascript" src="jquery-migrate-1.2.1.js"></script>  

$('div').toggle(function () { //第一次点击切换  

   $(this).css('background', 'black');  

}, function () { //第二次点击切换  

  $(this).css('background', 'blue');  

}, function () { //第三次点击切换  

  $(this).css('background', 'red');  

});

注意：由于官方已经删除掉这个方法，所以也是不推荐使用的，如果在不基于向下兼容的插件JS。可以实现这个功能

var flag = 1; //计数器  

$('div').click(function () {  
     if (flag == 1) { //第一次点击  

       $(this).css('background', 'black');  

       flag = 2;  

   } else if (flag == 2) { //第二次点击  

      $(this).css('background', 'blue');  

       flag = 3  

  } else if (flag == 3) { //第三次点击  

      $(this).css('background', 'red');  

       flag = 1;  

  }  

});