一、关于鼠标事件：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. 谈谈一些有趣的CSS题目（十五）-- 奇妙的 background-clip: text

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  2. Openstack Swift 原理、架构与 API 介绍

    OpenStack Swift 开源项目提供了弹性可伸缩.高可用的分布式对象存储服务,适合存储大规模非结构化数据.本文将深入介绍 Swift 的基本设计原理.对称式的系统架构和 RESTful API ...

  3. 『算法』Dinic求最大流

    作为一个[NOIP+,省选-]算法,这个算法真的很暴力.同样是最大流,跑得比EK不知快到哪里去了.首先是一个 广度优先搜索() { 按照可用路径上节点的访问顺序标号. 然后判断一下能否到汇点. 如果不 ...

  4. 使用fontawesome图标

     我每次找图标时都是在阿里的开源图标库中找的,但是使用起来不是很方便.而我发现了fontawesome之后,觉得实在不错,所以分享给大家.  这是一些参考的文档. fontawesome下载与使用介绍 ...

  5. 如何将网站升级为HTTPS协议？

    基本概念: HTTP: 是互联网上应用最为广泛的一种网络协议,是一个客户端和服务器端请求和应答的标准,用于从WWW服务器传输超文本到本地浏览器的传输协议,它可以使浏览器更加高效,使网络传输减少. HT ...

  6. 添加本地jar包到本地的Maven仓库以及在Maven仓库中搜索想要添加的jar包

    今天在学习Memacached的时候,将java_memcached-release下载下来,要使用maven来集成相关的jar包,Memcached的jar包如下: java_memcached-r ...

  7. Git总结笔记3-把本地仓库推送到github

    说明:此笔记在centos 7 上完成 1.配置公钥 [root@kangvcar ~]# ssh-keygen -t rsa -C "kangvcar@126.com" [roo ...

  8. Spring+SpringMVC+MyBatis深入学习及搭建(二)——MyBatis原始Dao开发和mapper代理开发

    转载请注明出处:http://www.cnblogs.com/Joanna-Yan/p/6869133.html 前面有写到Spring+SpringMVC+MyBatis深入学习及搭建(一)——My ...

  9. EM算法原理总结

    EM算法也称期望最大化(Expectation-Maximum,简称EM)算法,它是一个基础算法,是很多机器学习领域算法的基础,比如隐式马尔科夫算法(HMM), LDA主题模型的变分推断等等.本文就对 ...

  10. ArrayList源码解析（四）

    这篇文章主要看ArrayList的Iterator和ListIterator的实现. 1.Iterator和类Itr 当我们调用iterator方法时返回一个Iterator. /** * Retur ...