一. jQuery事件传播

在DOM2级事件模型中，一旦事件被触发。事件流首先从DOM树顶部（文档节点）向下传播。直到目标节点。然后再从目标节点向上传播到DOM树顶。从上到下的过程被称为捕获阶段。从下到上的过程被称为冒泡阶段。

利用循环体结构分别为button元素及其全部父级节点注冊一个捕获型鼠标单击类事件处理函数。

代码演示样例：

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>jQuery addEventListener demo</title>

</head>

<body>

	<input type="button" value="Event对象">

	<p>捕获型事件流传播过程：</p>

</body>

<script type="text/javascript" src="jquery-2.1.1.min.js"></script>

<script type="text/javascript" >

	window.onload = function(){

    	var btn = document.getElementsByTagName("input")[0];	//获取按钮

    	var p = document.getElementsByTagName("p")[0]; 	//p元素

    	var i = 1; 	//声明并初始化一个暂时变量

    	do{	//使用do循环结构逐层注冊鼠标单击事件

        	btn.addEventListener("click", function(){	//注冊鼠标单击事件

            	p.innerHTML += "<br />("  + i++ + ")  "  + this.nodeName;

    	},true); 	//动态跟踪当前响应节点的名称

        	btn = btn.parentNode; 	//訪问上一级父元素

    	} while(btn); 	//设置循环条件，假设存在父节点

	}

</script>

</html>

以下改动addEventListener()方法的第3个參数，设置參数值为false，即注冊事件为冒泡型处理程序。

<script type="text/javascript" >

    window.onload = function(){

        var btn = document.getElementsByTagName("input")[0];	//获取button

        var p = document.getElementsByTagName("p")[0]; 	//p元素

        var i = 1; 	//声明并初始化一个暂时变量

        do{	//使用do循环结构逐层注冊鼠标单击事件

            btn.addEventListener("click", function(){	//注冊鼠标单击事件

                p.innerHTML += "<br />("  + i++ + ")  "  + this.nodeName;

        },false); 	//动态跟踪当前响应节点的名称

                this.removeEventListener("click",arguments.callee,false);	//注销当前鼠标单击事件

            btn = btn.parentNode; 	//訪问上一级父元素

        } while(btn); 	//设置循环条件，假设存在父节点

    }

</script>

二. jQuery事件流

代码演示样例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>jQuery event flow demo</title>

</head>

    <body>

    <div>

        <div>

            <div>

                <div>

                    <div>冒泡型事件</div>

                </div>

            </div>

        </div>

    </div>

</body>

<script type="text/javascript" src="jquery-2.1.1.min.js"></script>

<script type="text/javascript" >

window.onload = function(){

    var div = document.getElementsByTagName('div');	//获取全部div元素

    for (var i = 0; i < div.length; ++i){	//遍历div元素

        div[i].onmouseover = (function(i){	//依次为每一个div元素注冊鼠标经过事件

            return function(){	//以闭包形式存储动态变量i的值。以便定位div

                div[i].style.borderColor = 'red';	//定义边框的颜色样式为红色

            }

        })(i);		//向闭包内传递变量i的值

    }

    for (var i = 0; i < div.length; ++i){ 	//遍历div元素

        div[i].onmouseout = (function(i){ 	//依次为每一个div元素注冊鼠标移出事件

            return function(){	//以闭包形式存储动态变量i的值，以便定位div

                div[i].style.borderColor = 'white'; 	//定义边框的颜色样式为白色

            }

        })(i); 		//向闭包内传递变量i的值

    }

}

</script>

<style type="text/css">

div {

    margin:12px 10px;

    border:solid 2px blue;

}

</style>

</html>

jQuery事件传播，事件流的更多相关文章

  1. [JS]笔记12之事件机制--事件冒泡和捕获--事件监听--阻止事件传播

    -->事件冒泡和捕获-->事件监听-->阻止事件传播 一.事件冒泡和捕获 1.概念:当给子元素和父元素定义了相同的事件,比如都定义了onclick事件,点击子元素时,父元素的oncl ...

  2. Atitit.  Js 冒泡事件阻止 事件捕获   事件传递  事件代理

    Atitit.  Js 冒泡事件阻止 事件捕获   事件传递  事件代理   1. 事件冒泡1 2. 事件捕获1 3. 同时支持了事件捕获阶段和事件冒泡阶段ddEventListener的第三个参数1 ...

  3. python 全栈开发，Day55(jQuery的位置信息,JS的事件流的概念(重点),事件对象,jQuery的事件绑定和解绑,事件委托(事件代理))

    一.jQuery的位置信息 jQuery的位置信息跟JS的client系列.offset系列.scroll系列封装好的一些简便api. 一.宽度和高度 获取宽度 .width() 描述:为匹配的元素集 ...

  4. HTML 事件(三) 事件流与事件委托

    本篇主要介绍HTML DOM中的事件流和事件委托. 其他事件文章 1. HTML 事件(一) 事件的介绍 2. HTML 事件(二) 事件的注册与注销 3. HTML 事件(三) 事件流与事件委托 4 ...

  5. 【jQuery】jQuery中的事件捕获与事件冒泡

    在介绍之前,先说一下JavaScript中的事件流概念.事件流描述的是从页面中接受事件的顺序.   一.事件冒泡( Event Bubbling)            IE 的事件流叫做事件冒泡,即 ...

  6. JQuery制作网页—— 第七章 jQuery中的事件与动画

    1. jQuery中的事件: ●和WinForm一样,在网页中的交互也是需要事件来实现的,例如tab切换效果,可以通过鼠标单击事件来实现 ●jQuery事件是对JavaScript事件的封装,常用事件 ...

  7. jQuery中的事件对象（八）

    Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态. 一.事件对象基本认识 1. 什么时候会产生Event 对象呢?  例如: 当用户单击某个元素的时 ...

  8. jQuery中的事件与动画 (你的明天Via Via)

    众所周知,页面在加载时,会触发load事件:当用户单击某个按钮时,会触发该按钮的click事件. 这些事件就像日常生活中,人们按下开关,灯就亮了(或者灭了),往游戏机里投入游戏币就可以启动游戏一样, ...

  9. jQuery代码优化：事件委托篇

    推荐阅读原文:http://www.ituring.com.cn/article/467# 推荐11收藏 随着DOM结构的复杂化和Ajax等动态脚本技术的运用,事件委托自然浮出了水面.jQuery为绑 ...

随机推荐

  1. Rxjava1升级Rxjava2踩坑一记

    Rxjava1升级Rxjava2坑 共存问题 通常情况下,如果我们希望在一个模块中既想使用rxjava1又想使用rxjava2,这个时候在运行的时候会出现一下报错: ... APK META/-INF ...

  2. 解决 HTTP Status 500 - Unable to show problem report: freemarker.core.InvalidReferenceException:

    HTTP Status 500 - Unable to show problem report: freemarker.core.InvalidReferenceException: The foll ...

  3. 创建密码带有特殊字符的dblink

    使用的是data studio,所以末尾不加分号 create database link link_to_143 connect " using '(DESCRIPTION = (ADDR ...

  4. Spring与Struts2集成开发

    Struts2和Spring都是不错的开源框架,Spring与Struts2集成开发,把二者结合在一起使用,开发效果更佳,效率杠杠的.下面介绍一下如何将Spring与Struts2集成在一起开发.分七 ...

  5. jsp学习笔记 - 内置对象 config

    1.将页面保存在 WEB-INF文件夹下是最安全的,一般不可见 可以通过映射路径来进行访问 2.通过config对象可以取得初始化的配置参数 String dbDriver = config.getI ...

  6. CPU位数、操作系统位数、机器字长、C/C++基本数据类型长度

    1.CPU位数=CPU中寄存器的位数=CPU能够一次并行处理的数据宽度(位数)=数据总线宽度: //现在的计算机处理器一般都是64位,这是硬件的事. 2.CPU为了实现其功能设计了指令集,即是CPU的 ...

  7. 并发编程学习笔记(3)----synchronized关键字以及单例模式与线程安全问题

    再说synchronized关键字之前,我们首先先小小的了解一个概念-内置锁. 什么是内置锁? 在java中,每个java对象都可以用作synchronized关键字的锁,这些锁就被称为内置锁,每个对 ...

  8. CAD设置系统变量（com接口VB语言）

    主要用到函数说明: MxDrawXCustomFunction::Mx_SetSysVar 设置系统变量.详细说明如下: 参数 说明 CString sVarName 系统变量名 Value 需要设置 ...

  9. linux 挂载数据盘

    完整的阿里云挂载数据盘方法如下: 1.入手阿里云后查看有几块硬盘:(只显示概况,不显示分区情况) fdisk -l|grep Disk 2.查看硬盘分区 fdisk -l 如果有提示:disk /de ...

  10. 【Redis】四、Redis设计原理及相关问题

    (六)Redis设计原理及相关问题   通过前面关于Redis五种数据类型.相关高级特性以及一些简单示例的使用,对Redis的使用和主要的用途应该有所掌握,但是还有一些原理性的问题我们在本部分做一个探 ...