JavaScript事件与例子
事件，就是预先设置好的一段代码，等到用户触发的时候执行。
一：常见的事件：
1.关于鼠标的事件
onclick 鼠标单击触发 ondblclick 鼠标双击触发 onmouseover 鼠标移上触发 onmouseout 鼠标离开触发 onmousemove 鼠标移动触发
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>无标题文档</title>
6 </head>
7 <body>
8 <input type="button" value="点击" onClick="show()" /><!--鼠标单击事件-->
9 </body>
10 </html>
11 <script>
12 //设置鼠标单击事件
13 function show(){
14 alert("点击弹出");
15 }
16 </script>2.关于键盘的事件 onkeydown 键盘按下触发 onkeyup 按键抬起的时候触发 onkeypress 按键触发
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>无标题文档</title>
6 </head>
7 <body>
8 <input type="text" onkeydown="return noNumbers(event)" />
9 </body>
10 </html>
11 <script type="text/javascript">
12 function noNumbers(e)
13 {
14 var keynum;
15 var keychar;
16 keynum = window.event ? e.keyCode : e.which;
17 keychar = String.fromCharCode(keynum);
18 alert(keynum+':'+keychar);
19 }
20 </script>3.关于表单的事件 onfocus 获得焦点触发 onblur 失去焦点触发 onchange 内容改变触发
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>无标题文档</title>
6 </head>
7 <body>
8 <input type="text" value="请输入" onblur="show()" /><!--失去焦点触发事件-->
9 </body>
10 </html>
11 <script>
12 //设置事件
13 function show(){
14 alert("输入有误");
15 }
16 </script>4.在js中加事件
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>无标题文档</title>
6 </head>
7 <body>
8 <input type="text" value="请输入" id="in" />
9 </body>
10 </html>
11 <script>
12 var a = document.getElementById("in");
13 //设置事件
14 a.onclick = function(){ //这样的函数没有函数名，成为匿名函数
15 alert("请输入");
16 }
17 </script>需要注意的是，事件只能通过id单个加，js不支持统一加事件，如果需要统一加事件，可以通过循环实现。
二：例子
列出一堆方块，点击其中一个改变颜色，其他不变
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>无标题文档</title>
6 <style>
7 div{
8 margin:3px;
9 height:50px;
10 width:50px;
11 background-color:#096;
12 float:left;
13 }
14 </style>
15 </head>
16 <body>
17 <div onclick="dianJi(this)"></div> <!--this实参，代表该元素本身-->
18 <div onclick="dianJi(this)"></div>
19 <div onclick="dianJi(this)"></div>
20 <div onclick="dianJi(this)"></div>
21 <div onclick="dianJi(this)"></div>
22 <div onclick="dianJi(this)"></div>
23 <div onclick="dianJi(this)"></div>
24 </body>
25 </html>
26 <script>
27 function dianJi(a){
28 //先让所有元素加到一个数组
29 var sy = document.getElementsByTagName("div");
30 //遍历所有数组颜色变回初始颜色
31 for(var i=0;i<sy.length;i++){
32 sy[i].style.backgroundColor="#096";
33 }
34 //修改传回的元素的颜色样式
35 a.style.backgroundColor="red";
36 }
37 </script>这里需要注意的是，参数填this，代表返回的是这个元素本身。在例题中，加了this后，在函数中操作的就是被点击的这个元素，这样来和其他未被点击元素区分开。
用div下拉列表
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>无标题文档</title>
6 <style>
7 *{
8 margin:0px auto;
9 font-family:微软雅黑;
10 }
11 #tou{
12 width:170px;
13 height:30px;
14 background-color:#CFF;
15 line-height:30px;
16 vertical-align:middle;
17 }
18 #shen{
19 width:170px;
20 height:150px;
21 line-height:30px;
22 vertical-align:middle;
23 display:none;
24 }
25 .list{
26 border:0.3px solid white;
27 background-color:#99C;
28
29 }
30 </style>
31 </head>
32
33 <body>
34 <div>
35 <div id="tou" onclick="chu">请选择地区</div>
36 <div id="shen"><!--给列表中的每个元素都添加一个移上去触发的事件和一个点击事件-->
37 <div class="list" onmouseover="yishang(this)" onclick="dianJi(this)">华东</div>
38 <div class="list" onmouseover="yiShang(this)" onclick="dianJi(this)">华南</div>
39 <div class="list" onmouseover="yiShang(this)" onclick="dianJi(this)">华中</div>
40 <div class="list" onmouseover="yiShang(this)" onclick="dianJi(this)">华西</div>
41 <div class="list" onmouseover="yiShang(this)" onclick="dianJi(this)">华北</div>
42 </div>
43 </div>
44 </body>
45 </html>
46 <script>
47
48 //获取列表中每个元素添加到数组s
49 var s=document.getElementsByClassName("list");
50 //控制列表中的元素移上去改变颜色，其他元素颜色变为初始值
51 function yiShang(a){
52 for(i=0;i<s.length;i++){
53 s[i].style.backgroundColor="#99C";
54 }
55 a.style.background="red";
56 }
57
58 //设置列表部分点击头部一次显示，点击两次隐藏
59 var chu=document.getElementById("tou");
60 chu.onclick=function(a){ //匿名函数
61 var c=document.getElementById("shen");//获取id为shen的元素
62 if(c.style.display=="none"){ //这里判断display的值是否是none，注意用两个等号
63 c.style.display="block";
64 }else{
65 c.style.display="none";
66 }
67 }
68
69 //点击列表中的元素后，列表隐藏，列表的文本显示到顶部
70 function dianJi(a){
71 document.getElementById("shen").style.display="none";
72 document.getElementById("tou").innerText=a.innerText;
73 }
74 </script>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017-06-19 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录