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 ...
随机推荐
- JavaScript星级评分
事件onmouseover <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...
- trie树模板（统计难题）
统计难题 Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 131070/65535 K (Java/Others)Total Submi ...
- Django 同步数据库命令syncdb,makemigrations,migrate
syncdb只支持新增模型到数据库中 2条命令 你将使用2条命令进行迁移和操纵数据库schema: migrate,用来使迁移生效,以及未生效时报告它们的状态. makemigrations,用来根据 ...
- IntelliJ IDEA中类似Eclipse自动补全变量名称和属性名称的快捷键
IntelliJ IDEA 默认快捷键模式下 自动补全变量名称 : Ctrl + Alt + v 自动补全属性名称 : Ctrl + Alt + f
- Python3 操作Excel--openpyxl
操作Excel文件建议使用openpyxl 兼容office2016 打开excel文件,获取工作表 import openpyxl wb=openpyxl.load_workbook('ttt.xl ...
- 解决了IE8不支持数组的indexOf方法
ie在过去给我们添了很多坑. if (!Array.prototype.indexOf) { Array.prototype.indexOf = function(elt /*, from*/ ) { ...
- 挖坑：CF712E
#include<cstdio> #include<cstring> #include<algorithm> #define maxn 1000005 using ...
- ArrayList、HashSet、HashTable、List、Dictionary的区别
在C#中,数组由于是固定长度的,所以常常不能满足我们开发的需求. 由于这种限制不方便,所以出现了ArrayList. ArrayList.List<T> ArrayList是可变长数组,你 ...
- SAP HANA 中的决策表（Decision Table）
http://scn.sap.com/community/developer-center/hana/blog/2013/01/11/what-can-you-do-with-decision-tab ...
- java操作mongodb——连接数据库
import com.mongodb.MongoClient; MongoClient mongoClient = new MongoClient(); 连接MongoDB实例,默认为localhos ...