이벤트 핸들러
Element.addEventListner('click', function (event) {
console.log(event);
})
- 이벤트 핸들러란 이벤트가 발생했을 때 실행되는 함수
- 매개변수로 event 객체를 받을 수 있음
- event.target: 이벤트가 발생한 element
이벤트 위임
- event.target : 이벤트 발생한 요소
- event.currentTarget: 이벤트 핸들러가 등록되어 있는 요소
<ul id="card-list" onclick="handleClick(event)">
<li class="movie-card" id="movieId">
<img src="https://image.tmdb.org/t/p/w500${movie.poster_path}" alt="${movie.title}">
<h3 class="movie-title">제목</h3>
<p>내용</p>
<p>Rating: 평점</p>
</li>
</ul>
- 부모 요소인 ul 태그 이벤트핸들러가 등록되어 있으면 자식 요소인 li, img, h3, p 태그 중 어떤 것을 클릭해도 부모 요소의 이벤트 핸들러가 실행된다.
- 이벤트 위임을 잘 다루려면 event.target, event.currentTarget 의 차이를 알아야 한다.
- 이벤트 위임이란 게 어떻게 가능하지? → “이벤트 버블링”이란 특징 때문
- 이벤트버블링이란? 하위 요소에서 발생한 이벤트가 상위 요소로 전파되는 현상
child를 클릭했을때
form 태그
- submit 이벤트 발생 시 새로고침 처리하는 기본 동작을 가지고 있음
- event.preventDefault() 발생한 이벤트에 대한 브라우저의 기본 동작(새로고침)을 막습니다.
formElement.addEventListner('submit', function (event) {
event.preventDefault();
})
form 내부에서 input 과 button 의 동작
- form 태그에 submit 이벤트 핸들러가 있는 경우, input에 내용 입력 후 button 클릭 또는 Enter 입력 시 submit 이벤트 핸들러가 실행된다.
- form 안에 있는 button 태그에 type을 명시하지 않은 경우 기본 type은 submit 이며, submit이 아닌 다른 타입을 명시하면 버튼 클릭 시 submit 이벤트가 발생하지 않는다.
<form id="search-form">
<label>영화 검색 : </label>
<input type="text" id="search-input" placeholder="영화 제목을 검색해 보세요" />
<button type="submit" id="search-btn">검색</button>
</form>
