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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏学海无涯

Android开发之自定义View(一)

Android常见的自定义控件有三种方式: 继承View 继承原有的控件,在原有控件的基础上进行修改 重新拼装组合 今天先来简单说一说第一种也是最复杂的一种~~...

2977
来自专栏从零开始的linux

html入门

基本网页构成 <!doctype html> <html> <head> <title>This is the Title of the Page</ti...

3555
来自专栏抠抠空间

CSS基础

一、CSS简介 css概念     CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素。     当浏览器读到一个样...

2768
来自专栏转载gongluck的CSDN博客

vc中实现控件的隐藏与显示

一、隐藏控件             CWnd *pWnd;         pWnd = GetDlgItem(IDC_EDIT1);        //获...

3605
来自专栏向治洪

Android View底层到底是怎么绘制的

Android绘制链图: ? 网上很多讲Android  view的绘制流程往往只讲到了Measure - Layout - Draw。 但是,这只是一个...

2629
来自专栏Android干货

安卓开发小效果--走马灯

27712
来自专栏吴裕超

给新生成的节点(动态生成节点)绑定事件方法总结

第一种 jquery写法 $('.father').on('click',',child',function(){}) $(document).on('cli...

3556
来自专栏一个爱吃西瓜的程序员

Web前端基础【2】--CSS基础

CSS指层叠样式表,用来定义如何显示HTML元素,一般和HTML配合使用。CSS样式表的目的是为了解决内容与表现分离的问题:即使同一个HTML文档也能表现出外观...

3556
来自专栏Python攻城狮

jQuery1.jQuery简介及使用2.jQuery语法3.jQuery选择器4,jQuery 事件函数及效果显示

jQuery 是一个 JavaScript 库。 jQuery 极大地简化了 JavaScript 编程。(write less,do more.)

1223
来自专栏xingoo, 一个梦想做发明家的程序员

CSS定位之position详解

position属性 在前端中,position是很常见的属性。通过这个属性可以调整dom元素在浏览器中显示的位置。 它有几个常用的属性: static 默认值...

2306

扫码关注云+社区

领取腾讯云代金券