一、关于鼠标事件：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. add,update,list.jsp源码

    add:<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncod ...

  2. Charles抓取https请求详解

    大家好,我是TT,互联网测试行业多年,没有牛逼的背景,也没有什么可炫耀的,唯独比他人更努力,在职场打拼.遇到过的坑,走过的弯路,愿意与大家分享,分享自己的经验,少走弯路.首发于个人公众号[测试架构师] ...

  3. 利用PHPExcel读取Excel的数据和导出数据到Excel

    PHPExcel是一个PHP类库,用来帮助我们简单.高效实现从Excel读取Excel的数据和导出数据到Excel.也是我们日常开发中,经常会遇到的使用场景.比如有个客户信息表,要批量导出发给同事,我 ...

  4. HDU4704Sum 费马小定理+大数取模

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=4704 题目大意: 看似复杂,其实就是求整数n的划分数,4=1+1+2和4=1+2+1是不同的.因而可 ...

  5. React入门---属性(state)-7

    state------>虚拟dom------>dom 这个过程是自动的,不需要触发其他事件来调用它. state中文理解:页面状态的的一个值,可以存储很多东西. 学习state的使用: ...

  6. smarty中的修饰函数

    smarty中的修饰函数: 对在模板文件中显示的数据变量进行二次修饰. 格式: {ts:变量|函数名:参数1:参数2:参数3...|函数名:参数1:参数2...} 常见的修饰函数: capitaliz ...

  7. eval全局作用域和局部作用域的坑！

    1.eval 是个函数,他可以被赋值给变量,例如   var evalg = eval;  evalg("alert(1)"); 2.eval被赋值时,也会把当前eval所处的变量 ...

  8. 【WPF MaterialDesign 示例开源项目】 Work Time Manager

    转岗写了将近一年的 PHP 最近因为 工作太多太杂, 在汇报工作的时候经常会忘记自己做了些什么,本来想只是使用excel来记录,但是发现了excel的很多局限性,光是无法共享就郁闷死了,习惯了下班不带 ...

  9. Nginx教程(二) Nginx虚拟主机配置

    Nginx教程(二) Nginx虚拟主机配置 1 虚拟主机管理 1.1 Nginx管理虚拟主机 虚拟主机使用的是特殊的软硬件技术,它把一台运行在因特网上的服务器主机分成一台台“虚拟”的主机,每台虚拟主 ...

  10. 关于laravel5.2仓库的建立，以及简单调用

    laravel个人比较喜欢,就是控制器里面逻辑代码的分离,这样结构很清晰,有利于后期的维护,现在就把平时工作中运用的仓库模式,分享一下,望指正. *************************** ...