JavaScript事件监听器 addEventListener
2016-04-14 20:53
363 查看
在JS(ECMA)中当一个事件发生时,分为三个阶段:
1、 捕获阶段 从根节点开始顺序而下,检测每个节点是否注册了事件处理程序。如果注册了事件处理程序,并且 useCapture 为 true,则调用该事件处理程序。
2、目标阶段 触发在目标对象本身注册的事件处理程序,也称正常事件派发阶段 。
3、冒泡阶段 从目标节点到根节点,检测每个节点是否注册了事件处理程序,如果注册了事件处理程序,并且 useCapture 为 false,则调用该事件处理程序。
addEventListener方法的第三个参数就是用来控制事件是执行 捕获阶段 还是 冒泡阶段。
1、 捕获阶段 从根节点开始顺序而下,检测每个节点是否注册了事件处理程序。如果注册了事件处理程序,并且 useCapture 为 true,则调用该事件处理程序。
2、目标阶段 触发在目标对象本身注册的事件处理程序,也称正常事件派发阶段 。
3、冒泡阶段 从目标节点到根节点,检测每个节点是否注册了事件处理程序,如果注册了事件处理程序,并且 useCapture 为 false,则调用该事件处理程序。
addEventListener方法的第三个参数就是用来控制事件是执行 捕获阶段 还是 冒泡阶段。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Language" content="zh-cn" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>useCapture</title> <style type="text/css"> #outDiv { padding:10px 10px 10px 10px; border:1px solid red; } #middleDiv { padding:10px 10px 10px 10px; border:1px solid green; } #inDiv { padding:10px 10px 10px 10px; border:1px solid blue; } </style> </head> <body> <div id="outDiv"> <div id="middleDiv"> <div id="inDiv">请在此点击鼠标。</div> </div> </div> <div id="info"></div> <script language="javascript" type="text/javascript"> var outDiv = document.getElementById("outDiv"); var middleDiv = document.getElementById("middleDiv"); var inDiv = document.getElementById("inDiv"); var info = document.getElementById("info"); // 事件捕获阶段 outDiv.addEventListener("click", function () { info.innerHTML += "outDiv" + "<br>"; }, true); middleDiv.addEventListener("click", function () { info.innerHTML += "middleDiv" + "<br>"; }, true); inDiv.addEventListener("click", function () { info.innerHTML += "inDiv" + "<br>"; }, true); // 事件冒泡阶段 outDiv.addEventListener("click", function () { info.innerHTML += "outDiv" + "<br>"; }, false); middleDiv.addEventListener("click", function () { info.innerHTML += "middleDiv" + "<br>"; }, false); inDiv.addEventListener("click", function () { info.innerHTML += "inDiv" + "<br>"; }, false); </script> </body> </html>
相关文章推荐
- tornado实现在JS文件的国际化和静态文件的引用
- JSON 保存到本地
- 【JavaScript】图片预览
- 面试某公司前端关于javascript中this的总结
- 使用js获取系统当前时间并在页面显示
- JS 获取浏览器和屏幕宽高信息
- 给js创建的一个input数组绑定click事件
- 实现从ActiveX调用网页中的javascript函数.
- 简易封装js库
- JS弹出模态窗口下拉列表特效
- list和json之间的转换
- json使用总结
- YY游戏云的angular js实践总结
- Jsp转发和重定向的区别
- js求两者时间差
- JS Base64 3Des加密解密(荐)
- JSTL标签详解
- 字符串方法返回值分类
- 关于js中namespace命名空间模式
- js书写规范