事件，就是预先设置好的一段代码，等到用户触发的时候执行。

一：常见的事件：

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事件与例子的更多相关文章

  1. JavaScript事件与例子（三）

    两个例子,好友选中效果和左侧右侧子菜单 一.好友选中效果 可以通过设置属性的方式判断当前是否被选中,也可以通过获取当前元素的颜色从而得知当前元素状态是否被选中,从而进行操作 1.通过设置属性的方式判断 ...

  2. 【移动端兼容问题研究】javascript事件机制详解（涉及移动兼容）

    前言 这篇博客有点长,如果你是高手请您读一读,能对其中的一些误点提出来,以免我误人子弟,并且帮助我提高 如果你是javascript菜鸟,建议您好好读一读,真的理解下来会有不一样的收获 在下才疏学浅, ...

  3. JavaScript事件详解-jQuery的事件实现（三）

    正文 本文所涉及到的jQuery版本是3.1.1,可以在压缩包中找到event模块.该篇算是阅读笔记,jQuery代码太长.... Dean Edward的addEvent.js 相对于zepto的e ...

  4. JavaScript事件详解-Zepto的事件实现（二）【新增fastclick阅读笔记】

    正文 作者打字速度实在不咋地,源码部分就用图片代替了,都是截图,本文讲解的Zepto版本是1.2.0,在该版本中的event模块与1.1.6基本一致.此文的fastclick理解上在看过博客园各个大神 ...

  5. JavaScript事件流原理解析

    一.为什么会有这一篇的文章 国庆前几天由于任务比较重,要赶在国庆前把一个进度的任务开发完成,所以也就有点赶,但是却遇到了一个比较奇怪的Bug,导致了任务比预计的延迟了几个小时,对此深表遗憾,所以利用国 ...

  6. Javascript事件模型系列（四）我所理解的javascript自定义事件

    被我拖延了将近一个月的javascript事件模型系列终于迎来了第四篇,也是我计划中的最后一篇,说来太惭愧了,本来计划一到两个星期写完的,谁知中间遇到了很多事情,公司的个人的,搞的自己心烦意乱浮躁了一 ...

  7. Javascript事件模型系列（一）事件及事件的三种模型

    一.开篇 在学习javascript之初,就在网上看过不少介绍javascript事件的文章,毕竟是js基础中的基础,文章零零散散有不少,但遗憾的是没有看到比较全面的系列文章.犹记得去年这个时候,参加 ...

  8. 【探讨】javascript事件机制底层实现原理

    前言 又到了扯淡时间了,我最近在思考javascript事件机制底层的实现,但是暂时没有勇气去看chrome源码,所以今天我来猜测一把 我们今天来猜一猜,探讨探讨,javascript底层事件机制是如 ...

  9. javaScript事件（二）事件处理程序

    一.事件 二.事件流 以上内容见:javaScript事件(一)事件流 三.事件处理程序 前面提到,事件是用户或浏览器自身执行的某种动作,如click,load和mouseover都是事件的名字.响应 ...

随机推荐

  1. MySQL注入与防御（排版清晰内容有条理）

    为何我要在题目中明确排版清晰以及内容有条理呢? 因为我在搜相关SQL注入的随笔博客的时候,看到好多好多都是页面超级混乱的.亲爱的园友们,日后不管写博客文章还是平时写的各类文章也要多个心眼,好好注意一下 ...

  2. javascript执行原理

    执行环境 当执行流执行到函数时会创建一个执行环境,这个执行环境包含了函数内部 语句可以访问的所有变量和函数,当代码执行完时,销毁执行环境.所以一般情 况下,局部变量在函数执行完时会被销毁. 作用域.调 ...

  3. 一起来学jquery!

    jquery学习之旅!(未完待续) ------------(一)jquery书写步骤 ------------(二)jquery事件与函数 ------------(三)jquery修改css属性 ...

  4. 关于使用命令添加jar进自己的pom文件中-maven项目添加jar包

    现在几乎开发项目都是使用的maven项目,但是有的时候可以使用比较偏门或者新的jar可能在网上搜不到在pom文件里的配置应该如何写,因此写下这篇博客. 比如我现在想加入的AAA.jar这个包 打开cm ...

  5. 学习笔记：JavaScript-进阶篇

    1.二维数组   二维数组的表示: myarray[ ][ ] var myarr=new Array();  //先声明一维 for(var i=0;i<2;i++){  //一维长度为2   ...

  6. JAVA 基础之Integer

    jdk1.5后增加了自动拆箱和自动装箱特性.java的八种 byte,short,int,long,float,double,char,boolean基本类型和各自对应的包装类型的相互转化. 装箱指的 ...

  7. 建造者(Builder)模式

    建造者模式是对象的创建模式.建造模式可以将一个产品的内部表象(internal representation)与产品的生产过程分割开来,从而可以使一个建造过程生成具有不同的内部表象的产品对象. 产品的 ...

  8. OutputStream类详解

    主要内容包括OutputStream及其部分子类,以分析源代码的方式学习.关心的问题包括:每个字节输出流的作用,各个流之间的主要区别,何时使用某个流,区分节点流和处理流,流的输出目标等问题. Outp ...

  9. 通过js给网页加上水印背景

    有些后端管理系统,因为业务逻辑的需要,需要加上水印,下面就是水印方法. function watermark(settings) { debugger; //默认设置 var defaultSetti ...

  10. jQuery插件ImgAreaSelect 实例讲解一（头像上传预览和裁剪功能）

    上一节随笔中,我们已经知道了关于jQuery插件ImgAreaSelect基本的知识:那么现在看一下实例: 首先,要知道我们应该实现什么功能? (1)图片能够实现上传预览功能 (2)拖拽裁剪图片,使其 ...