10.事件
10.1事件的概念
事件源
事件名
事件注册
事件处理程序
以火灾为例
粤商大酒店201房间发生火灾,119电话报警,南湖区消防支队出警,赶赴现场,通过碰水作业成功灭火
事件源:粤商大酒店201房间
事件名:火灾
事件注册:事先已经规划好片区,粤商大酒店所属片区归南湖区消防支队负责
事件处理:喷水作业
10.2常用事件
鼠标常用事件:
(1)click:单击事件
<body> <p id="p1" οnclick="fun()">单击事件测试</p> </body> <script> function fun(){ //获取到指定元素 var p1 = document.getElementById("p1"); p1.style.fontSize = "50px"; p1.innerText = "我被单击了"; } </script>
在这个案例中,事件源就是id为“p1”的元素,事件名是单击,事件注册是οnclick="fun()"
,也就是说当单击id为“p1”的元素时,就交由fun函数来处理
双击事件ondblclick
<style> #div1{ width: 100px; height: 100px; background-color: red; } </style> </head> <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.weight = "100px"; div1.style.height = "100px"; } </script>
鼠标按下/弹起(onmousedown/onmouseup)
<style> #div1{ width: 100px; height: 100px; background-color: red; } </style> </head> <body> <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>
鼠标移入/离开(onmouseenter/onmouseleave)
<style> #div1{ width: 100px; height: 100px; background-color: red; } </style> </head> <body> <div id="div1" οnmοuseenter="zoomout()" οnmοuseleave="zoomin()"> </div> </body> <script> function zoomout(){ var div1 = document.getElementById("div1"); div1.style.width = "100px"; div1.style.height = "100px"; div1.style.backgroundColor = "blue"; } function zoomin(){ var div1 = document.getElementById("div1"); div1.style.width = "200px"; div1.style.height = "200px"; div1.style.backgroundColor = "red"; } </script>
ommouseoner/onmouseout
与enter和leave很类似
<script> var div1 = document.getElementById("div1"); var div2 = document.getElementById("div2"); /*div1.onmouseenter = enter1; div2.onmouseenter = enter2;*/ div1.onmouseover = enter1; div2.onmouseover = enter2; /*div1.onmouseleave = leave1; div2.onmouseleave = leave2;*/ function enter1(){ alert("进入div1"); }function enter2(){ alert("进入div2"); } function leave1(){ alert("离开div1"); }function leave2(){ alert("离开div2"); } </script>
当使用mouseenter事件时,当里层的div触发进入事件时,处理完就结束了(阻断冒泡),而当使用mouseover事件时,当里层的div触发进入事件时,处理完了还会冒泡给父容器处理进入事件
鼠标移动onmousemove
键盘事件
keypress
<body> <input id="what" type="text" ο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等属性判断在击键的同时是否按下了shif、ctrl等辅助键
function search(e){ alert(e.keyCode); if(e.shiftKey){ alert("shift也被按下了"); } if(e.ctrlKey){ alert("ctrl也被按下了"); } }
keydown、keyup可以捕获键盘上所有的键(个别除外)
<style> #img1{ position: absolute; top: 0; left: 0; } </style> </head> <body οnkeydοwn="move(event)"> <img id="img1" src="小人.png"> </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.top1 = top1 + "px"; img1.style.left = left + "px"; } </script>
总结
使用变量top导致上下移动失败,原因是和window.top这个全局变量冲突了,换个变量名就好了
如果把变量top1和left移入函数中,发现只能移动5像素,原因是函数内部的局部变量,在每次调用函数时都会重新创建并初始化,也就是说每一次调用left和top1的值都是0,不会保留上一次的值,如果需要保留,就只能使用全局变量了
其它事件:
onload:页面加载事件
onfocus:获得焦点的事件
onblue:失去焦点
<input type="text" id="text1" οnfοcus="focus1()" οnblur="blur1()"> </body> <script> function focus1(){ var text1 = document.getElementById("text1"); text1.style.background = "red"; } function blur1(){ var text1 = document.getElementById("text1"); text1.style.background = "blue"; }
onchange:值改变事件
10.3事件的注册
三种方法:
1.使用onXXX属性,比如οnclick=”fun()”
2.通过js去设置元素的onXXX属性
3.通过addEventListener注册
//注册事件的第二种方法 var text1 = document.getElementById("text1"); text1.onblur = blur1(); //注册事件的第三种方法 text1.addEventListener("change",change);
后两种方法有和好处
将页面的内容、样式和行为分离,内容和样式可能是美工人员去完成,行为(实际上就是js的内容)往往是程序员的事,分离后利于分工合作
第三种方式addEventListener的第一个参数是事件名,第二个参数是事件处理函数。
可以添加事件监听,当然也就可以移除,使用removeEventListener,于addEventListener使用方法一样
而且通过addEventListener和removeEventListener甚至我们可以去动态地去注册不同的事件处理程序。
10.4捕获和冒泡
<style> #div1{ width: 200px; height: 200px; background-color: blue; } </style> </head> <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,所以两者都会触发这个事件
但是如何去规定两个事件的处理顺序
这就是事件的冒泡和捕获
冒泡:按照从内到外的顺序依次触发,默认方式
捕获:反之