第6章 jQuery-事件基础

6.2 页面事件
• jQuery的ready事件跟JavaScript的onload事件虽然有着相同的功能，但是 两者之间也有着细微的区别。
1、JavaScript的onload事件
• 在JavaScript中，onload表示文档加载完成后再执行的一个事件。
• 语法
//写法1： $(document).ready(function(){
6. 执行下面一段代码，会出现什么效果？（ ）
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function () { alert("first time");
}) $(function () {
A.只弹出一次对话框，显示"first time" B.只弹出一次对话框，显示"second time" C.弹出两次对话框，依次显示"first time"、
1、focus和blur
• focus表示获取焦点时触发的事件，而blur表示失去焦点时触发的 事件，两者是相反操作。
• 具有“获取焦点”和“失去焦点”特点的元素只有2种：
➢ 表单元素（单选框、复选框、单行文本框、多行文本框、 下拉列表）
➢ 超链接
2、select
• 在jQuery中，当我们选中“单行文本框”或“多行文本框”中的 内容时，就会触发select事件。
…… })
//写法2： jQuery(document).ready(function(){
…… })
2、jQuery的ready事件
• 在jQuery中，ready也表示文档加载完成后再执行的一个事件。 • 语法：
$(document).ready(function(){ ……
})
jQuery的ready事件仅仅是DOM元素加载完成就可以执行，而JavaScript 的onload事件除了DOM元素加载完成后还需要等所有外部文件也加载 完成才可以执行。
alert("second time"); })
"second time" D.程序报错，无法执行
</script>
7. 执行下面一段代码，会出现什么效果？（ ）
<script>
window.onload=function(){
alert("first time") } window.onload=function(){
…… })
//写法4： jQueห้องสมุดไป่ตู้y(function(){
…… })
4、深入了解jQuery的ready事件
• 在JavaScript中，window.onload只能调用一次，如果多次调用，则只 会执行最后一个。
• 在jQuery中，ready事件是可以多次执行的。
6.3 鼠标事件
• jQuery事件比JavaScript事件只是少了“on”前缀。例如鼠标单击事件在 JavaScript中是onclick，而在jQuery中是click。
alert("second time")
A.只弹出一次对话框，显示"first time" B.只弹出一次对话框，显示"second time" C.弹出两次对话框，依次显示"first time"、
} </script>
"second time" D.程序报错，无法执行
二、问答题 1、请简单说一下$(document).ready()和window.onload之间的区别。 （前端面试题）
第六章 jQuery的事件基础
教学重点
➢ 了解事件是什么 ➢ 掌握常见事件
6.1 事件是什么
• 在JavaScript中，一个事件应该有3部分： ➢ 事件主角：是按钮呢？还是div元素呢？还是其他？ ➢ 事件类型：是点击呢，还是移动呢？还是其他？ ➢ 事件过程：这个事件都发生了些什么？
• 举个例子，当我们点击一个按钮时，会弹出一个对话框。其中“点击” 就是一个事件，“弹出对话框”就是我们在点击这个事件里面做的一些 事情。
C. change
D. keyup
3. 如果想要在一个文本框中的内容被选中时去执行某些方法，可以使用（ ）
事件来实现。
A. click
B. change
C. select
D. bind
4. 下面有关页面事件的说法中，正确的是（ ）。 A. $(document).ready()跟window.onload是完全等价的 B. JavaScript的onload事件只需要等DOM元素加载完成就可以执行 C. $(document).ready(function(){})等价于$(function(){}) D.同一页面中，如果多次调用$(document).ready()，则只会执行最后一个 5. 下面有关事件操作的说法中，正确的是（ ）。 A. 所有元素都可以触发focus事件 B. 只有按钮才可以触发click事件 C. 选择下拉列表的某一项时，触发的是change事件 D. 表单元素获取焦点时触发的是blur事件
$().scroll(function(){ ……
})
练习题
一、单选题
1. 当按下键盘中的一个键时，最先触发的是（ ）事件。
A. keydown
B. keyup
C. mousedown
D.mouseup
2. 如果想要给单行文本框添加一个输入验证，可以使用（ ）事件来实现。
A. hover
B. keydown
3、change
• 在jQuery中，change事件常用于“具有多个选项的表单元素”。
➢ 单选框选择某一项时触发。 ➢ 复选框选择某一项时触发。 ➢ 下拉菜单选择某一项时触发。
6.6 编辑事件
• 在jQuery中，常用的编辑事件只有一种，那就是contextmenu事件。
6.7 滚动事件
• 在jQuery中，我们可以使用scroll()方法来表示滚动事件。 • 语法：
• jQuery事件的语法很简单，我们都是往事件方法中插入一个匿名函数 function(){}。
6.4 键盘事件
• 在jQuery中，常用的键盘事件共有2种。 ➢ 键盘按下：keydown ➢ 键盘松开：keyup
6.5 表单事件
• 在jQuery中，常用的表单事件有3种。
➢ focus和blur ➢ select ➢ change
3、ready事件的4种写法
• 在jQuery中，对于ready事件，共有以下4种写法。
• 语法：
//写法1： $(document).ready(function(){
…… })
//写法2： jQuery(document).ready(function(){
…… })
//写法3： $(function(){