event 복습 21.03.22
in Dev on Java Script
onclick 에 직접 할당하는 것과 addEventListener의 차이
- onclick 직접 할당
const buttonElement = document.querySelector('#click_button');
let clickEvent = function () {
console.log('버튼을 클릭하였습니다. 이벤트 연결 완료!')
}
buttonElement.onclick = clickEvent;
- addEventListener
const buttonElement = document.querySelector('#click_button');
let clickEvent = function () {
console.log('버튼을 클릭하였습니다. 이벤트 연결 완료!')
}
buttonElement.addEventListener('click', clickEvent);
1.브라우저 호환성
- onclick 직접 할당 : 모든 브라우저 호환
- addEventListener : IE 6,7,8 호환 X
2.버블링, 캡쳐링 설정 가능 여부
- onclick 직접 할당 : 버블링 / 캡쳐링 설정 불가능
- addEventListener : 3번째 파라미터(type이 true면 버블링, false면 캡쳐링)로 버블링, 캡쳐링 동작 여부 설정 가능
버블링 : 캡처링 :
3.이벤트 관리 방식
- onclick 직접 할당 : 하나의 이벤트에 여러 이벤트 핸들러 함수를 할당할 경우 마지막에 설정한 함수만 적용 된다. (over writing)
const buttonElement = document.querySelector('#click_button');
let clickEvent1 = function () {
console.log('1번 버튼을 클릭하였습니다. 1번 이벤트 연결 완료!')
}
let clickEvent2 = function () {
console.log('2번 버튼을 클릭하였습니다. 2번 이벤트 연결 완료!')
}
buttonElement.onclick = clickEvent1;
buttonElement.onclick = clickEvent2;
// 버튼 클릭 시 : 2번 이벤트만 실행.
// '2번 버튼을 클릭하였습니다. 2번 이벤트 연결 완료!'
- addEventListener : 하나의 이벤트에 다양한 함수 구현이 가능하다.
const buttonElement = document.querySelector('#click_button');
let clickEvent1 = function () {
console.log('1번 버튼을 클릭하였습니다. 1번 이벤트 연결 완료!')
}
let clickEvent2 = function () {
console.log('2번 버튼을 클릭하였습니다. 2번 이벤트 연결 완료!')
}
buttonElement.addEventListener('click', clickEvent1)
buttonElement.addEventListener('click', clickEvent2)
// 버튼 클릭 시 : 2이벤트 모두 실행
// '1번 버튼을 클릭하였습니다. 1번 이벤트 연결 완료!'
// '2번 버튼을 클릭하였습니다. 2번 이벤트 연결 완료!'
결론 : 브라우저 호환성에 관계 없이 작동하게 하고싶다면 onclick 직접 할당 / 그렇지 않은 경우 addEventListener. 현재 addEventListener는 더 모던한 자바스크립트 기능으로 사용 중인 추세.
- eventHandler 함수를 만들고, eventHandler의 첫번째 인자를 사용
이벤트 객체
이벤트 객체는, 쉽게 말해 사용자 입력(onclick, onkeyup, onscroll) 등의 트리거에 의해 발생한 이벤트 정보가 담긴 객체.
let button = document.querySelectorAll('.button');
let button1 = button[0];
let button2 = button[1];
button1.onclick = handleClick;
button2.onclick = handleClick;
// 2개 이상은 for 문으로 구현 가능
function handleClick(event) {
console.log(event);
//MouseEvent {isTrusted: true, screenX: 32, screenY: 128, clientX: 32, clientY: 17, …}
console.log(event.target);
//<button class="button">버튼 1</button>
console.log(event.target.textContent);
//버튼 1
}
// 버튼 1 클릭 시
// MouseEvent {isTrusted: true, screenX: 32, screenY: 128, clientX: 32, clientY: 17, …}
// <button class="button">버튼 1</button>
// 버튼 1
[이벤트 객체 종류]
- onsubmit
- onchange
- onmouseover
- onkeyup
- event.preventDefault
