본문 바로가기

Language/Javascript

this 사용법

eventListner의 callback 함수 안에서 this를 사용하면 this는 eventListner가 부착된 element를 가리킨다.

하지만 callback 함수 안의 event인자를 사용해 event.target은 event를 trigger시킨 element를 가리키므로 둘은 다를 수 있다.

 

/* Delete Button */
const div = document.createElement("div");
const span = document.createElement("span");
span.innerText = "✕";
div.appendChild(span);
div.setAttribute("id", "delete-btn");

td2.appendChild(div);
td2.style.display = "flex";
td2.style.justifyContent = "space-between";

/* Do Delete */
const deleteBtns = document.querySelectorAll("#delete-btn");
console.log(deleteBtns);
deleteBtns.forEach((btn) => {
btn.addEventListener("click", deleteContent);
function deleteContent(event) {
  console.log(event.target);
  console.log(this);
}

 


anonymous function에서 this를 사용하면 현재 노드를 가리키지만

 

arrow function에서 사용하면 root object인 window를 가리킨다.

const items = document.querySelectorAll("li"); // 모든 항목 가져오기

for (let item of items) {
  item.addEventListener("click", function () {
    // 항목 클릭했을 때 실행할 함수
    console.log(this);
    this.parentNode.removeChild(this); // 부모 노드에서 삭제
  });
}

li 태그를 가리킨다.

 

for (let item of items) {
  item.addEventListener("click", () => {
    // 항목 클릭했을 때 실행할 함수
    console.log(this);
    this.parentNode.removeChild(this); // 부모 노드에서 삭제
  });
}

 

window를 가리킨다.

'Language > Javascript' 카테고리의 다른 글