*예문
function checkTarget(event) {
var ele = event.currentTarget;
console.log(ele);
}
<div onclick="checkTarget();">
<span>test</span>
</div>- event.target // 클릭된 span 태그를 반환
- event.currentTarget // 이벤트가 바인딩된 div 요소를 반환
*실습한 예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id = d1>
<button>B1</button>
<button>B2</button>
<button>B3</button>
</div>
<script>
document.querySelector('#d1').addEventListener("click",(e) =>{
alert('AAA')
console.log(e.target)
//각버튼의 요소가 출력된다.
})
</script>
</body>
</html>
console.log(e.target)각 버튼을 눌렀을때 실제로 출력되는건 B1을 누르면 B1, B2를 누르면 B2가 출력된다.
console.log(e.currentTarget)각 버튼을 눌렀을때 똑같이 div가 출력된다.
간단하게 정리를 잘해주셨다.
자바스크립트 event target 프로퍼티와 currentTarget 프로퍼티의 차이점은?
자바스크립트의 이벤트 중 클릭한 요소를 가져오는 방법으로 event 객체의 target 또는 currentTarget 프로퍼티를 사용합니다. 이때 이 둘의 차이점은 무엇이고 어떤 경우에 무엇을 사용해야하는지 알
webisfree.com
[javascript / 자바스크립트] 이벤트가 발생한 대상(요소) 얻기 - event.target
event.target event.target은 이벤트가 발생한 요소를 반환해준다. 예를 들어 $("a").click(function(event){ console.log(event.target); }); 이라는 코드는 a요소를 클릭했을 때 이벤트가 발생하고, 이벤트가 발..
mjmjmj98.tistory.com
'자바스크립트' 카테고리의 다른 글
| 클로저 (감춰진 참조) (0) | 2021.11.16 |
|---|---|
| 구조 분해 할당 (0) | 2021.11.16 |
| 자바스크립트 버블링 / 캡처링 (0) | 2021.11.16 |
| 구글맵 API 사용 테스트 (0) | 2021.11.14 |
| 자바스크립트 : 알아야 될 용어정리 (0) | 2021.11.13 |