이벤트(Event)
- 웹 브라우저가 알려주는 HTML 요소에 대한 사건의 발생
- 자바스크립트는 발생한 이벤트에 반응하여 특정 동작 수행
이벤트 타입
- 발생한 이벤트의 종류
- 폼, 키보드, 마우스, HTML DOM, Window 객체 등
|
이벤트
|
설명
|
|
click
|
마우스 클릭 시
|
|
dbclick
|
마우스 더블 클릭 시 |
|
mouseenter
|
마우스를 요소 위에 올리면
|
|
mouseover
|
마우스를 요소 위에 올리면 (자식 노드도 영향) |
|
mouseout
|
마우스가 요소 밖으로 벗어날 때
|
|
mousedown
|
마우스로 요소를 눌렀을 때
|
|
focus
|
요소에 포커스가 이동되었을 때
|
|
keypress
|
키를 누르는 순간에 발생, 그리고 누르고 있는 동안 계속 발생
|
|
keydown
|
키를 누를 때
|
|
keyup
|
키를 눌렀다가 떼는 순간
|
|
load
|
페이지 로딩이 완료되었을 때
|
|
resize
|
요소 사이즈를 조절할 때
|
|
scroll
|
스크롤바를 움직였을 때
|
|
unload
|
링크를 클릭해서 다른 페이지로 이동하거나 브라우저나 브라우저 탭을 닫았을 때
|
|
change
|
요소 값이 변경될 때 |
// 마우스 클릭 이벤트
<p onclick="changeText(this)">클릭하세요!</p>
<script>
function changeText(element){
element.innerHTML="안녕하세요!";
}
</script>
이벤트 핸들러
- 이벤트가 발생했을 때 그 처리를 담당하는 함수
- 지정된 이벤트가 발생하면 웹 브라우저는 그 요소에 등록된 이벤트 핸들러를 실행
이벤트 핸들러 등록 방법
- 인라인 방식
- 프로퍼티 방식
- addEventListener()
1. 인라인 방식
<!DOCTYPE html>
<html>
<body>
<button onclick="alert('Hello!');">클릭해보세요</button>
</body>
</html>
2. 프로퍼티 방식
// HTML 문서가 로드될 때 실행
window.onload = function(){
// 아이디가 "text"인 요소 선택
var text = document.getElementById("text");
text.innerHTML="HTML 문서가 로드되었습니다.";
}
3. addEventListener()
// 아이디가 "id"인 요소를 선택
var id = document.getElementById('id');
// click 할 시 텍스트를 보여주는 함수
function showText() {
document.getElementById("text").innerHTML = "안녕하세요";
};
// 3. 선택한 요소에 "click" 이벤트 핸들러를 등록
id.addEventListener("click",showText);
'Web > Java Script' 카테고리의 다른 글
| [JS] 자바스크립트 내장 객체 (0) | 2022.04.22 |
|---|---|
| [JS] 자바스크립트 Hoisting (0) | 2022.04.22 |
| [JS] 자바스크립트 변수 정의 과정 (0) | 2022.04.22 |
| [JS] Node 객체 (0) | 2022.04.14 |
| [JS] 문서 객체 모델 DOM 개념과 자바스크립트 (0) | 2022.04.14 |
댓글