JavaScript事件与例子

时间:2022-04-29
本文章向大家介绍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>