이벤트 처리(Event Handle)
이벤트(Event)는 태그(박스모델 - Element 객체)에서 발생되는 다양한 사건을 의미한다.
태그에서 발생된 이벤트에 대한 처리를 자바스크립트 명령으로 작성하여 실행한다.
이벤트 처리(Event Handle)를 통해 사용자의 동작에 따른 상호작용, 웹 페이지의 상태 변화에 따른 동적인 처리 등을 구현할 수 있다.
1. 태그의 이벤트 리스너 속성(onXXX)의 속성값으로 이벤트 처리 명령을 작성할 수 있다.
→ 태그에서 이벤트 리스너 속성의 이벤트가 속성값으로 설정된 명령을 실행한다.
<button type="button" onclick="eventHandle();">버튼-1</button>
<script>
//이벤트 처리 함수
function eventHandle() {
alert('이벤트 처리 명령 실행');
}
</script>
2. 태그를 검색하여 Element 객체로 제공받아 Element 객체의 이벤트 리스너 속성에 이벤트 처리 함수를 등록할 수 있다.
→ 태그에서 이벤트 리스너 속성의 이벤트가 발생될 이벤트 처리 함수를 호출한다.
<button type="button" id="eventBtn">버튼-2</button>
<script>
//Element 객체의 이벤트 리스너 속성에 이벤트 처리 함수 저장(등록)
document.getElementById("eventBtn").onclick=function() {
alert('이벤트 처리 명령 실행-2');
}
</script>
3. 태그를 검색하여 Element 객체로 제공받아 addEventListener() 메소드를 호출하여 이벤트 처리 함수를 등록
→ 태그에서 addEventListener() 메소드의 이벤트가 발생될 이벤트 처리 함수를 호출한다.
Node.addEventListener(eventName, callback[, useCpatuer]) : Node(Element) 객체에서 이벤트(eventName)가 발생될 경우 콜백함수(이벤트 처리 함수)를 호출하는 메소드
<button type="button" id="eventBtn3">버튼-3</button>
<script>
document.getElementById("eventBtn3").addEventListener("click", function(e) {
alert('이벤트 처리 명령 실행-3');
});
</script>
this 키워드
이벤트 처리 함수에서 이벤트가 발생된 태그(Element 객체)를 표현하기 위해 this 키워드를 사용한다.
예시
[html 및 css 태그]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
<style type="text/css">
#displayDiv {
width: 600px;
font-size: 2em;
font-weight: bold;
text-align: center;
border: 1px solid red;
}
ul li {
width: 400px;
margin: 10px;
text-align: center;
font-size: 1.5em;
font-weight: bold;
border: 1px solid blue;
list-style-type: none;
}
</style>
</head>
<body>
<h1>이벤트(Event) - this</h1>
<hr>
<div id="displayDiv">이벤트 처리</div>
<ul>
<li>메뉴1</li>
<li>메뉴2</li>
<li>메뉴3</li>
</ul>
</body>
</html>
[script 태그]
div 태그에 클릭 이벤트가 발생되었을 때 style 속성값 변경하기
1) Node(Element) 객체의 프로퍼티로 태그의 속성을 표현하기
document.getElementById("displayDiv").onclick=function() {
document.getElementById("displayDiv").style="color: green;";
}
2) this 키워드 사용
document.getElementById("displayDiv").onclick=function() {
//this 키워드에는 이벤트가 발생된 태그의 Node(Element) 객체가 자동 저장
this.style="color: green;";
}
<li> 요소들을 가져와 각각 클릭 이벤트 처리 함수를 추가하기 (클릭한 <li>요소의 텍스트 색상을 오렌지색으로 변경)
[script 태그]
1번째 방법)
var liList=document.getElementsByTagName("li");
//1번째 방법
liList.item(0).onclick=function() {
//liList.item(0).style="color: orange;";
this.style="color: orange;";
}
liList.item(1).onclick=function() {
//liList.item(1).style="color: orange;";
this.style="color: orange;";
}
liList.item(2).onclick=function() {
//liList.item(2).style="color: orange;";
this.style="color: orange;";
}
2번째 방법)
var liList = document.getElementsByTagName("li");
for (var i = 0; i < liList.length; i++) {
liList[i].onclick = function() {
};
}
위의 코드는 문제점이 있다. onclick 함수 내에서 i 변수에 접근하려고 할 때, for 루프의 반복이 완료된 후에 클릭 이벤트가 발생할 때 i의 최종값만을 참조하게 되기 때문에, 예상과 다르게 동작할 수 있기 때문이다.
따라서, this 키워드를 사용해 이를 해결할 수 있다.
var liList = document.getElementsByTagName("li");
for (var i = 0; i < liList.length; i++) {
this.style="color:orange";
};
}
클릭 이벤트 처리 함수 내에서 this를 사용하여 해당 요소의 스타일을 변경한다.
태그의 기본 이벤트 처리 기능
태그는 특정 이벤트에 대한 처리 기능을 제공한다.
대표적으로 a 태그, input 태그, button 태그, form 태그 등이 있다.
자바스크립트를 이용해 페이지 이동하는 기능을 구현할 수 있다.
<button type="button" id="daum">다음(Daum)으로 이동</button>
<script>
//버튼을 클릭하면 웹사이트로 이동
document.getElementById("daum").onclick=function() {
location.href="https://www.daum.net";
}
</script>
a 태그의 기능을 이용하면 자바스크립트로 별도의 이벤트 처리 기능을 구현할 필요 없이 페이지 이동이 가능하다.
//a 태그는 click 이벤트가 발생될 경우 href 속성값을 통해 설정된 페이지로 이동시킨다.
<a href="https://www.naver.com" id="naver"><button type="button">네이버(Naver)으로 이동</button></a>
event.preventDefault() 메소드
태그의 기본 이벤트 처리 기능을 사용하고 싶지 않은 경우에는 event.preventDefault() 메소드를 이용해 태그에 설정된 기본 이벤트 명령을 취소할 수 있다.
event 객체 : 태그에서 발생된 이벤트 정보를 저장한 객체
→ 이벤트 처리함수가 호출되면 자동으로 생성되며 이벤트 처리 함수가 종료되면 자동으로 소멸된다.
document.getElementById("naver").onclick=function() {
event.preventDefault();
} //a태그가 가지고 있는 기본적인 이벤트인 페이지 이동 기능을 취소
'학원 > 복기' 카테고리의 다른 글
| [JavaScript] addEventListener 메소드 (0) | 2023.06.11 |
|---|---|
| [JavaScript] 이벤트 전파(Event Propagation) (0) | 2023.06.11 |
| [JavaScript] DOM(Document Object Model) : 문서 객체 모델 / Element 객체 (0) | 2023.06.09 |
| [JavaScript] BOM(Browser Object Model) (0) | 2023.06.08 |
| [JavaScript] Date 클래스 함수 / Math 클래스 함수 / JSON 클래스 함수 (0) | 2023.06.08 |
