동작, 상태가 바뀌는 일이 발생하는 것을 의미
HTML DOM 요소들은 이벤트가 발생했을 때 웹 브라우저가 알 수 있는 이벤트 신호를 발생 시키는데, JS는 발생한 이벤트에 반응해 지정한 동작을 수행할 수 있다.
대표적인 이벤트 종류 :키보드 이벤트,마우스 이벤트,form 이벤트
Event Listener 등록 & 삭제
JS에서 이벤트에 대한 반응을 지정하기 위해
해당 이벤트를 감지할 수 있는 Event Listener 를 사용해
동작을 처리할 Event Handler 를 지정해야 한다.
<button>클릭</button>
<button class="del">이벤트 삭제</button>const button = document.querySelector('button');
const delButton = document.querySelector('.del');
function handler(event) {
console.log(event);
}
button.addEventListener('click', handler);
function delHandler(event) {
button.removeEventListener('click', handler);
}
delButton.addEventListener('click', delHandler);
⇒ 이벤트리스터는 addEventListener() 를 사용해 추가 가능
⇒ addEventListener() 는 첫번째 인자로 이벤트의 종류를 문자열로 받고, 지정된 요소에 해당 이벤트(첫번째 인자)가 발생했을 때 두번째 인자로 전달된 handler 를 실행시킨다.
⇒ Event Listener 를 삭제하기 위해서는 removeEventListener 사용하며, 등록방법은 addEventListener 와 동일
⇒ '이벤트 삭제' 라는 버튼 클릭 시 handler 이벤트 삭제
이벤트가 발생할 때 브라우저는 event 라는 객체를 생성
이 event 객체에는 이벤트와 관련된 정보가 들어 있고, 위 예제 같이 핸들러 함수가 실행될 때 인자로 전달된다.
⇒ 하나의 요소에 서로 다른 이벤트 타입의 여러개의 Event Listener 를 추가할 수 있다.(예: 클릭 담당 이벤트리스너, 마우스 오버 담당 이벤트리스터 등)
이벤트 전파
어떠한 요소에서 발생한 이벤트는 부모 또는 자식에게 전파되는데
전파되는 방향에 따라 버블링 방식과 캡쳐링 방식으로 구분할 수 있다.
- 버블링 : 자식 요소에서 발생한 이벤트가 부모 요소로 전파
- 캡쳐링 : 자식 요소에서 발생한 이벤트가 부모 요소부터 시작해 이벤트를 발생시킨 자식 요소까지 도달
event.target
이벤트가 버블링 방식으로 전파될 때
부모 요소에 할당된 핸들러의 event 객체는 이벤트를 발생시킨 대상을 가지고있고, event.target 으로 접근 가능
function handler(event) {
console.log(event.target);
}event.currentTarget
실제 이벤트가 발생한 요소를 가리키는 event.target 과 달리
현재 실행 중인 핸들러의 주체를 가르킨다
⇒ event.currentTarget 은 this 와 같다.
function handler(event) {
console.log(event.currentTarget);
}이벤트 객체
사용자가 버튼을 클릭했을 때 그 버튼의 textContent를 이용해 메뉴의 이름을 가져올 수 있다.
사용자가 누른 버튼에 따라 출력되는 이름이 달라지므로, 클릭된 이벤트 객체에서 메뉴의 이름을 가져오는데
⇒ 이벤트 객체는 사용자 입력(onclick, onkeyup, onscroll 등) 을 트리거로 발생한 이벤트 정보를 담은 객체
<body>
<button>아메리카노</button>
<button>카페라떼</button>
</body>let menus = document.querySelectorAll("button");
//모든 버튼을 가져옴.
let btnAmericano = menus[0];
let btnCaffelatte = menus[1];
function handleClick() {
let currentMenu = (____)
// 빈칸을 채워서 버튼 클릭 시 클릭한 버튼안의 텍스트 + '를 클릭하셨습니다.' 노출되게 하기
console.log(currentMenu + "를 클릭하셨습니다.");
}
btnAmericano.onclick = handleClick;
btnCaffelatte.onclick = handleClick;
// 이상으로 for 문으로 충분히 구현할 수 있는 내용입니다.- event.target.value를 했을 때 value 속성이 지정되어 있지 않아서
console.log의 "를 클릭하셨습니다." 만 노출됨
⇒ 만약 value로 나오고 싶으면 html 의 각 button 태그에 value 추가해야 함
<button value = "아메리카노">아메리카노</button>
<button value = "카페라떼">카페라떼</button>-
event.target.menus를 했을 땐 menus는 event.target 객체에 없는 key값이니 undefined + "를 클릭하셨습니다." 만 노출됨
-
event.target.textContent 로 button 안의 text를 노출시켜주면
버튼 클릭 시 원하는 값이 제대로 노출 됨
