이벤트 위임
-
이벤트 위임 (Event Delegation) 안녕하세요 TriplexLab입니다 :) 오늘은 이벤트 위임에 관해서 살펴보도록 하겠습니다. ✍️ 이벤트 위임 코드 다음 코드는 이벤트를 핸들러를 등록하고, 클래스를 토글 하는 코드입니다. 근데 아래 코드는 한 가지 문제가 있습니다. //이벤트 위임 (Event Delegation) (function() { const list = document.querySelector('#list'); for (let item of list.children) { item.addEventListener('click', function(e) { e.target.classList.toggle('done'); }); } })(); 다음과 같이 엘리먼트를 새로 추가하게 되면 이벤트..
이벤트 위임(Event Delegation)이벤트 위임 (Event Delegation) 안녕하세요 TriplexLab입니다 :) 오늘은 이벤트 위임에 관해서 살펴보도록 하겠습니다. ✍️ 이벤트 위임 코드 다음 코드는 이벤트를 핸들러를 등록하고, 클래스를 토글 하는 코드입니다. 근데 아래 코드는 한 가지 문제가 있습니다. //이벤트 위임 (Event Delegation) (function() { const list = document.querySelector('#list'); for (let item of list.children) { item.addEventListener('click', function(e) { e.target.classList.toggle('done'); }); } })(); 다음과 같이 엘리먼트를 새로 추가하게 되면 이벤트..
2021.05.20 -
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번 $(..
jquery 이벤트 와 this 그리고 화살표 함수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번 $(..
2020.12.03