实例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. 浅谈 Linux

          1969年,美国贝尔实验室的肯-汤普森在DEC PDP-7机器上开发出了UNIX系统.      1971年,肯-汤普森的同事丹尼斯-里奇发明了C语言:1973年,UNIX系统的绝大部分源 ...

  2. selenium自动化过程中遇到的小问题(未完待续)

    1.chrome浏览器调用不起来 代码没出错的情况下,检查下chrome浏览器的版本与chromedriver.exe的版本是否匹配;下面的表格是根据网上及官网整理的chromedriver与chro ...

  3. 【CSS学习笔记】CSS选择器

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...

  4. Java基础知识之文件操作

    流与文件的操作在编程中经常遇到,与C语言只有单一类型File*即可工作良好不同,Java拥有一个包含各种流类型的流家族,其数量超过60个!当然我们没必要去记住这60多个类或接口以及它们的层次结构,理解 ...

  5. git stash让bug来的更猛烈些吧

    git stash可以用来暂存当前正在进行的工作,比如想pull最新的代码,又不想加新commit, 或者有一个紧急的bug需要修复,但是这个bug又与你已经在做的工作(还没完成)有关联.这个时候有的 ...

  6. Spark编程模型及RDD操作

    转载自:http://blog.csdn.net/liuwenbo0920/article/details/45243775 1. Spark中的基本概念 在Spark中,有下面的基本概念.Appli ...

  7. linux shell脚本学习xargs命令使用详解

    作用是将参数列表转换成小块分段传递给其他命令,以避免参数列表过长的问题 xargs是给命令传递参数的一个过滤器,也是组合多个命令的一个工具.它把一个数据流分割为一些足够小的块,以方便过滤器和命令进行处 ...

  8. js的严格模式

    严格模式: 严格模式这下的主要区别如下: 严格模式下的好处:

  9. VS2012 此模板尝试加载组件程序集”NuGet.VisualStudio.interop,Version=1.0.0.0 的解决

    VS2012 此模板尝试加载组件程序集”NuGet.VisualStudio.interop,Version=1.0.0.0 的解决办法 2014 年 5 月 3 日作者:mingceng 阅读次数: ...

  10. 字符串---分割成数组(str_split ),算出一个字符串中出现最多的字符, 学校中最多的姓名

    split 分割separate分开 little 小的 echo '<meta http-equiv="Content-type" content="text/h ...