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 ...
随机推荐
- 使用spring-data-mongodb操作mongodb
mongodb.xml <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="h ...
- 使用 cnpm 加速 npm
npm 默认是从国外的源获取和下载包信息, 不慢才奇怪. 可以通过简单的 ---registry 参数, 使用国内的镜像 https://registry.npm.taobao.org : $ npm ...
- CodeForces 632D Longest Subsequence
暴力. 虽然$a[i]$最大有${10^9}$,但是$m$最大只有${10^6}$,因此可以考虑暴力. 记$cnt[i]$表示数字$i$有$cnt[i]$个,记$p[i]$表示以$i$为倍数的情况下, ...
- SqlDataReader中的GetSqlValue（）方法
sdr.GetValue(0) "Title"sdr.GetValue(1)4sdr.GetValue(2)falsesdr.GetValue(3)0sdr.GetValue(4) ...
- dev gridcontrol 绑定int型及日期型的列默认当值为0时显示空白及格式化日期显示方式
xmlns:sys="clr-namespace:System;assembly=mscorlib" 如只显示日期的时间部分 <dxg:GridColumn Header=& ...
- 时间序列 预测分析 R语言
在对短期数据的预测分析中,我们经常用到时间序列中的指数平滑做数据预测,然后根据不同. 下面我们来看下具体的过程 x<-data.frame(rq=seq(as.Date('2016-11-15' ...
- 【原生js】原生js实现验证码短信发送倒计时
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 文档在线预览开源实现方案二：OpenOffice + pdf.js
文档在线预览的另一种实现方式采用的技术栈是OpenOffice + pdf.js, office文档转换为pdf的工作依然由OpenOffice的服务来完成,pdf生成后我们不再将其转换为其他文件而是 ...
- 在server2012安装tfs遇到的问题：KB2919355
参考资料:http://blog.csdn.net/wo_984633714/article/details/52869851 安装tfs2015的时候,提示需要安装KB2919355的更新.然后我就 ...
- Python快捷键
IDLE默认不能显示行号,使用ALT+G 跳到对应行号,在右下角有显示光标所在行.列. ALT+P 上一个历史输入内容. ALT+N 下一个历史输入内容. IDLE中按F5可以运行代码.