zoukankan      html  css  js  c++  java
  • e.target与e.currentTarget对比

    复制以下代码,即可查看效果

    <!DOCTYPE html>  
    <html>  
    <head lang="en">  
        <meta charset="UTF-8">  
        <title></title>  
        <style type="text/css" rel="stylesheet">  
           #father{  
                 200px;  
                height: 120px;  
                padding: 20px;  
                background-color: #ccc;  
            }  
            #son{  
                 100%;  
                height: 20px;  
                padding: 30px 0px;  
                background-color: #000;  
                color: white;  
                text-align: center;  
                cursor: pointer;  
            } 
        </style>  
    </head>  
    <body>  
    <div id="father" onmousedown="getEventTrigger(event)">  
        <p id="son" onmousedown="getEventTrigger(event)">点击查看效果</p>  
    </div>  
    </body>  
    <script type="text/javascript">  
        var fa = document.getElementById('fa');  
        var son = document.getElementById('son');  
      
      
        function getEventTrigger(event)  
        {  
            x=event.currentTarget;  
            y=event.target;  
            alert("currentTarget 指向: " + x.id + ", target指向:" + y.id);  
        }  
    </script>  
    </html>
    

    灰色为父盒子,黑色为子元素

    点击子元素,弹出:

    事件经过:点击子元素p标签,事件监听对象为p标签,目标元素也是p标签,所以e.target和e.currentTarget都是p标签

    由于没有阻止事件冒泡,会在父元素上再次捕捉到事件,这时事件监听对象为父元素,目标是p标签,正如上图所示

    由此给出定义

    • e.currentTarget指的是注册了监听事件的对象
    • e.target指的是触发事件的对象(父元素里的子元素)
  • 相关阅读:
    求一个数的阶乘在 m 进制下末尾 0 的个数
    区间dp
    最长公共子序列变形
    学习stm32专区
    C/C++中static关键字详解
    ASP.NET调用Office Com组件权限设置
    TreeView控件
    SQL笔记(1)索引/触发器
    NPOI 1.2.5 教程
    SQL Povit
  • 原文地址:https://www.cnblogs.com/zhangceblogs/p/8522243.html
Copyright © 2011-2022 走看看