由e.target与e.currentTarget 延伸理解 事件捕获/事件冒泡

起因

定义一个点击监听事件 ,可以用事件event.preventDefault();来阻止点击a默认跳转,刷新页面导致结果不能输出来的一个作用。

< script >
var ul = document.getElementById("ul");
ul.onclick = function(event) {
    var tar = event.target;
    var tagName = tar.nodeName.toLowerCase();
    console.log("你点击了:" + tagName);
    event.preventDefault();
} 
< /script>

e.target与e.currentTarget的作用

— current:有当前的/现在的意思,currentTarget可理解当前的目标对象

网上某文章博主 的观点:结合事件捕获和事件冒泡的概念,e.currentTarget指的是注册了事件监听器的对象,而e.target指的是该对象里的子对象,也是触发这个事件的对象!


个人理解:

  1. e.target— 永远指向触发这个监听事件的对象。
  2. e.currentTarget时动态的,只要有对象注册了相同的事件监听器,那么,结合事件捕获/事件冒泡,随着事件执行到某一个对象,e.currentTarget便显示当前对象。

可通过事件的方式,获取节点、id值。

var tar = event.target; 
1. var tagName = tar.nodeName;
2. var tagId = tar.id;
<body> 
  <div id = "fa"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>

事件捕获/事件冒泡概念

补充:

  1. 事件捕获 w3c标准下,事件发生都是从顶层开始捕获去查找触发源,最终指向的是 触发目标 ,即e.target;
  2. 事件冒泡 是找到触发target后向上冒泡触发相同监听事件,最终指向的是 当前目标, 即e.currentTarget。
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容