首页 > 代码库 > jQuery事件传播,事件流
jQuery事件传播,事件流
一. 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="http://www.mamicode.com/Event对象"> <p>捕获型事件流传播过程:</p> </body> <script type="text/javascript" src="http://www.mamicode.com/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="http://www.mamicode.com/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事件传播,事件流
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。