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>
- oracle的decode函数在mysql的实现
- Python的解码和编码
- 原生Ajax总结
- 多个知名化妆品牌现假官网,域名保护该受重视
- JavaScript操作Cookie
- Windows下Go环境安装
- Angular定义服务-Learn By Doing
- JS魔法堂:不完全国际化&本地化手册 之 理論篇
- mysql替换某个字段中的某个字符
- Angular企业级开发(1)-AngularJS简介
- PHP在Apache下500错误
- mysql 学习笔记
- MongoDB学习系列(2)--使用PHP访问MongoDB
- (cljs/run-at (JSVM. :browser) "命名空间就这么简单")
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法