JavaScript事件监听器 addEventListener

最新推荐文章于 2024-07-01 16:22:16 发布

卢凯文

最新推荐文章于 2024-07-01 16:22:16 发布

阅读量1.2k

点赞数

分类专栏： JavaScript 文章标签： javascript

JavaScript 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

在JS(ECMA)中当一个事件发生时，分为三个阶段：

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>

卢凯文

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript事件监听器 addEventListener

在JS(ECMA)中当一个事件发生时，分为三个阶段：1、捕获阶段从根节点开始顺序而下，检测每个节点是否注册了事件处理程序。如果注册了事件处理程序，并且 useCapture 为 true，则调用该事件处理程序。2、目标阶段触发在目标对象本身注册的事件处理程序，也称正常事件派发阶段。3、冒泡阶段从目标节点到根节点，检测每个节点是否注册了事件处理程序，如果注册了事件处理程序，并且 useCap
复制链接

扫一扫

专栏目录