美文网首页
event.target 与 event.currentTarg

event.target 与 event.currentTarg

作者: shadow123 | 来源:发表于2017-07-25 12:28 被阅读0次

event.target指向引起触发事件的元素
event.currentTarget则是事件绑定的元素

看个例子

<style>
body {
  padding: 25px;
}
#outer {
  float: left;
  padding: 50px;
  margin: 0 0 25px;
  background-color: #086FA1;
}

#inner {
  width: 100px;
  height: 100px;
  background-color: #3CA0D0;
}

</style>
<div id="outer">
  <div id="inner"></div>
</div>
<script>
    var outer = document.getElementById('outer');
    var inner = document.getElementById('inner');
    outer.addEventListener('click',function (event){
       console.log('event.target.id:'+event.target.id);
       console.log('event.currentTarget.id:'+ event.currentTarget.id); 
    })
</script>

当点击里面的元素时,输出

event.target.id:inner
event.currentTarget.id:outer

当点击外面的元素时,输出

event.target.id:outer
event.currentTarget.id:outer

当事件绑定的元素和触发的元素相同时,event.target === event.event,currentTarget。

相关文章

网友评论

      本文标题:event.target 与 event.currentTarg

      本文链接:https://www.haomeiwen.com/subject/myewkxtx.html