一、关于鼠标事件：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. shopping_cart

    #!/usr/bin/env python # -*- coding: utf-8 -*- print('欢迎土豪光临随心所欲旗舰店') user_money = int(input('老板,请输入你 ...

  2. Java AOP (2) runtime weaving 【Java 切面编程 (2) 运行时织入】

    接上一篇 Java AOP (1) compile time weaving [Java 切面编程 (1) 编译期织入] Dynamic proxy   动态代理 Befor talking abou ...

  3. [原创]普通的MySQL多表连接查询

  4. Python 基础之基本数据类型

    首先,Python中的变量不需要声明.每个变量在使用前都必须赋值,变量赋值以后该变量才会被创建.在Python中,变量就是变量,它没有类型,我们所说的"类型"是变量所指的内存中对象 ...

  5. 栈的Java简单实现

    关于栈 栈(Stack)是限定只能在一段进行插入和删除操作的线性表. 进行插入和删除操作的一端称为“栈顶”(top),另一端称为“栈底”(bottom). 栈的插入操作称为“入栈”(push),栈的删 ...

  6. Linux与堆栈概念

    在学习C/C++编程的时候,老师都会反复灌输一些概念.比如程序内变量在堆栈上的分配,栈是由高地址到低地址,堆是由低地址到高地址等等,然后画出这样一幅经典概念图: 图片来自:http://blog.cs ...

  7. 基于HTML5快速搭建TP-LINK电信拓扑设备面板

    今天我们以真实的TP-LINK设备面板为模型,完成设备面板的搭建,和指示灯的闪烁和图元流动. 先来目睹下最终的实现效果:http://www.hightopo.com/demo/blog_tplink ...

  8. AMD及requireJS

    前面的话 由CommonJS组织提出了许多新的JavaScript架构方案和标准,希望能为前端开发提供统一的指引.AMD规范就是其中比较著名一个,全称是Asynchronous Module Defi ...

  9. PHP 底层的运行机制与原理 --转

    发现一片总结的还不错的文章,记录一下 PHP说简单,但是要精通也不是一件简单的事.我们除了会使用之外,还得知道它底层的工作原理. PHP是一种适用于web开发的动态语言.具体点说,就是一个用C语言实现 ...

  10. 【JavaScript你需要知道的基础知识~】

    最近开始学习JavaScript,整理了一些相关的基础知识 JS注释方式:// 单行注释(Ctrl+/ )/* 段落注释(Ctrl+shift+/ )*/ [JavaScript基础]JavaScri ...