jQuery基础事件绑定

分手后的思念是犯贱 2022-05-13 11:36 342阅读 0赞

学习要点：

1.绑定事件

2.简写事件

3.复合事件

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 处理函数的事件 二．简写事件

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

简写事件绑定方法

<table> 
 <tbody> 
 <tr> 
 <td> 方法名 </td> 
 <td> 触发条件 </td> 
 <td> 描述 </td> 
 </tr> 
 <tr> 
 <td> click(fn) </td> 
 <td> 鼠标 </td> 
 <td> 触发每一个匹配元素的&nbsp;click(单击)事件 </td> 
 </tr> 
 <tr> 
 <td> dblclick(fn) </td> 
 <td> 鼠标 </td> 
 <td> 触发每一个匹配元素的&nbsp;dblclick(双击)事件 </td> 
 </tr> 
 <tr> 
 <td> mousedown(fn) </td> 
 <td> 鼠标 </td> 
 <td> 触发每一个匹配元素的&nbsp;mousedown(点击后)事件 </td> 
 </tr> 
 <tr> 
 <td> mouseup(fn) </td> 
 <td> 鼠标 </td> 
 <td> 触发每一个匹配元素的&nbsp;mouseup(点击弹起)事件 </td> 
 </tr> 
 <tr> 
 <td> mouseover(fn) </td> 
 <td> 鼠标 </td> 
 <td> 触发每一个匹配元素的&nbsp;mouseover(鼠标移入)事件 </td> 
 </tr> 
 <tr> 
 <td> mouseout(fn) </td> 
 <td> 鼠标 </td> 
 <td> 触发每一个匹配元素的&nbsp;mouseout(鼠标移出)事件 </td> 
 </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
 <tr> 
 <td> mousemove(fn) </td> 
 <td> 鼠标 </td> 
 <td> 触发每一个匹配元素的&nbsp;mousemove(鼠标移动)事件 </td> 
 </tr> 
 <tr> 
 <td> mouseenter(fn) </td> 
 <td> 鼠标 </td> 
 <td> 触发每一个匹配元素的&nbsp;mouseenter(鼠标穿过)事件 </td> 
 </tr> 
 <tr> 
 <td> mouseleave(fn) </td> 
 <td> 鼠标 </td> 
 <td> 触发每一个匹配元素的&nbsp;mouseleave(鼠标穿出)事件 </td> 
 </tr> 
 <tr> 
 <td> keydown(fn) </td> 
 <td> 键盘 </td> 
 <td> 触发每一个匹配元素的&nbsp;keydown(键盘按下)事件 </td> 
 </tr> 
 <tr> 
 <td> keyup(fn) </td> 
 <td> 键盘 </td> 
 <td> 触发每一个匹配元素的&nbsp;keyup(键盘按下弹起)事件 </td> 
 </tr> 
 <tr> 
 <td> keypress(fn) </td> 
 <td> 键盘 </td> 
 <td> 触发每一个匹配元素的&nbsp;keypress(键盘按下)事件 </td> 
 </tr> 
 <tr> 
 <td> unload(fn) </td> 
 <td> 文档 </td> 
 <td> 当卸载本页面时绑定一个要执行的函数 </td> 
 </tr> 
 <tr> 
 <td> resize(fn) </td> 
 <td> 文档 </td> 
 <td> 触发每一个匹配元素的&nbsp;resize(文档改变大小)事件 </td> 
 </tr> 
 <tr> 
 <td> scroll(fn) </td> 
 <td> 文档 </td> 
 <td> 触发每一个匹配元素的&nbsp;scroll(滚动条拖动)事件 </td> 
 </tr> 
 <tr> 
 <td> focus(fn) </td> 
 <td> 表单 </td> 
 <td> 触发每一个匹配元素的&nbsp;focus(焦点激活)事件 </td> 
 </tr> 
 <tr> 
 <td> blur(fn) </td> 
 <td> 表单 </td> 
 <td> 触发每一个匹配元素的&nbsp;blur(焦点丢失)事件 </td> 
 </tr> 
 <tr> 
 <td> focusin(fn) </td> 
 <td> 表单 </td> 
 <td> 触发每一个匹配元素的&nbsp;focusin(焦点激活)事件 </td> 
 </tr> 
 <tr> 
 <td> focusout(fn) </td> 
 <td> 表单 </td> 
 <td> 触发每一个匹配元素的&nbsp;focusout(焦点丢失)事件 </td> 
 </tr> 
 <tr> 
 <td> select(fn) </td> 
 <td> 表单 </td> 
 <td> 触发每一个匹配元素的&nbsp;select(文本选定)事件 </td> 
 </tr> 
 <tr> 
 <td> change(fn) </td> 
 <td> 表单 </td> 
 <td> 触发每一个匹配元素的&nbsp;change(值改变)事件 </td> 
 </tr> 
 <tr> 
 <td> submit(fn) </td> 
 <td> 表单 </td> 
 <td> 触发每一个匹配元素的&nbsp;submit(表单提交)事件 </td> 
 </tr> 
 </tbody> 
</table>

注意：这里封装的大部分方法都比较好理解，我们没必要一一演示确认，重点看几个需

要注意区分的简写方法。

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

//HTML 页面设置

<div style="width:200px;height:200px;background:green;">

</div>

//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 在两种事件互换也会产生不同的效果，除了字符还有一 些非字符键的区别。更多详情可以了解 JavaScript 事件处理那章。

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

和.focusout()也表示光标激活和丢失，但事件触发时机可以是子元素。

//HTML 部分

<div style="width:200px;height:200px;background:red;">

<input type="text" value="" />

</div>

//focus 光标激活

$('input').focus(function () \{                                    //当前元素触发

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

\});

//focusin 光标激活

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

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

\});

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

三．复合事件

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

复合事件

<table> 
 <tbody> 
 <tr> 
 <td> 方法名 </td> 
 <td> 描述 </td> 
 </tr> 
 <tr> 
 <td> ready(fn) </td> 
 <td> 当&nbsp;DOM&nbsp;加载完毕触发事件 </td> 
 </tr> 
 <tr> 
 <td> hover([fn1,]fn2) </td> 
 <td> 当鼠标移入触发第一个&nbsp;fn1，移出触发&nbsp;fn2 </td> 
 </tr> 
 <tr> 
 <td> toggle(fn1,fn2[,fn3..]) </td> 
 <td> 已废弃，当鼠标点击触发&nbsp;fn1,再点击触发&nbsp;fn2... </td> 
 </tr> 
 </tbody> 
</table>

//背景移入移出切换效果

$('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

文件，来向下兼容已被删除掉的方法。