一. 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. LockDemo 锁对象

    class Resource { private boolean flag = false; private String name; private int count; //资源锁 Lock lo ...

  2. jmeter的JDBC Request接口测试

    Jmeter操作Mysql 测试计划添加.jar包 mysql-connector-java-5.1.7-bin.jar用于使Jmeter可以读取Mysql: 线程组添加 JDBC Connectio ...

  3. C++算法库学习__std::sort__对 vector进行排序_排序后就可以进行使用std::lower_bound进行二分查找（查找第一个大于等于指定值的迭代器的位置）__std::unique

    std::sort      对vector成员进行排序; std::sort(v.begin(),v.end(),compare);   std::lower_bound 在排序的vector中进行 ...

  4. 解决[disabled]="true"与formControlName冲突

    import { FormBuilder } from '@angular/forms'; form; constructor(private fb: FormBuilder) { this.form ...

  5. CAD利用Select2得到所有实体（网页版）

    主要用到函数说明: IMxDrawSelectionSet::Select2 构造选择集.详细说明如下: 参数 说明 [in] MCAD_McSelect Mode 构造选择集方式 [in] VARI ...

  6. Spring框架系列(三)--Bean的作用域和生命周期

    Bean的作用域 Spring应用中,对象实例都是在Container中,负责创建.装配.配置和管理生命周期(new到finalize()) Spring Container分为两种: 1.BeanF ...

  7. 01Struts 2

    Struts 2 Struts2是一个基于MVC设计模式的Web应用框架,它本质上相当于一个servlet,在MVC设计模式中,Struts2作为控制器(Controller)来建立模型与视图的数据交 ...

  8. Oracle 把一个用户所有表的读权限授予另一个用户

    create user <USER_NAME> identified by <PASSWORD>; grant create session TO <USER_NAME& ...

  9. crontab定时清理日志

    1.创建shell脚本 vi test_cron.sh #!/bin/bash#echo "====`date`====" >> /game/webapp/test_c ...

  10. IOS上MediaPlayer framework实现视频播放

    播放电影文件: iOS sdk中可以使用MPMoviePlayerController来播放电影文件.但是在iOS设备上播放电影文件有严格的格式要求,只能播放下面两个格式的电影文件. • H.264 ...