JavaScript事件与例子
事件，就是预先设置好的一段代码，等到用户触发的时候执行。
一：常见的事件：
1.关于鼠标的事件
onclick 鼠标单击触发
ondblclick 鼠标双击触发
onmouseover 鼠标移上触发
onmouseout 鼠标离开触发
onmousemove 鼠标移动触发
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<input type="button" value="点击" onClick="show()" /><!--鼠标单击事件-->
</body>
</html>
<script>
//设置鼠标单击事件
function show(){
alert("点击弹出");
}
</script>
2.关于键盘的事件
onkeydown 键盘按下触发
onkeyup 按键抬起的时候触发
onkeypress 按键触发
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<input type="text" onkeydown="return noNumbers(event)" />
</body>
</html>
<script type="text/javascript">
function noNumbers(e)
{
var keynum;
var keychar;
keynum = window.event ? e.keyCode : e.which;
keychar = String.fromCharCode(keynum);
alert(keynum+':'+keychar);
}
</script>
3.关于表单的事件
onfocus 获得焦点触发
onblur 失去焦点触发
onchange 内容改变触发
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<input type="text" value="请输入" onblur="show()" /><!--失去焦点触发事件-->
</body>
</html>
<script>
//设置事件
function show(){
alert("输入有误");
}
</script>
4.在js中加事件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<input type="text" value="请输入" id="in" />
</body>
</html>
<script>
var a = document.getElementById("in");
//设置事件
a.onclick = function(){ //这样的函数没有函数名，成为匿名函数
alert("请输入");
}
</script>
需要注意的是，事件只能通过id单个加，js不支持统一加事件，如果需要统一加事件，可以通过循环实现。
二：例子
列出一堆方块，点击其中一个改变颜色，其他不变
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
div{
margin:3px;
height:50px;
width:50px;
background-color:#096;
float:left;
}
</style>
</head>
<body>
<div onclick="dianJi(this)"></div> <!--this实参，代表该元素本身-->
<div onclick="dianJi(this)"></div>
<div onclick="dianJi(this)"></div>
<div onclick="dianJi(this)"></div>
<div onclick="dianJi(this)"></div>
<div onclick="dianJi(this)"></div>
<div onclick="dianJi(this)"></div>
</body>
</html>
<script>
function dianJi(a){
//先让所有元素加到一个数组
var sy = document.getElementsByTagName("div");
//遍历所有数组颜色变回初始颜色
for(var i=0;i<sy.length;i++){
sy[i].style.backgroundColor="#096";
}
//修改传回的元素的颜色样式
a.style.backgroundColor="red";
}
</script>
这里需要注意的是，参数填this，代表返回的是这个元素本身。在例题中，加了this后，在函数中操作的就是被点击的这个元素，这样来和其他未被点击元素区分开。
用div下拉列表
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{
margin:0px auto;
font-family:微软雅黑;
}
#tou{
width:170px;
height:30px;
background-color:#CFF;
line-height:30px;
vertical-align:middle;
}
#shen{
width:170px;
height:150px;
line-height:30px;
vertical-align:middle;
display:none;
}
.list{
border:0.3px solid white;
background-color:#99C;
}
</style>
</head>
<body>
<div>
<div id="tou" onclick="chu">请选择地区</div>
<div id="shen"><!--给列表中的每个元素都添加一个移上去触发的事件和一个点击事件-->
<div class="list" onmouseover="yishang(this)" onclick="dianJi(this)">华东</div>
<div class="list" onmouseover="yiShang(this)" onclick="dianJi(this)">华南</div>
<div class="list" onmouseover="yiShang(this)" onclick="dianJi(this)">华中</div>
<div class="list" onmouseover="yiShang(this)" onclick="dianJi(this)">华西</div>
<div class="list" onmouseover="yiShang(this)" onclick="dianJi(this)">华北</div>
</div>
</div>
</body>
</html>
<script>
//获取列表中每个元素添加到数组s
var s=document.getElementsByClassName("list");
//控制列表中的元素移上去改变颜色，其他元素颜色变为初始值
function yiShang(a){
for(i=0;i<s.length;i++){
s[i].style.backgroundColor="#99C";
}
a.style.background="red";
}
//设置列表部分点击头部一次显示，点击两次隐藏
var chu=document.getElementById("tou");
chu.onclick=function(a){ //匿名函数
var c=document.getElementById("shen");//获取id为shen的元素
if(c.style.display=="none"){ //这里判断display的值是否是none，注意用两个等号
c.style.display="block";
}else{
c.style.display="none";
}
}
//点击列表中的元素后，列表隐藏，列表的文本显示到顶部
function dianJi(a){
document.getElementById("shen").style.display="none";
document.getElementById("tou").innerText=a.innerText;
}
</script>
JavaScript事件与例子的更多相关文章
- JavaScript事件与例子（三）
两个例子,好友选中效果和左侧右侧子菜单 一.好友选中效果 可以通过设置属性的方式判断当前是否被选中,也可以通过获取当前元素的颜色从而得知当前元素状态是否被选中,从而进行操作 1.通过设置属性的方式判断 ...
- 【移动端兼容问题研究】javascript事件机制详解（涉及移动兼容）
前言 这篇博客有点长,如果你是高手请您读一读,能对其中的一些误点提出来,以免我误人子弟,并且帮助我提高 如果你是javascript菜鸟,建议您好好读一读,真的理解下来会有不一样的收获 在下才疏学浅, ...
- JavaScript事件详解-jQuery的事件实现（三）
正文 本文所涉及到的jQuery版本是3.1.1,可以在压缩包中找到event模块.该篇算是阅读笔记,jQuery代码太长.... Dean Edward的addEvent.js 相对于zepto的e ...
- JavaScript事件详解-Zepto的事件实现（二）【新增fastclick阅读笔记】
正文 作者打字速度实在不咋地,源码部分就用图片代替了,都是截图,本文讲解的Zepto版本是1.2.0,在该版本中的event模块与1.1.6基本一致.此文的fastclick理解上在看过博客园各个大神 ...
- JavaScript事件流原理解析
一.为什么会有这一篇的文章 国庆前几天由于任务比较重,要赶在国庆前把一个进度的任务开发完成,所以也就有点赶,但是却遇到了一个比较奇怪的Bug,导致了任务比预计的延迟了几个小时,对此深表遗憾,所以利用国 ...
- Javascript事件模型系列（四）我所理解的javascript自定义事件
被我拖延了将近一个月的javascript事件模型系列终于迎来了第四篇,也是我计划中的最后一篇,说来太惭愧了,本来计划一到两个星期写完的,谁知中间遇到了很多事情,公司的个人的,搞的自己心烦意乱浮躁了一 ...
- Javascript事件模型系列（一）事件及事件的三种模型
一.开篇 在学习javascript之初,就在网上看过不少介绍javascript事件的文章,毕竟是js基础中的基础,文章零零散散有不少,但遗憾的是没有看到比较全面的系列文章.犹记得去年这个时候,参加 ...
- 【探讨】javascript事件机制底层实现原理
前言 又到了扯淡时间了,我最近在思考javascript事件机制底层的实现,但是暂时没有勇气去看chrome源码,所以今天我来猜测一把 我们今天来猜一猜,探讨探讨,javascript底层事件机制是如 ...
- javaScript事件（二）事件处理程序
一.事件 二.事件流 以上内容见:javaScript事件(一)事件流 三.事件处理程序 前面提到,事件是用户或浏览器自身执行的某种动作,如click,load和mouseover都是事件的名字.响应 ...
随机推荐
- nginx与apache配合反向代理技术2
注意,上次我们只是简单的在同一台服务器模拟搭建了一个新的http服务器(启用了8080端口),使用的是apache,从而模拟了多台服务器实现的Nginx反向代理,通过Nginx向上游代理服务器发送请求 ...
- fileInput实战总结
fileinput组件实战总结 fileinput是一个增强的基于Bootstrap3.x和HTML5的文件上传工具,具备多种格式文件的预览功能, 另外,它包含了基于AJAX的上传,拖拽和撤销文件,可 ...
- 拖拽系列一、JavaScript实现简单的拖拽效果
前端拖拽相关应用汇总 在现实生活中就像男孩子牵着(拖着)女朋友的手穿过马路:从马路的一端走到另一端这种场景很常见: 而在前端开发中拖拽效果也算是前端开发中应用最常见.最普遍的特效:其拖拽涉及知 ...
- VopSdk一个高逼格微信公众号开发SDK：自动化生产（装逼模式开启）
VopSdk一个高逼格微信公众号开发SDK(源码下载) VopSdk一个高逼格微信公众号开发SDK:自动化生产(装逼模式开启) 针对第一版,我们搞了第二版本,老规矩先定个目标. 一 我们的目标 a.移 ...
- Spring事务处理
事务(Transaction)是并发控制的单位,是用户定义的一个操作序列.这些操作要么都做,要么都不做,是一个不可分割的工作单位. 数据库向用户提供保存当前程序状态的方法,叫事务提交(commit): ...
- Java7中的ForkJoin并发框架初探（下）—— ForkJoin的应用
前两篇文章已经对Fork Join的设计和JDK中源码的简要分析.这篇文章,我们来简单地看看我们在开发中怎么对JDK提供的工具类进行应用,以提高我们的需求处理效率. Fork Join这东西确实用好了 ...
- ImageIO.write不好用了
今天奇怪的发现这个下面不好使了,即用ImageIO把图片写入网络流中,第一次还好使,对于同一个SocketOutputStream,第二次使用write方法就不好使了,变成了死等. 网上搜了资料搜不到 ...
- HTML5 02. 多媒体控件、拖拽事件、历史记录、web存储、应用程序缓存、地理定位、网络状态
多媒体 video:是行内块(text-align: center; 对行内块适用) <figure></figure>: 多媒体标签 : <figcaption> ...
- 超声波 HC-SR04
三.实验原理 1. 超声波传感器简介 超声波测距系统主要应用于汽车的倒车雷达.及机器人自动避障行走.建筑施工工地以及一些工业现场例如:液位.井深.管道长度等场合.超声波是一种在弹性介质中的机械振荡,有 ...
- 【PHP】PHP从入门到精通（一）——想学习PHP的小伙伴的福利来了！
PHP从精通到入门 (一)PHP简介和基本知识 PHP(外文名:PHP: Hypertext Preprocessor,中文名:"超文本预处理器")是一种通用开源脚本语言.语法吸 ...