Keep going
이벤트와 이벤트 처리기 본문
- 이벤트
- 웹 브라우저나 사용자가 행하는 웹 문서 영역 안에서 이루어지는 동작
- 이벤트는 주로 마우스나 키보드를 사용할 때, 웹 문서를 불러올 때, 폼에 내용을 입력할 때 발생한다.
- 마우스 이벤트
- click : 사용자가 HTML 요소를 클릭할 때 이벤트가 발생한다.
- dbclick : 사용자가 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 태그에 이벤트 처리기를 직접 연결하는 것이다.
- HTML 태그안에서 'on' 다음에 '이벤트명'을 붙여서 속성 이름을 만들고, 그 다음에 실행할 이벤트 처리기의 함수명을 작성하면 된다.
|
<body>
<ul>
<li><a href="#" onclick="changeBg('green')">Green</a></li>
<li><a href="#" onclick="changeBg('orange')">Orange</a></li>
<li><a href="#" onclick="changeBg('purple')">Purple</a></li>
</ul>
<div id="result"></div>
<script>
function changeBg(color) {
var result = document.querySelector('#result');
result.style.backgroundColor = color;
}
</script>
</body>
|
cs |
- DOM을 이용한 이벤트 처리하기
- 지금까지 이벤트 처리기를 지정하는 방법은 HTML이 주인이 되어 자바스크립트의 함수를 불러와서 사용했다.
- 하지만 DOM을 사용하면 자바스크립트가 주인이 되어 HTML의 요소를 가져와서 이벤트 처리기를 연결한다.
웹요소.onclick = 함수 ;
- 자바스크립트에서는 웹 요소를 여러 방법으로 가져올 수 있는데 그 중에서 함수 querySelector( )를 사용하여 가져오는 것이 쉽다.
- querySelector( )의 괄호 안에는 클래스 이름이나 id 이름 또는 다양한 선택자를 넣을 수 있다.
|
<body>
<button id="change">글자색 바꾸기</button>
<p>Reprehenderit tempor do quis sunt eu et exercitation deserunt</p>
<script>
// 방법 1: 웹 요소를 변수로 지정 & 미리 만든 함수 사용
var changeBttn = document.querySelector("#change");
changeBttn.onclick = changeColor;
function changeColor() {
document.querySelector("p").style.color = "#f00";
}
// 방법 2: 웹 요소를 따로 변수로 만들지 않고 사용
// document.querySelector("#change").onclick = changeColor;
// function changeColor() {
// document.querySelector("p").style.color = "#f00";
// }
// 방법 3: 직접 함수를 선언
// document.querySelector("#change").onclick = function() {
// document.querySelector("p").style.color = "#f00";
// };
</script>
</body>
|
cs |
|
<body>
<div id="item">
<img src="images/flower.jpg" alt="">
<button class="over" id="open">상세 설명 보기</button>
<div id="desc" class="detail">
<h4>등심붓꽃</h4>
<p>북아메리카 원산으로 각지에서 관상초로 흔히 심고 있는 귀화식물이다. 길가나 잔디밭에서 흔히 볼 수 있다. </p>
<button id="close">상세 설명 닫기</button>
</div>
</div>
<script>
document.querySelector('#open').onclick = function() {
document.querySelector('#desc').style.display = "block"; // 상세 설명 부분을 화면에 표시
document.querySelector('#open').style.display = "none"; // '상세 설명 보기' 단추를 화면에서 감춤
}
document.querySelector('#close').onclick = function() {
document.querySelector('#desc').style.display = "none"; // 상세 설명 부분을 화면에서 감춤
document.querySelector('#open').style.display = "block"; // '상세 설명 보기' 단추를 화면에 표시
}
</script>
</body>
|
cs |
출처 : DO it HTML +CSS+ 자바스크립트 웹 표준의 정석 [이지스퍼블리싱 (고경희)]
'Web Project > Java Script' 카테고리의 다른 글
| 함수와 변수 (0) | 2021.03.17 |
|---|---|
| 자바 스크립트 개요 (0) | 2021.03.16 |
'Web Project/Java Script' Related Articles
more
Comments