05 - 5 이벤트 다루기
#1 이벤트(event)
자바스크립트에서 이벤트란 웹 브라우저나 사용자가 행하는 어떤 동작을 말합니다.
↓↓↓ 이벤트 목록 모음 ↓↓↓
https://developer.mozilla.org/en-US/docs/Web/Events
Event reference | MDN
Events are fired to notify code of "interesting changes" that may affect code execution. These can arise from user interactions such as using a mouse or resizing a window, changes in the state of the underlying environment (e.g. low battery or media events
developer.mozilla.org
#2 이벤트 처리기(event Handler)
이벤트와 이벤트 처리 함수를 연결해 주는 것으로,
이벤트 처리기는 이벤트 이름 앞에 'on'을 붙여 사용합니다.
#3 <button>태그에 이벤트 처리기로 함수 연결하기
<button>태그에 onclick = "alert('버튼을 눌렀습니다.')" 를 추가하면
이렇게 이벤트 처리기와 실행할 함수가 연결되어 동적인 효과를 만들 수 있습니다.
속성 | 설명 |
onclick | 마우스로 눌렀을 때 이벤트 발생 |
onmousevoer | 마우스 포인터가 요소 위로 옮겨질 때 이벤트 발생 |
#4 여러 이벤트 처리기 연결하기
1. click 이벤트
① var coverImage = document.querySelector("#cover");
=> 변수 지정 후 html에 "#cover" id태그 불러오기
② coverImage.onclick = function(){
2. mouseover, mouseout 이벤트
=> 변수 coverImage에 마우스 올렸을 시 함수 실행
=> 변수 coverImage에 마우스 내렸을 시 함수 실행