本文详细介绍了网页中的各种事件，包括鼠标事件、键盘事件以及其他常见事件，如onload、onfocus等，并探讨了事件的注册方法及事件冒泡与捕获的概念。
10事件
10.1事件的概念
事件源：
事件名：
事件注册：
事件处理：
以火灾为例：
粤商大酒店201房间发生火灾，119电话报警，南湖区消防支队出警，赶赴现场通过喷水作业成功灭火。
事件源：粤商大酒店201房间
事件名：火灾
事件注册：实现已经规划好片区，粤商大酒店所属片区归南湖区消防支队负责
事件处理：喷水
10.2常用事件
鼠标的常用事件：
（1）click（单机）事件
<body>
<p id ="p1"
onclick="fun()">单击事件测试</p>
</body>
<script>
function
fun(){
//获取到指定元素
var
p1 = document.getElementById("p1");
p1.innerText
= "我被单击了";
p1.style.fontSize
= "60px";
}
</script>
在这个案例中，事件起源就是id为“p1”的元素，事件名是单击，事件注册是onclick = “fun()”，也就是说当单击id为“p1”的元素时，就交由fun函数来处理。
（2）双击事件
<style
type="text/css">
#div1{
width:
100px;
height:
100px;
background-color: skyblue;
}
</style>
</head>
<body>
<div id ="div1"
onclick = "zoomout()"
ondblclick="zoommin()">
</div>
</body>
<script>
function
zoomout(){
var
div1 = document.getElementById("div1");
div1.style.width
= "200px";
div1.style.height
= "200px";
}
function
zoommin(){
var
div1 = document.getElementById("div1");
div1.style.width
= "100px";
div1.style.height
= "100px";
}
</script>
(3)鼠标按下/弹起（onmousedown onmouseup）
<style
type="text/css">
#div1{
width:
100px;
height:
100px;
background-color: skyblue;
}
</style>
</head>
<body>
<div id ="div1"
onmousedown ="zoomout()"
onmouseup ="zoommin()">
</div>
</body>
<script>
function
zoomout(){
var
div1 = document.getElementById("div1");
div1.style.width
= "200px";
div1.style.height
= "200px";
}
function
zoommin(){
var
div1 = document.getElementById("div1");
div1.style.width
= "100px";
div1.style.height
= "100px";
}
</script>
(4)鼠标移入/离开 onmouseenter onmouseleave
<style
type="text/css">
#div1{
width:
100px;
height:
100px;
background-color: skyblue;
}
</style>
</head>
<body>
<div id ="div1"
onmouseenter ="red()"
onmouseleave ="blue()">
</div>
</body>
<script>
function
red(){
var
div1 = document.getElementById("div1");
div1.style.backgroundColor
= "red";
}
function
blue(){
var
div1 = document.getElementById("div1");
div1.style.backgroundColor
= "blue";
}
</script>
（5）onmouseover onmouseout
与onmouseenter onmouseleave很类似，区别后面补充
（6）鼠标移动onmoumove
<style
type="text/css">
#div1{
width:
300px;
height:
300px;
background-color: skyblue;
}
#img1{
position: absolute;
top:
0;
left:
0;
}
</style>
</head>
<body>
<div id =
"div1" onmousemove ="move(event)">
<img id =
"img1" src="tp1.png">
</div>
鼠标的坐标<p
id = "p1"></p>
</body>
<script>
function
move(e){
var
p1 =document.getElementById("p1");
var
img1 =document.getElementById("img1");
p1.innerText
= e.clientX+","+ e.clientY;
img1.style.top
= e.clientY
+ "px";
img1.style.left
= e.clientX
+ "px";
}
</script>
（7）鼠标中键滚轴onmousewheel
<style
type="text/css">
#div1{
width:
100px;
height:
100px;
background-color: skyblue;
}
</style>
</head>
<body>
<div id =
"div1" onmousewheel ="wheel(event)">
</div>
</body>
<script>
var
width = 100;
var
height = 100;
function
wheel(e){
if(e.wheelDelta
>0){
width +=5;
height +=5;
}else{
width -=5;
height -=5;
}
var
div1 = document.getElementById("div1");
div1.style.width
= width+"px";
div1.style.height
= height+"px";
}
</script>
键盘事件
（1）Keypress
<body>
<input id =
"what" type="text"
onkeypress="search(event)">
</body>
<script>
function
search(e){
if(e.keyCode
== 13){
var
what = document.getElementById("what");
alert("开始搜索："+
what.value);
}
}
</script>
keyCode属性记录了按下的键的编码
Keypress事件只能捕获可打印字符的按键，不能捕获诸如shift、ctrl、alt等不可打印字符的按键.
但是可以通过shiftkey、ctrlkey等属性判断在击键的同时是否按下了shift、ctrl等辅助键
（2）onkeydown\onkeyup可以捕获键盘上所有的键（个别除外）。
<style
type="text/css">
#img1{
position: absolute;
top:
0;
left:
0;
}
</style>
</head>
<body onkeydown="move(event)">
<img id =
"img1" src="tp1.png">
</div>
</body>
<script>
var
top1 = 0;
var
left = 0;
function
move(e){
switch
(e.keyCode){
case
37:left -=
5;break;
case
38:top1 -=
5;break;
case
39:left +=
5;break;
case
40:top1 +=
5;break;
}
var
img1 =document.getElementById("img1");
img1.style.top
= top1 + "px";
img1.style.left
= left + "px";
}
</script>
总结：
（1）使用top导致上下移动失败，原因是和window top这个全局变量冲突了，换个变量名就好。
（2）如果把变量top1和left移入函数中，发现只能移动5像素。原因是函数内部的局部变量在每次调用函数时都会重新创建并初始化，也就是说每一次调用left和top1的值都是0，不会保留上一次的值，如果需要保留，就只能用全局变量了。
其他事件：
onload：页面加载事件
onfocus:获取焦点事件
onblur:失去焦点事件
onchange:值改变事件
10.3事件的注册
三种方法：
（1）onXXX属性，比如onclick=“fun()”
（2）通过js去设置元素的onXXX属性
（3）通过addEventLiser注册
<body>
<input type="text"
id="txt1"
onfocus="focus1()"
>
</body>
<script>
//注册事件的第二种方法
var
txt1 = document.getElementById("txt1");
txt1.onblur =
blur1;
//注册事件的第三种方法
txt1.addEventListener("change",change1);
function
focus1(){
txt1.style.backgroundColor
= "blue";
}
function
blur1(){
txt1.style.backgroundColor
= "pink";
}
function
change1(){
alert("值改变了");
}
</script>
后两种方法有何好处？
将页面的内容、样式和行为分离，内容和样式可能是美工人员去完成，行为（实际上就是JS的内容）往往是程序员的事，分离后利于分工合作。
第三种方式addEventLiser的第一个参数是事件名，第二个参数是事件处理函数。
可以添加事件监听，当然也就可以移除，用的是removeEventListener，参数与addEventListener参数是一样的。
通过addEventListener和removeEventListener甚至我们可以去动态地注册不同的事件处理程序。
在这个案例中，如果单击文字，先提示“段落被单击”，然后再提示“div被单击”。因为div是段落的父容器，所以单击段落也就单击了div，所以两者都会触发这个事件。
但是如何去规定两个事件的处理顺序呢？这就是时间的冒泡和捕获。
冒泡：按照从内到外的顺序依次触发；默认方式；
捕获：按照从外到内的顺序依次触发。
<style>
#div1{
border:
1px solid blue;
}
#div2{
width:
100px;
height:
100px;
background-color: skyblue;
margin:
10px;
}
</style>
</head>
<body>
<div id ="div1">
<div id ="div2">
</div>
</div>
</body>
<script>
var
div1 = document.getElementById("div1");
var
div2 = document.getElementById("div2");
div1.onmouseenter
= enter1;
div2.onmouseenter
= enter2;
// div1.onmouseleave = leave1();
// div2.onmouseleave = leave2();
div1.onmouseover =
enter1;
div2.onmouseover =
enter2;
function
enter1(){
alert("进入div1");
}
function
enter2(){
alert("进入div2");
}
// function leave1(){
// alert("离开div1");
// }
// function leave2(){
// alert("离开div2");
// }
</script>
当使用mouseenter事件时，当里层的div触发进入事件时，处理完了就完事了（阻断冒泡）；而使用mouseover事件时，当里层的div触发进入事件时，处理完了还会冒泡给父容器处理进入事件。
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
