在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件相关的信息。

包括导致事件的元素、事件的类型以及其他与特定事件相关的信息。

例如:鼠标操作导致的事件对象中,会包含鼠标位置的信息,而键盘操作导致的事件对象中,会包含与按下的键有关的信息。

所以浏览器都支持event对象,但支持方式不同。

        btn_event.onclick = function (event) {
alert(event.type);//"click"
}; btn_event.addEventListener("click", function (event) {
alert(event.type);//"click"
}, false);
当一个函数要处理多个事件时,则可以使用type属性:
      //当一个函数要处理多个事件时,则可以使用type属性。

        var hanler_type = function (event)
{
switch (event.type) {
case "click":
{
alert("click");
break;
};
case "mouseover":
{
event.target.style.backgroundColor = "Red";
break;
};
case "mouseout":
{
event.target.style.backgroundColor = "Blue";
break;
};
};
}; btn_event.onclick = hanler_type;
btn_event.onmouseover = hanler_type;
btn_event.onmouseout = hanler_type;

上面代码效果图:

DOM中的事件对象(event)的更多相关文章

  1. DOM中的事件对象

    三.事件对象事件对象event1.DOM中的事件对象(1).type:获取事件类型(2).target:事件目标(3).stopPropagation() 阻止事件冒泡(4).preventDefau ...

  2. js事件对象--DOM中的事件对象/IE中的事件对象/跨浏览器的事件对象

    事件对象    在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的信息.包括导致事件的元素.事件的类型,以及其他与特定事件相关的信息.例如,鼠标操作导致的事件对 ...

  3. DOM中的事件对象和IE事件对象

    DOM中的事件对象 IE事件对象 属性/方法 类型 读/写 说明 属性/方法 类型 读/写 说明  bubles Boolean 只读  表明事件是否冒泡  cancleBubble Boolean ...

  4. javaScript中的事件对象event

    事件对象event,每当一个事件被触发的时候,就会随之产恒一个事件对象event,该对象中主要包括了关于该事件的基本属性,事件类型type(click.dbclick等值).目标元素target(我的 ...

  5. javaScript中的事件对象event是怎样

    事件对象event,每当一个事件被触发的时候,就会随之产恒一个事件对象event,该对象中主要包含了关于该事件的基本属性,事件类型type(click.dbclick等值).目标元素target(我的 ...

  6. DOM和IE中的 事件对象

    DOM中的事件对象:(符合W3C标准)    preventDefault()        取消事件默认行为    stopImmediatePropagation() 取消事件冒泡同时阻止当前节点 ...

  7. JavaScript中的事件对象

    JavaScript中的事件对象 JavaScript中的事件对象是非常重要的,恐怕是我们在项目中使用的最多的了.在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含这所有与事件有 ...

  8. IE中的事件对象

    IE中的事件对象 1)type属性 用于获取事件类型 2)srcElement属性 用于获取事件的目标 3)cancelBubble属性 用于阻止事件冒泡 设置为true表示阻止事件冒泡  设置为fa ...

  9. 谈谈事件对象-event

    JavaScript 中的事件对象(event) 当我们每次触发一种事件(如点击事件),我们会在回调函数中传入事件对象event.今天就来来谈谈. 1.当我们想判断当前事件是我们想要的事件类型时,可以 ...

随机推荐

  1. [BZOJ1601] [Usaco2008 Oct] 灌水 (kruskal)

    Description Farmer John已经决定把水灌到他的n(1<=n<=300)块农田,农田被数字1到n标记.把一块土地进行灌水有两种方法,从其他农田饮水,或者这块土地建造水库. ...

  2. 链接生成二维码-PHP

    原文:http://www.upwqy.com/details/20.html 链接生成二维码 首先下载phpqrcode phpqrcode.zip 我这里使用的是TP5,把下载好的类库 放入到ex ...

  3. 关系型数据库工作原理-查询优化器之数据访问方式(翻译自Coding-Geek文章)

    本文翻译自Coding-Geek文章:< How does a relational database work>.原文链接:http://coding-geek.com/how-data ...

  4. Spring Boot初探之log4j2配置

    一.背景 下面讲在使用Spring Boot搭建微服务框架时如何配置log4j2,通过log4j2输出系统中日志信息. 二.添加log4j2的配置文件 在项目的src/main/rescources目 ...

  5. mvc-dispatchar-servlet.xml文件报错

    <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...

  6. Redis持久化方案

    Redis可以实现数据的持久化存储,即将数据保存到磁盘上. Redis的持久化存储提供两种方式:RDB与AOF.RDB是默认配置.AOF需要手动开启. 默认redis是会以快照的形式将数据持久化到磁盘 ...

  7. 【前端单元测试入门01】Mocha与chai

    Mocha 的简介 Mocha是流行的JavaScript测试框架之一,通过它添加和运行测试,从而保证代码质量 Mocha 的安装与配置 全局安装Mocha npm install -g mocha ...

  8. IIS前端页面不显示详细错误解决方法

    要想解决这个问题,有三种方法可以考虑: 1.Internet信息服务(IIS)管理器 2.Web.config文件 3. 命令行 在IIS的"错误页"右边的"编辑功能设置 ...

  9. 金三银四跳槽季,BAT美团滴滴java面试大纲(带答案版)之一:Java基础篇

    Java基础篇: 题记:本系列文章,会尽量模拟面试现场对话情景, 用口语而非书面语 ,采用问答形式来展现.另外每一个问题都附上“延伸”,这部分内容是帮助小伙伴们更深的理解一些底层细节的补充,在面试中可 ...

  10. Mycat 分片规则详解--取模范围分片

    实现方式:该算法先进行取模,然后根据取模值所属范围进行分片 优点:可以自主决定取模后数据的节点分布 缺点:dataNode 划分节点是事先建好的,需要扩展时比较麻烦. 配置示例: <tableR ...