大工20春《javascript基础教程与应用》辅导资料九
JavaScript基础教程与应用辅导资料九主 题：课件第五章 JavaScript事件学习时间：2020年5月25日－5月31日
“不忘初心、牢记使命”主题理论学习：
每周文摘：“我们既要绿水青山，也要金山银山。宁要绿水青山，不要金山银山，而且绿水青山就是金山银山。”要按照绿色发展理念，树立大局观、长远观、整体观，坚持保护优先，坚持节约资源和保护环境的基本国策，把生态文明建设融入经济建设、政治建设、文化建设、社会建设各方面和全过程，建设美丽中国，努力开创社会主义生态文明新时代。
摘选自《习近平总书记系列重要讲话读本》
内 容：
我们这周主要学习课件第五章JavaScript事件的相关内容，希望通过下面的内容能使同学们加深对本章相关知识点的理解。
知识脉络：
JavaScript鼠标事件
鼠标事件应用
JavaScript键盘事件
键盘事件应用
重点与难点：
1、重点：JavaScript鼠标事件应用。
2、难点：JavaScript鼠标事件应用。一、JavaScript事件
事件通常与函数配合使用，这样就可以通过发生的事件来驱动函数执行
事件句柄
HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作（action），比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表，这些属性可插入 HTML 标签来定义事件动作。
属性
当以下情况发生时，出现此事件
onabort
图像加载被中断
onblur
元素失去焦点
onchange
用户改变域的内容
onclick
鼠标点击某个对象
ondblclick
鼠标双击某个对象
onerror
当加载文档或图像时发生某个错误
onfocus
元素获得焦点
onkeydown
某个键盘的键被按下
onkeypress
某个键盘的键被按下或按住
onkeyup
某个键盘的键被松开
onload
某个页面或图像被完成加载
onmousedown
某个鼠标按键被按下
onmousemove
鼠标被移动
onmouseout
鼠标从某元素移开
onmouseover
鼠标被移到某元素之上
onmouseup
某个鼠标按键被松开
onreset
重置按钮被点击
onresize
窗口或框架被调整尺寸
onselect
文本被选定
onsubmit
提交按钮被点击
onunload
用户退出页面
二、JavaScript鼠标事件
javascript的鼠标事件是个比较庞大的家族。常见的有以下8个：
mousedown：鼠标的键钮被按下。
mouseup：鼠标的键钮被释放弹起。
click：单击鼠标的键钮。
dblclick：鼠标的键钮被按下。
contextmenu ：弹出右键菜单。
mouseover：鼠标移到目标的上方。
mouseout：鼠标移出目标的上方。
mousemove：鼠标在目标的上方移动。
mousedown事件与mouseup事件可以说click事件在时间上的细分，顺序是mousedown => mouseup => click。因此一个点击事件，通常会激发几个鼠标事件。
有了它们，我们可以做许多事，但对于高层次的应用（如游戏）是显然不够的，于是鼠标事件的点击事件又根据究竟是点左键还是右键进行细分。在DOM2.0中，W3C对鼠标事件作了现范，鼠标事件被解析为MouseEvent（我们可以用e.constructor == MouseEvent来判断其是否为鼠标事件，是左键点击还是右键点击由它的一个叫button的属性判定。以下就是W3C的标准现范：
1：按下左键
2：按下中键
3：按下右键
当然微软是不会妥协的，因为e.button本来就是微软最先实现的，网景用的是e.which，但相对而言，微软的复杂多了。
0：没有键被按下
1：按下左键
2：按下右键
3：左键与右键同时被按下
4：按下中键
5：左键与中键同时被按下
6：中键与右键同时被按下
7：三个键同时被按下
例子
1. 鼠标的哪个按键被点击
<html>
<head>
<script type="text/javascript">
function whichButton(event)
{
if (event.button==2)
{
alert("你点击了鼠标右键!")
}
else
{
alert("你点击了鼠标左键!")
}
}
</script>
</head>
<body onmousedown="whichButton(event)">
请单击你鼠标的左键或右键试试
</body>
</html>
2. 当前鼠标的光标坐标是多少
<html>
<head>
<script type="text/javascript">
function show_coords(event)
{
x=event.clientX
y=event.clientY
alert("X 坐标： " + x + ", Y 坐标： " + y)
}
</script>
</head>
<body onmousedown="show_coords(event)">
在此文档中按下你鼠标的左键看看！
</body>
</html>三、JavaScript键盘事件
例子
1. shift键是否按下
<html>
<head>
<script type="text/javascript">
function isKeyPressed(event)
{
if (event.shiftKey==1)
{
alert("shit键按下了!")
}
else
{
alert("shit键没有按下!")
}
}
</script>
</head>
<body onmousedown="isKeyPressed(event)">
按下shit键，点击你鼠标的左键
</body>
</html>四、本节例题
（一）单选题
1、下列哪个事件属于JavaScript键盘事件。（ ）
A．onclick
B．onfocus
C．onmousemove
D．onkeydown
答案：D
2、下列哪个事件代表元素失去焦点。（ ）
A．onabort
B．onblur
C．onfocus
D．onload
答案：B 转载注明 无忧答案网
页:
[1]