jQuery事件传播，事件流

来源：互联网发布：java 构架师编辑：程序博客网时间：2024/05/16 12:56

一. jQuery事件传播

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

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

代码示例：

<!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];//获取按钮        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>

0 0