实例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的更多相关文章

  1. JavaScript学习06 JS事件对象

    JavaScript学习06 JS事件对象 事件对象:当事件发生时,浏览器自动建立该对象,并包含该事件的类型.鼠标坐标等. 事件对象的属性:格式:event.属性. 一些说明: event代表事件的状 ...

  2. JS事件对象,筋斗云导航练习,跟随鼠标练习,放大镜练习,进度条练习

    JS事件对象,筋斗云导航练习,跟随鼠标练习,放大镜练习,进度条练习 btn.onclick = function(event) { 语句 } 其中event就是事件对象,在这个方法中指向的对象是onc ...

  3. JS—事件对象

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

  4. JS事件对象与事件委托

    事件对象 包含事件相关的信息,如鼠标.时间.触发的DOM对象等 js默认将事件对象封装好,并自动的以参数的形式,传递给事件处理函数的第1个参数,如下: document.getElementsByTa ...

  5. JS 事件对象和事件冒泡

    1.事件对象 js的事件对象中保存了当前被触发事件的一些相关的属性信息,如事件源.事件发生时的鼠标位置.事件按键等. 事件对象的获取方法: IE中可以window.event直接获取,而Firefox ...

  6. JS:事件对象1

    一,this关键字和上下文 var box = document.getElementById("box");. 普通的函数如果没有给他传递参数,函数本身是没有参数的. test( ...

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

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

  8. js事件对象

    哎,事件也有对象呦.程序员一直在讲对象对象,那么,过年是不是该带个对象回家呢?好了,既然事件有对象,承认这个事实吧!哈哈,那么,其就有属性,接下来,就放个 例子来讲讲,顺便把常用的属性也添加进去.. ...

  9. js 事件对象

    /* 事件绑定的格式: 元素节点.on + 事件类型 = function(){ } 元素节点 事件类型 on+事件类型:事件处理函数 [注]上述三者一绑定:生成一个新的事件对象. [注]触发事件以后 ...

  10. js 事件对象event

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

随机推荐

  1. Oracle EBS中分类账和法人实体 的关系(有sql语句实例)

    Oracle EBS中分类账和法人实体 的关系(有sql语句实例) 2012-12-06 16:05 2822人阅读 评论(0) 收藏 举报  分类: Oracle EBS(12)  Oracle数据 ...

  2. Android便携式热点的开启状态检测和SSID的获取

    WIFI热点的开启状态和开启后的SSID如何获取呢? 打开WifiManager.java源码,可找到 getWifiApState() 方法,惊喜的发现直接调用这个方法就能获取到热点的状态,然而在调 ...

  3. [日记&做题记录]-Noip2016提高组复赛 倒数十天

    写这篇博客的时候有点激动 为了让自己不颓 还是写写日记 存存模板 Nov.8 2016 今天早上买了两个蛋挞 吃了一个 然后就做数论(前天晚上还是想放弃数论 但是昨天被数论虐了 woc noip模拟赛 ...

  4. [SQL基础教程] 4-4 事务

    [SQL基础教程] 4 数据更新 4-4 事务 事务 需要在同一处理单元中执行的一系列更新处理的集合 创建事务 事务开始语句; DML语句1; DML语句2; . . . 事务结束语句; 事务开始语句 ...

  5. Linux下gcc,g++,gdb,scon部分用法笔记

    1 Ubuntu下编译安装GCC-4.1.2 拷贝gcc-4.1.2.tar.bz2(我下载的压缩文件)到/usr/local/src 解压 新生成的gcc-4.1.2这个目录被称为源目录,用${sr ...

  6. asp.net mvc 上传附件验证

    1.使用验证特性 [RequiredCollection] public ICollection<IFormFile> Attachments { get; set; } 2.自定义验证特 ...

  7. Lua 数据类型和 Redis 数据类型之间转换

    当 Lua 通过 call() 或 pcall() 函数执行 Redis 命令的时候,命令的返回值会被转换成 Lua 数据结构. 同样地,当 Lua 脚本在 Redis 内置的解释器里运行时,Lua ...

  8. linux命令之crontab详解

    crontab命令: crontab -l : 显示定时任务列表 crontab -e: 编辑定时任务 crontab -r : 删除所有定时任务 基本格式 :  * * * * * command  ...

  9. 主题模型 利用gibbslda做数据集主题抽样

    电子科技大学电子商务实验室Kai Yip,欢迎同行指正,也欢迎互相指导,学习. 广告打完,进入正题. 关于程序运行结果的分析请参照我的另一篇博客:http://www.cnblogs.com/nlp- ...

  10. 绿色版的mysql安装配置方式

    解压下载好的压缩包 copy 一份my-default.ini改名字为my.ini为mysql的配置文件 打开my.ini 修改配置文件 默认的原版文件为 # For advice on how to ...