一. 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. [转帖]关于flask-login中各种API使用实例

    原贴:http://www.cnblogs.com/alima/p/5796298.html 简介:简单的集成flask,WTForms,包括跨站请求伪造(CSRF),文件上传和验证码. 一.安装(I ...

  2. Android基础TOP7_1:ListView制作列表

    结构: Activity: activity_main: <RelativeLayout xmlns:android="http://schemas.android.com/apk/r ...

  3. 北大ACM(POJ1017-Packets)

    Question:http://poj.org/problem?id=1017 问题点:贪心. Memory: 224K Time: 32MS Language: C++ Result: Accept ...

  4. 服务器 获取用户 真实ip

    在有代理的情况下,因为要代替客户端去访问服务器,所以,当请求包经过反向代理后,在代理服务器这里这个IP数据包的IP包头做了修改,最终后端WEB服务器得到的数据包的头部源IP地址是代理服务器的IP地址. ...

  5. iOS APP EuclidStudy Service Support

    Hi,If you have any questions, you can send a message here or send them to us. We will answer you as ...

  6. struts2源码下载链接

    http://blog.csdn.net/qq_qun_247286682/article/details/6975298

  7. uint8_t、uint16_t、uint32_t是啥？

    最近在做一个简单的按键检测,定义一个uint8_t的函数,函数作用是返回一个按键编号数字. 函数返回值 return 1/2/3/4,代表4个按键 但是按键检测结果却是错误的!!! 百思不得其解,后来 ...

  8. java基础学习日志--String、StringBuffer方法案例

    package StringDemo; import java.util.Arrays; /* * 常用String.StringBufer类的方法 */ public class Demo1 { p ...

  9. 整理推荐比较好用的具有书签搜索功能的chrome插件

    平时在整理学习chrome插件的过程中,经常会去试用各种大家推荐的插件.在去年我们的一篇文章:推荐六款好用的书签收藏夹剪藏型管理插件.这里面介绍的是收藏书签的插件.而随着我们使用chrome越来越频繁 ...

  10. scrapy 按顺序抓取text内容

    需求:获得如下li.clearfix 下的所有text,并且按顺序输出 1. x.css('div.reply-doc h4 a::text').extract(); 2.  x.css('div.r ...