一. 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. (求助)对某一颜色，设置透明度 alpha 后，其他使用该颜色的地方 受到影响！！！！原因未知

    对某一颜色,设置透明度 alpha 后,其他使用该颜色的地方 受到影响!!!!原因未知,有谁碰到过这样的问题?????? 测试了以下三款手机,结果如下: 1.android 4.4.2: 不受影响 2 ...

  2. Jmeter接口测试---get和post及解决乱码问题

    Jmeter接口测试---get请求 1.创建一个线程组 测试计划---添加---Threads ---线程组 2.添加http请求,步骤如下图所示: 3.添加带有参数的get请求,如下图展示内容: ...

  3. python模块中的__all__属性

    转自:http://blog.csdn.net/sxingming/article/details/52903377 python模块中的__all__属性,可用于模块导入时限制,如:from mod ...

  4. 带有空格或tab的字符串的判断

    class test { public static void main(String[] args) { String a = " "; //带有空格的字符串 if ( a.is ...

  5. 携程transform放大效果

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. ThinkPHP---thinkphp完善站内信功能

    [一]收件箱 分析 控制器:EmailController.class.php 方法:recBox(全称receive box收件箱) 模板文件:recBox.html 分步操作: 第一步:创建方法r ...

  7. JAVA学习笔记16——线程生命周期

    当线程被创建并启动以后,它既不是一启动就进入了执行状态,也不是一直处于执行状态,在线程的生命周期中,它要经过新建(New).就绪(Runnable).运行(Running).阻塞(Blocking)和 ...

  8. springmvc学习及源码地址

    http://jinnianshilongnian.iteye.com/blog/1634096

  9. LeetCode_16 3SumCloest

    3Sum Closest Given an array nums of n integers and an integer target, find three integers in nums su ...

  10. 诊断：ORA-01919: role ‘PLUSTRACE’ does not exist

    如下错误 SQL> grant plustrace to scott; grant plustrace to scott * ERROR at line 1: ORA-01919: role ' ...