2021/11/29
이벤트 객체
사용자 입력(
onclick,onkeyup등)을 트리거로 발생한 이벤트 정보를 담은 객체.
- 사용자가 버튼을 클릭하면, 그 버튼의
textContent또는innerHTML를 이용해서 메뉴의 이름을 가져올 수 있음. → 클릭된 이벤트 객체에서 메뉴의 이름을 가져옴. - 여러 속성, 메소드 들이 들어있음. ex)
event.type,event.target.. - 동작을 보기 위한 예시 코드
<body>
<button>아메리카노</button>
<button>카페라떼</button>
<script>
let menus = document.querySelectorAll('button'); // 모든 버튼을 가져옵니다.
let btnAmericano = menus[0];
let btnCaffelatte = menus[1];
function handleClick() {
console.log(event); // PointerEvent {isTrusted: true, ....}
console.log(event.target); // <button>아메리카노</button>
}
btnAmericano.onclick = handleClick;
btnCaffelatte.onclick = handleClick;
</script>
</body>- 버튼 클릭 시 콘솔 첫째 줄에는 PointerEvent가 찍히는 것을 확인할 수 있고,
- 콘솔 둘째 줄에는 해당 엘리먼트가 출력이 된다.
event.target / event.currentTarget
event.target은 이벤트 버블링의 가장 마지막에 위치한 최하위 요소를 반환함.event.currentTarget은 이벤트가 바인딩된 요소, 해당하는 요소를 반환함.- 예시코드
<button>아메리카노</button>밑에<span>shot</span>자식 요소가 하나 있다고 가정해보자.console.log(event.target)은 이벤트가 바인딩 된 button이 아닌 그 자식요소<span>shot</span>를 출력하게 됨.console.log(event.currentTarget)은 해당 바인딩 된 위치인 button을 전부 출력하게 됨.
결론 : 코드가 복잡해지는 경우에,
event.target을 사용하게 된다면 어떤 요소가 클릭되어 반환되어야 하는지의 결과가 달라질 수 있음. 이럴 때는event.currentTarget를 활용하는 것이 효과적이다.
이벤트 핸들러 vs 이벤트 리스너
- 이벤트 핸들러, 리스너의 간단 예시 코드
let button = document.querySelector('.btn')
// 이벤트 핸들러 (onclick 속성 사용)
button.onclick = function () {
console.log('hello');
};
// 이벤트 리스너를 객체에 추가
button.addEventListener('click', function(event) {
console.log('hello');
})차이점 (결론부터)
- 주어진 요소에 대해 이벤트 유형 당 하나의 이벤트 핸들러만 가질 수 있음.
- 이벤트 리스너의 경우에는 여러 개를 가질 수 있다.
- 일반적으로는 이벤트 리스너를 사용하는 것이 좋다.
- 결론에 대한 예시
let button = document.querySelector('.btn')
button.onclick = function () {
console.log('hello');
};
button.onclick = function () {
console.log('hi');
};
// 이렇게 동일한 클릭에 대해서 두개의 이벤트 핸들러를 추가하게 된다면
// 두 번째 핸들러가 첫 번째를 덮어 쓰고 출력을 하게 된다.
// hi 출력
button.addEventListener('click', function(event) {
console.log('hello');
})
button.addEventListener('click', function(event) {
console.log('hi');
})
// 이벤트 리스너는 덮어쓰지 않고 2개를 동시에 호출한다.
// hello
// hi 
~ing