js--事件对象的理解2
实例1：一串跟着鼠标飞舞的div
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
div {width:10px; height:10px; background:red; position:absolute;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>一串跟着鼠标飞舞的div </title>
<script>
window.onload=function ()
{
var aDiv=document.getElementsByTagName('div');
var i=0;
document.onmousemove=function (ev) //事件处理函数
{
var oEvent=ev||event; //兼容浏览器的事件对象的写法，event是IE的写法，火狐下 事件处理函数是可以有参数的。 || 若两边都为真，则出第一个；若一真一假，则输出假 for(i=aDiv.length-1;i>0;i--)
{
aDiv[i].style.left=aDiv[i-1].style.left;
aDiv[i].style.top=aDiv[i-1].style.top;
} aDiv[0].style.left=oEvent.clientX+'px'; //clientX 为浏览器的可视区坐标
aDiv[0].style.top=oEvent.clientY+'px';
};
};
</script>
</head> <body>
<div></div>
<div></div>
<div></div> <!--------------此处省略很多div-------->
</body>
</html>
2.document是<!DOCTYPE 和html标签的父级
3.阻止事件冒泡：cancelBubble用于ie的阻止冒泡事件，event.stopPropagation（）用于firefox和chrome等其他浏览器 。需要启用能力检测。
//该函数的功能用来阻止冒泡，并兼容浏览器
function stopBubble(e){
if(e){
e.stopPropagation(); //因此他支持WW3C的stopPropagation()方法
}
else{
//否则，我们得使用IE的方式来取消事件冒泡
window.event.cancelBubble=true;
}
}
js--事件对象的理解2的更多相关文章
- JavaScript学习06 JS事件对象
JavaScript学习06 JS事件对象 事件对象:当事件发生时,浏览器自动建立该对象,并包含该事件的类型.鼠标坐标等. 事件对象的属性:格式:event.属性. 一些说明: event代表事件的状 ...
- JS事件对象,筋斗云导航练习,跟随鼠标练习,放大镜练习,进度条练习
JS事件对象,筋斗云导航练习,跟随鼠标练习,放大镜练习,进度条练习 btn.onclick = function(event) { 语句 } 其中event就是事件对象,在这个方法中指向的对象是onc ...
- JS—事件对象
在触发DOM上的某个事件时,会产生一个事件对象event.这个对象中包含着所有与事件有关的信息.包括导致事件的元素,事件的类型以及其他与特定事件相关的信息. 举例鼠标操作导致的事件对象中,会包含鼠标位 ...
- JS事件对象与事件委托
事件对象 包含事件相关的信息,如鼠标.时间.触发的DOM对象等 js默认将事件对象封装好,并自动的以参数的形式,传递给事件处理函数的第1个参数,如下: document.getElementsByTa ...
- JS 事件对象和事件冒泡
1.事件对象 js的事件对象中保存了当前被触发事件的一些相关的属性信息,如事件源.事件发生时的鼠标位置.事件按键等. 事件对象的获取方法: IE中可以window.event直接获取,而Firefox ...
- JS:事件对象1
一,this关键字和上下文 var box = document.getElementById("box");. 普通的函数如果没有给他传递参数,函数本身是没有参数的. test( ...
- js事件对象--DOM中的事件对象/IE中的事件对象/跨浏览器的事件对象
事件对象 在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的信息.包括导致事件的元素.事件的类型,以及其他与特定事件相关的信息.例如,鼠标操作导致的事件对 ...
- js事件对象
哎,事件也有对象呦.程序员一直在讲对象对象,那么,过年是不是该带个对象回家呢?好了,既然事件有对象,承认这个事实吧!哈哈,那么,其就有属性,接下来,就放个 例子来讲讲,顺便把常用的属性也添加进去.. ...
- js 事件对象
/* 事件绑定的格式: 元素节点.on + 事件类型 = function(){ } 元素节点 事件类型 on+事件类型:事件处理函数 [注]上述三者一绑定:生成一个新的事件对象. [注]触发事件以后 ...
- js 事件对象event
在触发DOM上的某个事件时,会产生一个事件对象event.这个对象中包含着所有与事件有关的信息.包括导致事件的元素,事件的类型以及其他与特定事件相关的信息. <body> <a hr ...
随机推荐
- redhat7.3配置163 yum源
redhat 的更新包只对注册的用户生效,所以我们需要自己手动更改成CentOS 的更新包,CentOS几乎和redhat是一样的,所以无需担心软件包是否可安装,安装之后是否有问题. 1.首先删除re ...
- VirtualBox 主机与虚拟机互通
文章转载:http://www.cnblogs.com/HD/p/4011323.html 网络要设置才能互通 注意:不启动Linux系统的时候,设置网络 使用VirtualBox的主机与虚拟机相互通 ...
- 转载--初识绘图工具plantUML
原文出处:http://www.jianshu.com/p/e92a52770832 什么是 PlantUML PlantUML 是一个画图脚本语言,用它可以快速地画出: 时序图 流程图 用例图 状态 ...
- 最近用到mysql和mybatis结合常用的知识点坐下整理
1.当用到集合in(x,x...)参数可以单个或者多个 ,当为单个时: findbyIds(List<Long> ids),或者findByids(Long [] ids) <se ...
- linux看代码方法和建议
http://blog.csdn.net/lxl584685501/article/details/46803077
- JS 获取网页的宽高
网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网页可见区域宽: document.body.offsetWi ...
- iOS正则表达
问题引入 1.要验证用户输入的密码长度是否满足6~18位的长度 ^.{6,18}$ 2.固定电话都是0区号-八位数字的格式,那么正则表达式的匹配如下 ^0\\d{2}\-?\\d{8}$ 3.对于密码 ...
- UIKit
UIAlertView UIAlertView 调用创建好对象的[testObject show]的show方法即可弹出UIAlertView UILabel UILabel常见属性 text:显示文 ...
- IntelliJ Idea 14 安装 Golang 插件 google-go-lang-idea-plugin 的方法
IDEA 的编辑器都很强悍,所以现在学Go 也想用他啊,无奈这个插件搞了好久,整理了下流程记录下 1. 当然是下载 IDEA 编辑器了 http://www.jetbrains.com/idea/do ...
- excel 导入 与 导出
Excel导入 public ActionResult Excel(HttpPostedFileBase file) { HttpPostedFileBase fi ...