第5章 jQuery事件操作-【千锋教育】Jquery从入门到实战

第5章 jQuery事件操作 事件基础 Event对象详解 事件高级用法 事件扩展用法 事件基础 Event对象详解 ☞点击查看本小节知识架构 事件高级用法 ☞点击查看本小节知识架构 ☞点击查看本小节知识架构 5.2 5.3 5.1 事件扩展用法 ☞点击查看本小节知识架构 5.4 学习目标 掌握 了解 学会 掌握常见的jQuery事件种类 1 2 了解Event对象及其属性和方法 3 学会事件高级使用技巧 销售额 掌握知识 理解知识 熟悉知识 3.333333 3.333333 3.333333 在浏览网页的时候，用户经常会对页面进行一些操作，页面对这些访问者的响应叫作事件。事件处理程序指的是当HTML页面当中发生某些事件时候所调用的方法。 jQuery中的事件跟原生JavaScript事件并没有太大区别，只不过在jQuery中，对事件进行了二次封装，统一了调用的API和解决了事件的兼容性问题。使用jQuery事件，可以快速、高效地满足一系列复杂的需求。 5.1 事件基础 5.1.1 页面载入事件 返回目录 5.1.2 鼠标事件 5.1.3 键盘事件 5.1.4 表单事件 5.1.5 滚动事件 5.1 事件基础 首先要明确一点，jQuery中所有的事件操作，都是利用原生JavaScript的绑定写法addEventListener()方法实现的，所以添加多个事件的时候，会逐一触发，不会出现事件覆盖的情况。 在jQuery当中，大多数的DOM事件都有一个等效的与其对应的方法。根据事件使用的情况不同，jQuery对事件进行了相应的分类处理。常见的事件处理方式，无非就是鼠标、键盘等的交互行为，下面将对其进行详细的讲解。 页面载入事件是当前页面加载完毕后触发的事件行为。在jQuery中是利用ready事件实现的，语法为： 5.1.1 页面载入事件 5.1 事件基础 在jQuery中，$(document).ready(function(){})跟$(function(){})是等价关系，后者是前者的简写方式，代码如下所示。 具体演示代码如下所示。 jQuery中的页面载入事件是DOM加载完就触发的，跟原生JavaScript中的window.onload事件有区别，window.onload事件是等整个页面加载完毕后再触发回调的，所以jQuery的ready事件触发时间点比window.onload事件要早，具体演示代码如下所示。 5.1.1 页面载入事件 5.1 事件基础 鼠标事件是常见的事件交互行为，表列举了常见的鼠标事件。 5.1.2 鼠标事件 5.1 事件基础 鼠标事件的语法为： 5.1.2 鼠标事件 5.1 事件基础 其他鼠标事件操作方式与此类似，这里不再赘述。注意，mousemove事件为连续触发事件。 下面以鼠标移入移出事件为例做简单的演示，具体代码如下所示。 键盘事件也是常见的事件交互行为，表列举了常见的键盘事件。 5.1.3 键盘事件 5.1 事件基础 一般情况下，jQuery是使用keydown、keypress、keyup来捕获键盘事件的。这3个事件有一定的先后顺序：keydown → keypress → keyup。 5.1.3 键盘事件 5.1 事件基础 演示代码如下所示。 keydown事件与keypress事件都是键盘按下的一瞬间触发的，但是keypress事件只能由数字键和字母键触发，不包括功能键，如【F2】键、【Ctrl】键等。上面的代码，如果按下一个功能键，那么只会触发'执行1'和'执行3'。 5.1.4 表单事件 5.1 事件基础 表单事件在表单操作中非常重要，表列举了常见的表单事件。 首先演示foucs和blur这两个事件，代码如下所示。 5.1.4 表单事件 5.1 事件基础 接下来对change事件做简单的使用演示，代码如下所示。 当复选框被选中或取消选中时，都会触发change事件。 最后对select事件做简单的使用演示，代码如下所示。 5.1.5 滚动事件 5.1 事件基础 滚动事件是当滚动条发生改变时触发的事件，是连续触发事件，接下来就滚动事件做简单的演示，代码如下所示。 5.1.5 滚动事件 5.1 事件基础 当拖曳页面中的滚动条时，触发scroll事件，而且会连续触发。类似的事件还有改变浏览器窗口大小的resize事件，演示代码如下所示。 当改变浏览器大小时触发此事件，注意，事件要加给window对象而不是document对象。 5.2 Event对象详解 5.2.1 鼠标指针坐标 返回目录 5.2.2 键盘键值 5.2.3 阻止冒泡 5.2.4 默认事件 5.2.5 事件源 5.2 Event对象详解 Event对象代表事件的状