学习要点:
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 封装了常用的事件以便节约更多的代码。 我们称它为简写事件。
注意:这里封装的大部分方法都比较好理解,我们没必要一一演示确认,重点看几个需要注意区分的简写方法。
.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>
//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> <strong></strong>
//focus 光标激活 $('input').focus(function () { //当前元素触发 $('strong').html('123'); });
//focusin 光标激活 $('div').focusin(function () { //绑定的是 div 元素, 子类 input 触发 $('strong').html('123'); });
注意:.blur()和.focusout()表示光标丢失,和激活类似,一个必须当前元素触发,一个可以是子元素触发。
三.复合事件
jQuery 提供了许多最常用的事件效果, 组合一些功能实现了一些复合事件, 比如切换功能、智能加载等。
//背景移入移出切换效果 $('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 } });
相关推荐
第八章 AJAX基础 第八章 AJAX基础 第八章 AJAX基础 第八章 AJAX基础
《模拟电子技术基础》第八章.ppt 本章主要讲述正弦波振荡电路、非正弦波发生电路、波形转换和信号转换电路等。重点掌握正弦波振荡的平衡条件,并能够依据相位平衡条件正确判断电路是否可能产生振荡;掌握单限、滞...
模拟电子技术基础(第四版)第8章答案
UML面向对象设计与分析基础教程课件第八章
第八章程序设计基础PPT课件.pptx
java语言程序设计基础篇第八章第十题编程参考答案.pdf
B.Sklar的数字通信-基础与应用第二版的英文原版。...第8章 信道编码(三) 第9章 调制和编码的权衡 第10章 同步 第11章 多路复用和多址接入 第12章 扩频技术 第13章 信源编码 第14章 加密和解密 第15章 衰落信道
都是经过试验的java语言设计-基础篇 (第八版)第四章编程题答案成功案例 很齐全
[精选]电大基础会计课件第八章.pptx
JQuery基础教程之第八章:http://download.csdn.net/source/747973 JQuery基础教程之第九章:http://download.csdn.net/source/747982 JQuery基础教程之第十章及附录:http://download.csdn.net/source/747999 JQuery...
本人收集的MATLAB基础教程-第8章 MATLAB数值积分与微分.ppt 第13章 在Word环境下使用MATLAB.ppt 第12章 Simulink动态仿真集成环境.ppt 第11章 MATLAB图形...
JQuery基础教程之第八章后续章节看我后续资源jquery全套教程: JQuery基础教程之前言和前三章:http://download.csdn.net/source/745869 JQuery基础教程之第四章:http://download.csdn.net/source/745907 JQuery基础...
证券从业金融市场基础知识教材精讲班第八章 金融风险管理.pdf证券从业金融市场基础知识教材精讲班第八章 金融风险管理.pdf证券从业金融市场基础知识教材精讲班第八章 金融风险管理.pdf证券从业金融市场基础知识教材...
C++程序设计基础课后答案 第八章,十分详细完整,欢迎下载
模拟电子技术基础课件:第八章功率放大电路.ppt
ASP第8章ADO基础
C#第一至八章基础知识C#第一至八章基础知识C#第一至八章基础知识C#第一至八章基础知识
Python从入门到精通 第8章 Python中使用正则表达式.ppt Python从入门到精通 第9章 函数.ppt Python从入门到精通 第10章 面向对象程序设计.ppt Python从入门到精通 第11章 模块.ppt Python从入门到精通 第12章 异常...
JQuery基础教程之第八章:http://download.csdn.net/source/747973 JQuery基础教程之第九章:http://download.csdn.net/source/747982 JQuery基础教程之第十章及附录:http://download.csdn.net/source/747999 JQuery...
【完整课程列表】 ... Java基础入门教程 第1章 Java 简介...Java基础入门教程 第8章 文件流的输入输出操作(共37页).ppt Java基础入门教程 第9章 Java的高级特性(共32页).ppt jdk api 1.7.chm JDK_API_1_6_zh_CN.CHM