▶ addEventListener에서의 화살표 함수 주의사항
| 화살표 함수는 자신만의 this를 가지지 않기 때문에 자신을 포함하고 있는 함수의 this를 상속받는다 this를 사용해야하는 경우 addEventListener에서는 일반 함수로 사용하기 |
더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="function">function</button>
<button id="arrow">arrow function</button>
<script>
const functionButton = document.querySelector('#function')
const arrowButton = document.querySelector('#arrow')
functionButton.addEventListener('click', function () {
console.log(this) // <button id="function">function</button>
})
arrowButton.addEventListener('click', () => {
console.log(this) // window
})
</script>
</body>
</html>▶ 출력
'WEB > JavaScript' 카테고리의 다른 글
| [JavaScript][비동기] JavaScript와 비동기 (0) | 2024.04.23 |
|---|---|
| [JavaScript][비동기] 동기 (0) | 2024.04.23 |
| [JavaScript][Event] 이벤트 동작 취소 실습 (0) | 2024.04.22 |
| [JavaScript][Event] 이벤트 기본 동작 취소 (0) | 2024.04.22 |
| [JavaScript][Event] lodash (0) | 2024.04.22 |