一、关于鼠标事件：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. windows下使用IIS的ARR实现站点的负载均衡

    1)    目的: 访问localhost:18066 对下边两个端口负载 localhost:18098 localhost:18099 2)    手段: 1.通过nginx 2.通过iis的AR ...

  2. 如何在Linux实现自动运行程序

    1.开机启动时 Linux加载后, 它将初始化硬件和设备驱动, 然后运行第一个进程init. init根据配置文件继续引导过程,启动其它进程.通常情况下,修改放置在 /etc/rc或 /etc/rc. ...

  3. linux优化之SElinux关闭

    查看selinux状态: # getenforce   注:Enforcing表示开启,Permissive表示禁用 临时关闭或开启selinux: # setenforce  [1|0]  注:1是 ...

  4. CentOS下的yum命令

    yum命令是rpm的一款前端工具,可以安装.更新.卸载rpm包,可以从指定服务器下下载rpm包并安装,可以自动解决依赖问题. 语法: yum [options] [command] [package ...

  5. php实现‘浏览记录’按日期分组

    出题:现有测试数据如下,要求实现如下图中的效果: array(4) { [0] => array(6) { ["visit_id"] => int(127) [&quo ...

  6. 智能指针剖析（下）boost::shared_ptr&其他

    1. boost::shared_ptr 前面我已经讲解了两个比较简单的智能指针,它们都有各自的优缺点.由于 boost::scoped_ptr 独享所有权,当我们真真需要复制智能指针时,需求便满足不 ...

  7. 一个基于thinkphp的微信授权登陆功能

    共享一份基于thinkphp开发的用户授权登陆的功能代码,本实例使用thinkphp的第三方微信公众平台PHP-SDK,地址https://github.com/dodgepudding/wechat ...

  8. 几张图带你轻轻松松了解小程序和APP的区别

    微信"小程序"的公测一开放,立即在朋友圈刷屏无数,仿佛人人都在互联网圈.但是因为微信限制,程序还不能发布使用,所以也极少人看到真正的小程序是怎么样的. 小程序驿站专注微信小程序的开 ...

  9. Ultimus BPM 制药与医疗行业应用解决方案

    Ultimus BPM 制药与医疗行业应用解决方案 行业应用需求 制药与医疗行业客户特点有企业总资产高.员工规模大,销售网络往往遍及全国,乃至全球市场:拥有复杂的制药生产或医疗服务组织机构,并均有严格 ...

  10. SSM框架中常用的注解

    @Controller:在SpringMVC 中,控制器Controller 负责处理由DispatcherServlet 分发的请求,它把用户请求的数据经过业务处理层处理之后封装成一个Model , ...