事件
10.1事件的概念
事件的概念
事件源
事件名
事件注册
事件处理
以火灾为例：
粤商大酒店201房间发生火灾，119电话报警，南湖区消防支队出警，赶赴火灾现场通过喷水作业成功灭火。
事件源：粤商大酒店201房间
事件名：火灾
事件注册：事先已经规划好片区，粤商大酒店所属片区归南湖区消防支队负责
事件处理：喷水
10.2常用事件
鼠标常用事件：
（1） 单击事件
<body>
<p id="p1"οnclick="fun()">单击事件测试</p>
</body>
<script>
function fun(){
//获取指定元素
var p1 =document.getElementById("p1");
p1.innerText = "我被单击了";
p1.style.fontSize = "60px";
}
</script>
在这个案例中，事件源就是id为“p1”的元素，事件名是单击，事件注册是οnclick=”fun()”，也就是说当单击id为“p1”的元素是，就交由fun函数来处理。
（2） 双击事件
<body>
<div id="div1"οnclick="zoomout()" οndblclick="zoomin()">
</div>
</body>
<script>
function zoomout(){
var div1 =document.getElementById("div1");
div1.style.width = "200px";
div1.style.height = "200px";
}
function zoomin(){
var div1 =document.getElementById("div1");
div1.style.width = "100px";
div1.style.height = "100px";
}
</script>
（3） 鼠标按下/弹起（onmousedown/onmouseup）
<div id="div1"οnmοusedοwn="zoomout()" οnmοuseup="zoomin()">
</div>
</body>
<script>
function zoomout(){
var div1 =document.getElementById("div1");
div1.style.width = "200px";
div1.style.height = "200px";
}
function zoomin(){
var div1 =document.getElementById("div1");
div1.style.width = "100px";
div1.style.height = "100px";
}
</script>
（4） 鼠标移入/离开（onmouseenter/onmouseleave）
<body>
<div id="div1"οnmοuseenter="zoomout()" οnmοuseleave="zoomin()">
</div>
</body>
<script>
function zoomout(){
var div1 =document.getElementById("div1");
div1.style.backgroundColor ="red";
}
function zoomin(){
var div1 =document.getElementById("div1");
div1.style.backgroundColor ="blue";
}
</script>
（5）onmouseover onmouseout
与onmouseenter、onmouseleave很类似，区别后面再讲。
（6）鼠标移动onmousemove
<style type="text/css">
#div1{
width:300px;
height:300px;
background-color:skyblue;
}
#img1{
position:absolute;
top:0px;
left:0px;
}
</style>
<body>
<div id="div1" οnmοusemοve="move(event)">
</div>
<img id="img1" src="man.png">
鼠标的坐标<p id="p1"></p>
</body>
<script>
functionmove(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>
</html>
（7）鼠标滚轮事件（onmousewheel）
<style type="text/css">
#div1{
width:100px;
height:100px;
background-color:skyblue;
}
</style>
<body>
<div id="div1" onmousewheel="wheel(event)">
</div>
</body>
<script>
var width = 100;
var height = 100;
functionwheel(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>
</html>
键盘事件：
（1）keypress
<body>
<input type="text"id="what" οnkeypress="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）keydown、keyup
<body>
<input type="text"id="what" οnkeydοwn="search(event)"/>
</body>
<script>
function search(e){
alert(e.keyCode);
}
</script>
keydown、keyup可以捕获键盘上所有的键（个别除外，如prtsc）。
<body οnkeydοwn="move(event)">
<img id="img1"src="man.png"/>
</body>
<script>
function move(e){
var toTop = 0;
var left = 0;
switch (e.keyCode){
case 37:left -= 5;break;
case 38:toTop -= 5;break;
case 39:left += 5;break;
case 40:toTop += 5;break;
}
var img1 =document.getElementById("img1");
img1.style.top = toTop+"px";
img1.style.left = left+"px";
}
</script>
总结：
（1）使用变量top导致上下移动失败，原因是和window.top这个全局变量冲突了，换个变量名就好了。
（2）如果把变量toTop和left移入函数中，发现只能移动5像素。原因是函数内部的局部变量在每次调用函数时都会重新创建并初始化，也就是说每一次调用left和toTop的值都是0，不会保留上一次的值。如果需要保留，就只能用全局变量了。
其他事件：
onload：页面加载
onfucus：获得焦点的事件
onblur：失去焦点事件
onchange：值改变事件（回车才触发该事件）
10.3事件的注册
三种方法：
（1） 使用onXXX属性，比如οnclick=”fun()”
（2） 通过js去设置元素的onXXX属性
（3） 通过addEventListener注册
<body>
<input type="text"id="txt1" οnfοcus="focus1()"/>
</body>
<script>
//注册事件的第二种方法
var txt1 =document.getElementById("txt1");
txt1.onblur = blur1;
//注册事件的第三种方法
txt1.addEventListener("change",function (){
alert("值改变了");
});
function focus1(){
txt1.style.backgroundColor ="blue";
}
function blur1(){
txt1.style.backgroundColor ="gray";
}
</script>
后两种方法有何好处？将页面的内容、样式和行为分离，内容和样式可能是美工人员去完成，行为（实际上就是JS的内容）往往是程序员的事。分离后利于分工合作。
第三种方式addEventListener的第一个参数事件名，第二个参数是事件处理函数。可以添加事件处理监听，当然也就可以移除，用的是removeEventListener，参数与addEventListener参数是一样的。
而且通过addEventListener和removeEventListener甚至我们可以去动态地去注册不同的事件处理程序。
10.4捕获和冒泡
<style type="text/css">
#div1{
width:200px;
height: 200px;
background-color: skyblue;
}
</style>
<body>
<div id="div1">
<p id="p1">捕获与冒泡的演示</p>
</div>
</body>
<script>
var div1 =document.getElementById("div1");
var p1 =document.getElementById("p1");
p1.addEventListener("click",click1);
div1.addEventListener("click",click2);
function click1(){
alert("段落被单击了");
}
function click2(){
alert("div被单击了");
}
</script>
在这个案例中，如果单击文字，先提示“段落被单击了”，然后再提示“div被单击了”。因为div是段落的父容器，所以单击段落也就单击了div，所以两者都会触发这个事件。
但是如何谷规定两个事件的处理顺序呢？这就是事件冒泡和捕获。
冒泡：按照从内到外的顺序依次触发，默认方式
捕获：与冒泡相反
<styletype="text/css">
#div2{
width: 100px;
height: 100px;
background-color: skyblue;
margin: 10px;
}
div{
border: 1px solid blue;
}
</style>
<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;
//onmouseenter不支持冒泡
/*div1.onmouseover = enter1;
div2.onmouseover = enter2;*/
function enter1(){
alert("进入div1");
}
function enter2(){
alert("进入div2");
}
</script>
当使用mouseenter事件时，当里层的div触发进入事件时，处理完了就完事了（阻断冒泡）；而使用mouseover事件，当里层的div触发进入事件时，处理完了还会冒泡给父容器处理进入事件。
1379
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
