DOM中的事件对象(event)
在触发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)的更多相关文章
- DOM中的事件对象
三.事件对象事件对象event1.DOM中的事件对象(1).type:获取事件类型(2).target:事件目标(3).stopPropagation() 阻止事件冒泡(4).preventDefau ...
- js事件对象--DOM中的事件对象/IE中的事件对象/跨浏览器的事件对象
事件对象 在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的信息.包括导致事件的元素.事件的类型,以及其他与特定事件相关的信息.例如,鼠标操作导致的事件对 ...
- DOM中的事件对象和IE事件对象
DOM中的事件对象 IE事件对象 属性/方法 类型 读/写 说明 属性/方法 类型 读/写 说明 bubles Boolean 只读 表明事件是否冒泡 cancleBubble Boolean ...
- javaScript中的事件对象event
事件对象event,每当一个事件被触发的时候,就会随之产恒一个事件对象event,该对象中主要包括了关于该事件的基本属性,事件类型type(click.dbclick等值).目标元素target(我的 ...
- javaScript中的事件对象event是怎样
事件对象event,每当一个事件被触发的时候,就会随之产恒一个事件对象event,该对象中主要包含了关于该事件的基本属性,事件类型type(click.dbclick等值).目标元素target(我的 ...
- DOM和IE中的 事件对象
DOM中的事件对象:(符合W3C标准) preventDefault() 取消事件默认行为 stopImmediatePropagation() 取消事件冒泡同时阻止当前节点 ...
- JavaScript中的事件对象
JavaScript中的事件对象 JavaScript中的事件对象是非常重要的,恐怕是我们在项目中使用的最多的了.在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含这所有与事件有 ...
- IE中的事件对象
IE中的事件对象 1)type属性 用于获取事件类型 2)srcElement属性 用于获取事件的目标 3)cancelBubble属性 用于阻止事件冒泡 设置为true表示阻止事件冒泡 设置为fa ...
- 谈谈事件对象-event
JavaScript 中的事件对象(event) 当我们每次触发一种事件(如点击事件),我们会在回调函数中传入事件对象event.今天就来来谈谈. 1.当我们想判断当前事件是我们想要的事件类型时,可以 ...
随机推荐
- 46个Linux面试常见问题送给你
问题一: 绝对路径用什么符号表示?当前目录.上层目录用什么表示?主目录用什么表示? 切换目录用什么命令? 答案:绝对路径: 如/etc/init.d当前目录和上层目录: ./ ../主目录: ~/切 ...
- TP5 路由使用
这里可以直接从第四条开始看 原文http://www.upwqy.com/details/12.html 1 文档链接 tp5路由官方文档 https://www.kancloud.cn/manua ...
- 智能合约语言 Solidity 教程系列8 - Solidity API
这是Solidity教程系列文章第8篇介绍Solidity API,它们主要表现为内置的特殊的变量及函数,存在于全局命名空间里. 写在前面 Solidity 是以太坊智能合约编程语言,阅读本文前,你应 ...
- 微信小程序-布局
flex-direction 传送门 border 传送门 边框 粗细:thin(细线).medium(中粗线)和thick(粗线) 类型:九个确定值:none(无边框线). dotted(由点组成的 ...
- 腾讯企业邮箱又一次隐藏了qq邮件列表的入口
今天登陆腾讯企业邮箱,发现腾讯企业邮箱又一次隐藏了qq邮件列表的入口,很不方便操作, 我们切换到工具箱选项,然后随便点击里面的一个工具,比如:企业网盘,然后看浏览器地址栏的地址如下:http://ex ...
- 《深入理解Bootstrap》读书笔记(二)
列表 1.普通列表 普通列表的使用没有什么变化,只是在原本的基础上对margin和行间距做了一些调整. 2.有序列表 有序列表的使用也是没有什么变化,只是在原本的基础上对margin和行间距做了一些调 ...
- Eclipse中JRE(unbound)问题的一种解决方法
(如果有写的不对的地方,欢迎指正!) 1.检查Java环境变量配置是否有问题 jdk1.8环境变量配置(1.8和8是一个意思) jdk9环境变量配置 注:配置不成功的一种可能是安装多个jdk,解决方法 ...
- Python3数据库模块(sqlite3,SQLite3)
一.sqlite命令 创建数据库:在控制台sqlite3 name .databases 查看数据库 .tables 查看表格名 databaseName .dump & ...
- python import自定义模块方法
转自:http://www.cnitblog.com/seeyeah/archive/2009/03/15/55440.html python包含子目录中的模块方法比较简单,关键是能够在sys.pat ...
- 手把手的SpringBoot教程,SpringBoot创建web项目(五)
这一节,我们来演示如何在SpringBoot项目中连接数据库,并且自动创建一张表. 按照惯例,数据库我们依然使用mysql,至于什么是jpa呢? jpa是sun推出的持久化规范(java persis ...