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都是事件的名字.响应 ...
随机推荐
- NodeJS+Express+MongoDB 简单实现数据录入及回显展示【适合新人刚接触学习】
近期在看NodeJS相关 不得不说NodeJS+Express 进行网站开发是很不错,对于喜欢玩JS的来说真是很好的一种Web开发组合 在接触NodeJS时受平时Java或者C#中API接口等开发的思 ...
- 简单五子棋,没有电脑AI
刚学了C#委托,做了个五子棋练习,把前台绘制和后台逻辑分开,前台绘制方法用委托传给后台逻辑. 界面好简单... 先看类图 控制类控制整个游戏的逻辑,包括调用棋盘类的属性初始化棋盘.初始化两个棋手.轮流 ...
- HttpClient和 HtmlParser实现爬虫
网络爬虫技术 1 什么叫网络爬虫 网络爬虫(又被称为网页蜘蛛,网络机器人,在FOAF社区中间,更经常的称为网页追逐者),是一种按照一定的规则,自动地抓取万维网信息的程序或者脚本.另外一些不 ...
- canvas-弧形可拖动进度条
一.效果如下: See the Pen XRmNRK by pangyongsheng (@pangyongsheng) on CodePen. 链接dome 二. 本文是实现可拖动滑块实现的基本,及 ...
- chkconfig命令(管理开机自启)
提供了一个简单的命令行工具来维护/etc/rc[0-6].d目录层次结构通过减轻系统管理员的直接操作任务,在这些目录中的许多符号链接.仅是简单的改变了符号链接,而非立即启动或禁止一个服务. 语法: c ...
- 关于SqlServer远程跨库修改数据
今天遇到一个需求需要修改远程服务器上的数据,如何直接修改,并且垮库,跨库简单,直接加上数据库名字,远程的话则需要创建链接服务器,具体步骤如下: --创建链接服务器 exec sp_addlinked ...
- hdu 4552 怪盗基德的挑战书
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4552 思路: 其实可以用KMP+DP解决 我这里给出后缀数组的解题方法 思路: 初始化ans=n(n为 ...
- linux系统管理--查看进程
关于进程的查看,大家都不会陌生 ,主要是ps和pstree命令. ps aux 查看系统中所有进程,使用BSD操作系统格式.(注意:不是ps -aux) 执行结果 USER :该进程是由哪个用 ...
- java关键字transient与volatile小结
本文转自:http://heaven-arch.iteye.com/blog/1160693 transient和volatile两个关键字一个用于对象序列化,一个用于线程同步,都是Java中比较高阶 ...
- struts2.1.6教程八、验证机制
注意:要想实现校验,action必须继承自ActionSupport类. 1.基于手工编码的校验 我们建立struts2validate项目 ,其中reg.jsp页面主要代码如下: <body& ...