一、关于鼠标事件：onclick：鼠标单击触发

ondbclick:鼠标双击触发

onmouseover：鼠标移上触发

onmouseout：鼠标离开触发

onmousemove：鼠标移动触发

二、关于键盘事件：onkeydown：键盘按下瞬间触发

onkeyup：按键抬起触发

onkeypress：按键触发

三、关于表单事件：onfocus获得焦点时触发

onblur：失去焦点时触发

onchange：内容改变时触发在下拉列表中作为选中值变化触发

事件可以写在标签中也可写在js中

eg：var a=document.getElementById("anniu");

a.onclick=function(){

匿名函数

}；在js中不支持给多个元素加事件

this代表该元素本身

例子：注意：backgroundColor中的color首字母不大写，无法实现

<!--选中一个背景颜色变，其他不变-->

<div id="a">

<div class="item" onclick="sel(this)"></div>

<div class="item" onclick="sel(this)"></div>

<div class="item" onclick="sel(this)"></div>

<div class="item" onclick="sel(this)"></div>

<div class="item" onclick="sel(this)"></div>

<div class="item" onclick="sel(this)"></div>

<div class="item" onclick="sel(this)"></div>

</div>

</body>

<script type="text/javascript">

function sel(a){

    var sy=document.getElementsByClassName("item");

    for(var i=;i<sy.length;i++){

        sy[i].style.backgroundColor="blue";

        }

        a.style.backgroundColor="red";

    }

</script>

<style type="text/css">

*{ margin:0px auto;

padding:0px;}

#aa{

    width:280px;

    height:40px;

    border:1px solid #C33;

    margin-top:100px;

    line-height:40px;

    vertical-align:central;

    padding-left:20px;

    }

#bb{

    width:300px;

    height:200px;

    border:1px solid #C33;

    }

.list{

    width:280px;

    height:39px;

    border-bottom:1px solid #C33;

    line-height:40px;

    vertical-align:central;

    padding-left:20px;

    }

</style>

</head>

<body>

<div id="aa" ></div>

<div id="bb" style="display:none">

<div class="list" onmouseover="xz(this)" onclick="sel(this)" >济南</div>

<div class="list" onmouseover="xz(this)" onclick="sel(this)">淄博</div>

<div class="list" onmouseover="xz(this)" onclick="sel(this)">青岛</div>

<div class="list" onmouseover="xz(this)" onclick="sel(this)">潍坊</div>

<div class="list" onmouseover="xz(this)" onclick="sel(this)">烟台</div>

</div>

</body>

<script type="text/javascript">

function xz(a){

    var sy=document.getElementsByClassName("list");

    for(var i=;i<sy.length;i++){

        sy[i].style.backgroundColor="white";

        sy[i].style.color="black";

        }

    a.style.backgroundColor="blue";

    a.style.color="white";

    }

    var aa=document.getElementById("aa");

    aa.onclick=function (){

        var c=document.getElementById("bb");

        if(c.style.display=="none"){

            c.style.display="block";

            }else{c.style.display="block";

            }

        }

    function sel(a){

        document.getElementById("bb").style.display="none";

        document.getElementById("aa").innerText=a.innerText;

        }

</script>

document事件及例子的更多相关文章

  1. jQuery监听事件经典例子

    关键字:jQuery监听事件经典例子  js代码:  ============================================================  $(function( ...

  2. HTML 事件的例子：

    HTML 事件的例子: 当用户点击鼠标时 当网页已加载时 当图像已加载时 当鼠标移动到元素上时 当输入字段被改变时 当提交 HTML 表单时 当用户触发按键时

  3. iso不支持document事件

    ios safari游览器除了a.input.button等不支持document事件委托?<body>加上这个样式即可 <style> .clickable-div { cu ...

  4. JavaScript事件与例子

    事件,就是预先设置好的一段代码,等到用户触发的时候执行. 一:常见的事件: 1.关于鼠标的事件 onclick 鼠标单击触发 ondblclick 鼠标双击触发 onmouseover 鼠标移上触发 ...

  5. JavaScript事件与例子（三）

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

  6. 关于js键盘事件的例子

    JavaScript onkeydown 事件 用户按下一个键盘按键时会触发 onkeydown 事件.与 onkeypress事件不同的是,onkeydown 事件是响应任意键按下的处理(包括功能键 ...

  7. iPhone safari中Document事件不触发的解决方案 [冒泡]

    写了一个下拉菜单,在单击空白地方的时候隐藏. 第一时间就是用$(document).click(function(){   //隐藏代码  }); 各大浏览器都没问题,唯独iPhone上的不会触发事件 ...

  8. js 事件捕获与事件冒泡例子

    http://codepen.io/huashiyiqike/pen/qZVdag addEventListener 默认是冒泡阶段执行,也就是父亲与子都监听时,点击子,子先处理,父亲再处理,这时加s ...

  9. 初学java之触发响应事件举例子

    设置一个触发响应事件? 比如消息框..... package hello; import javax.swing.*; import project.readerListen; import java ...

随机推荐

  1. [周译见] C# 7 中的模范和实践

    原文地址:https://www.infoq.com/articles/Patterns-Practices-CSharp-7 关键点 遵循 .NET Framework 设计指南,时至今日,仍像十年 ...

  2. linux 内核的futex

    futex是linux内核为用户空间实现锁等同步机制而设计的同步排队(队列queueing)服务.在futex.c的注释中,futex起源于"Fast Userspace Mutex&quo ...

  3. vue1.0和vue2.0的区别(二)

    这篇我们继续之前的vue1.0和vue2.0的区别(一)继续说 四.循环 学过vue的同学应该知道vue1.0是不能添加重复数据的,否则它会报错,想让它重复添加也不是不可以,不过需要定义别的东西 而v ...

  4. 微信小程序，前端大梦想（七）

    微信小程序之数据缓存实例-备忘录 数据缓存在移动端的使用是非常重要的,既可以减少用户的流量支出又可以提高程序的访问速度和用户体验.每个微信小程序都可以有自己的本地缓存,可以通过 wx.setStora ...

  5. 白话讲session

    什么是session Session一般译作会话,牛津词典对其的解释是进行某活动连续的一段时间.从不同的层面看待session,它有着类似但不全然相同的含义.比如,在web应用的用户看来,他打开浏览器 ...

  6. AngularJs之初

    很久以前就听人说起angularjs,但一直都没有深入了解过.直到最近才在自己心里有了一个准确的定义.和相濡以沫多年的函数库JQuery相比,angular更像一个框架.对,就是一个框架,相比之下的话 ...

  7. 从SonarQube谈设计模式

    SonarQube SonarQube是用来检测代码质量的,但类似工具的推广常常遇到阻碍. 成型项目或僵尸项目可以理解,项目优化需要投入的人力成本和时间成本太大,而且最主要的是无法保证改动过程中不引入 ...

  8. IIS的安装与设置（windows版本）

    IIS,全英文名称:Internet Information Services(互联网信息服务),是由微软公司提供的基于运行Microsoft Windows的互联网基本服务.IIS的功能很多,如编辑 ...

  9. cas4.2.7实现单点登录

    准备前参考: cas server下载地址 cas client 下载地址 安全cookie setSecure详解 Spring通过构造方法注入的四种方式 cas 学习博文 自定义登录页和登录认证 ...

  10. 为女票写的计算工作时间的SQL

    排除非工作时间.非工作日后,计算工作时间,代码如下: -- 删除函数 DROP FUNCTION IF EXISTS calculateWorkingTime; set @workStartTime= ...