자바스크립트 기본 문법!(이벤트와 이벤트 처리) - Java Script

이벤트

• 웹 브라우저나 사용자가 행하는 동작
• 웹 문서 영역 안에서 이루어지는 동작만 가르킵니다.
• 주로 마우스나 키보드를 사용할 때, 웹 문서를 불러올 때, 폼에 내용을 입력할때 발생합니다.

※마우스 이벤트

종류	설명
click	사용자가 HTML 요소를 클릭할때 이벤트가 발생합니다.
dblclick	사용자가 HTML 요소를 더블클릭 할때 이벤트가 발생합니다.
mousedown	사용자가 요소 위에서 마우스 버튼을 눌렀을 때 이벤트가 발생합니다.
mousemove	사용자가 요소 위에서 마우스 포인터를 움직일 때 이벤트가 발생합니다.
mouseover	마우스 포인터가 요소 위로 옮겨질때 이벤트가 발생합니다.
mouseout	마우스 포인터가 요소를 벗어 날때 이벤트가 발생합니다.
mouseup	마우스 포인터가 요소를 벗어 날때 이벤트가 발생합니다.

 

※키보드 이벤트

종류	설명
keydown	사용자가 키를 누르는 동안 이벤트가 발생합니다.
keypress	사용자가 키를 눌렀을 때 이벤트가 발생합니다.
keyup	사용자가 키에서 손을 땔 때 이벤트가 발생합니다.

 

※문서 로딩 이벤트

종류	설명
abort	문서가 완전히 로딩되기 전에 불러오기를 멈췄을 때 이벤트가 발생합니다.
error	문서가 정확히 로딩되지 않았을 때 이벤트가 발생합니다.
load	문서 로딩이 끝나면 이벤트가 발생합니다.
resize	문서화면 크기가 바뀌었을때 이벤트가 발생합니다.
scroll	문서화면이 스크롤 되었을때 이벤트가 발생합니다.
unload	문서에서 벗어날 때 이벤트가 발생합니다.

 

※폼 이벤트

종류	설명
blur	폼 요소에 포커스를 잃었을 때 이벤트가 발생합니다.
change	목록이나 체크 상태 등이 변경 되면 이벤트가 발생합니다. <input>, <select>, <textarea> 태그에서 사용합니다.
focus	폼 요소에 포커스가 놓였을 때 이벤트가 발생합니다. <label>, <select>, <textarea>, <button> 태그에서 사용합니다.
reset	폼이 리셋되었을 때 이벤트가 발생합니다.
submit	submit 버튼을 클릭 했을때 이벤트가 발생합니다.

---

 

이벤트 처리기

이벤트가 발생했을 때 처리하는 함수
이벤트 핸들러 라고도 합니다.
이벤트가 발생한 HTML 태그에 이벤트 처리기를 직접 연결합니다.

기본형)

   <태그 on이벤트명 = "함수명">

  <ul>
    <li><a href="#" onclick="alert('버튼을 클릭했습니다.')">Green</a></li>
    <li><a href="#" onclick="alert('버튼을 클릭했습니다.')">blue</a></li>
    <li><a href="#" onclick="alert('버튼을 클릭했습니다.')">orange</a></li>
  </ul>

#은 자기 자신을 표시합니다.

버튼클릭으로 상세정보를 여닫는 가상의 코드를 작성해보겠습니다.

	<div id="item">
		<img src="images/flower.jpg" alt="">
		<button class="over" id="open" onclick="showDetail()">상세 설명 보기</button>
										//이부분의 onclick을 showDetail()로 지정해줍니다.
		<div id="desc" class="detail">
			<h4>등심붓꽃</h4>
			<p>북아메리카 원산으로 각지에서 관상초로 흔히 심고 있는 귀화식물이다. 길가나 잔디밭에서 흔히 볼 수 있다. 아주 작은 씨앗을 무수히 많이 가지고 있는데 바람을 이용해 씨앗들을 날려보내거나, 뿌리줄기를 통해 동일한 개체들을 많이 만들어 냄으로써 번식한다. </p>
			<button id="close" onclick="hideDetail()">상세 설명 닫기</button>
								// 이부분의 onclick을 hideDetail()로 지정해줍니다.
		</div>
	</div>	

	<script>
    function showDetail() {
      document.querySelector('#desc').style.display = "block";	// 상세 설명 부분을 화면에 표시
      document.querySelector('#open').style.display = "none";   // '상세 설명 보기' 단추를 화면에서 감춤
    }

    function hideDetail() {
      document.querySelector('#desc').style.display = "none";	   // 상세 설명 부분을 화면에서 감춤
      document.querySelector('#open').style.display = "block";	 // '상세 설명 보기' 단추를 화면에 표시
    }

이런식으로! 가능합니다.

 

---

DOM을 이용한 이벤트 처리기

DOM을 사용하면 자바스크립트가 주인이 되어 HTML의 요소를 가져와서 이벤트 처리기를 연결 합니다.

기본형)

웹요소.onclick = 함수;