javascript VS event.currentTarget

target vs curruntTarget

<div class="yellow" id="yellow" style="background: #ff0; width: 300px; height: 150px">
    <div class="green" style="background: #0f0; width: 200px; height: 100px"></div>

<script type="text/javascript">
var divYellow = document.getElementById('yellow');
divYellow.onclick = function(e){
    e = e || window.event;
    var target = || e.srcElement; //ie대응
    var current = e.currentTarget || this; //ie대응
    alert('target: '+target.className + ' currentTarget: ' + current.className);

아래노랑네모에 클릭이벤트를 걸고,

  • 위초록네모 클릭-> target:위초록 curruetTarget:아래노랑
  • 아래노랑네모 클릭-> target:아래노랑 currentTarget:아래노랑

위초록네모를 클릭하면 그걸 감싸고 있는 아래노랑네모에 event가 bubbling되어 이벤트 발생. 이벤트가 일어난 곳
e.currentTarget: 실제로 이벤트가 걸려있는 위치

jQuery curruntTarget

$( "p" ).click(function( event ) {
  alert( event.currentTarget === this ); // true

jquery의 curruntTarget은 this와 동일하다.


Published by

Yurim Jin

아름다운 웹과 디자인, 장고와 리액트, 그리고 음악과 맥주를 사랑하는 망고장스터

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s