一. 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. C语言调用Python

    python模块:demo.py def print_arg(str): print str def add(a,b): print 'a=', a print 'b=', b return a + ...

  2. webSql的简单小例子

    初始化websql数据库的参数信息 var config = { name: 'my_plan', version: '', desc: 'manage my plans', size: 20 * 1 ...

  3. C语言入门100题，考算法的居多

    入门题,考算法的居多,共同学习! 1. 编程,统计在所输入的50个实数中有多少个正数.多少个负数.多少个零. 2. 编程,计算并输出方程X2+Y2=1989的所有整数解. 3. 编程,输入一个10进制 ...

  4. apache启动失败提示预期<IfModule>结果<IfModule>>

    经过反复查看httpd.conf文件,发现原因是启动了两遍<IfModule>,也就是出现内容重复标签重复曾经遇到类似的情况Apache2: Expected </> but ...

  5. iOS App Crash原理分析

    预备知识:OS X系统分析 1.内核XNU是Darwin的核心,也是整个OS X的核心.XNU本身由以下几个组件构成: Mach微核心 BSD层 libKern I/O Kit 此外,内核是模块化的, ...

  6. pageHelper详解

    详见:https://github.com/pagehelper/Mybatis-PageHelper/edit/master/wikis/zh/HowToUse.md ## 使用方法 1. 引入分页 ...

  7. 实现加载页Loading Page 的几种方法

    网页也可以像原生应用那样加入进度条或者其他的loading效果带来更好的等待体验,这里归纳几种我收集的实现loading page的方法,这几种方法在交互上都有利有弊,适用于不同应用.(PS:以下方法 ...

  8. c# 常用 Common

    /// <summary> /// md5加密字符串 /// </summary> /// <param name="message">< ...

  9. KOA的简易模板引擎实现方式

    上上一期链接--也就是本文的基础,参考KOA,5步手写一款粗糙的web框架 上一期链接--有关Router的实现思路,这份Koa的简易Router手敲指南请收下 本文参考仓库:点我 上一期科普了Rou ...

  10. 爬虫实战(三) 用Python爬取拉勾网

    目录 0.前言 1.初始化 2.爬取数据 3.保存数据 4.数据可视化 5.大功告成 0.前言 最近,博主面临着选方向的困难(唉,选择困难症患者 >﹏<),所以希望了解一下目前不同岗位的就 ...