JAVASCRIPT - 2020. 12. 3.

jquery 이벤트 와 this 그리고 화살표 함수

안녕하세요 TriplexLab 입니다.

ES6에서는 function 대신 화살표 함수(=>)를 사용합니다.
영어로 Fat Arrow라고 부르는 표기법은 단순히 function을 바꾼 것으로 알고 있는 분들이 계시지만

실제론 그렇지 않습니다.

//1번
$('.ele').click(function(){
    console.log(this);
});

//2번
$('.ele').click(()=>{
    console.log(this);
});

1번은 .ele의 this = ele(자기 자신)을 가리킨다.

2번은 .ele의 this = global(window)을 가리킨다.

그러면 어떻게 기존 jquery 코드를 화살표 함수 형태로 변경할 수 있을까요??

//1번
$('.ele').click(function(){
    $(this).addClass('clicked');
});

//2번
$('.ele').click((e)=>{
    $(e.target).addClass('clicked');
});

화살표함수 내에 매개변수를 넣어 선택된 엘리먼트를 지정해줍니다.
위에서와 동일하게 작동합니다.

e.target는 현재 내가 클릭한 대상을 말한다.
ele를 선택한 엘리먼트 뿐 아니라 자식 엘리먼트에게도 영향을 준다.

.ele만 영향을 주고 싶다면 아래와 같이 하면 된다.

$('.ele').click((e)=>{
    $(e.currentTarget).addClass('clicked');
});

e.currentTarget는 현재 이벤트를 선택한 대상을 만한다. 즉 this와 같다.

e.currentTarget == this 현재 이벤트가 달린 곳 (EventListener 왼쪽에 있는애)

e.target == 현재 내가 클릭한 대상(자식태그)

엘리먼트 하위의 특정 자녀에게만 이벤트 위임을 부여하는건 어떻게 할 수 있을까요??

<ul class="my-list">
    <li class="list">하나</li>
    <li class="list">둘</li>
    <li class="list">셋</li>
</ul>

$('.my-list').on('click', 'li', (e)=>{
    $(e.currentTarget).addClass('clicked');
});

이렇게 .my-list에 대해서 이벤트를 하나 부여하여 모든 <li>태그에 대해서 동일한 이벤트를 부여할 수 있습니다.

위의 코딩 스타일은 각각의 <li>에 이벤트를 부여하는 것보다 자원을 아낄 수 있을 뿐 아니라 유지보수에도 도움을 줍니다.

Contents

새소식