반응형
1) 이벤트란?
- 웹 브라우저가 알려주는 HTML요소에 대한 사건의 발생을 의미한다.
- 웹 페이지에 사용된 자바스크립트는 발생한 이벤트에 반응하여 특정 동작을 수행한다.
- 자바스크립트는 비동기식 이벤트 중심 프로그래밍 모델이라고 한다.
2) 이벤트 타입(Event Type)
- 발생한 이벤트의 종류, 이벤트명이라고도 한다.
- 가장 많이 사용하는 키보드, 마우스, HTML DOM, window객체등을 처리하는 이벤트가 많이 제공된다.
- ex) onClick, onKeypress, onLoad ...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>이벤트타입</title>
<script>
'use strict';
window.onload = function(){
const text = document.getElementById('text');
text.innerHTML = "<b style='color:deeppink;'>HTML문서가 모두 로드되었습니다.</b>";
}
const changeText = function(el){
el.innerHTML = "<b style='color:deepskyblue;'>문자열 내용이 변경되었습니다.</b>";
}
</script>
</head>
<body>
<h2>이벤트타입</h2>
<p id="text"></p>
<p onclick="changeText(this)">문자열을 클릭하세요</p>
</body>
</html>
3) 이벤트 타겟(Event Target)
- 이벤트가 일어날 객체를 뜻한다.
4) 이벤트 리스너(Event Listener)
- 이벤트가 발생했을 때 그 처리를 담당하는 함수를 말한다.
- 이벤트 핸들러라고도 한다.
- 지정된 타입의 이벤트가 특정 요소에서 발생하면 웹 브라우저는 그 요소에 등록된 이벤트 리스너를 실행한다.
<input type="button" onClick="sendit()" value="가입완료">
------- ------- --------
이벤트타겟 이벤트명 이벤트리스너const btn = document.getElementById('testBtn');
btn.addEventListener('click', clickBtn);
---- ------- -------
이벤트타겟 이벤트명 이벤트리스너
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
'use strict';
window.onload = function(){
const btn = document.getElementById('eventBtn');
btn.addEventListener('click',clickBtn);
btn.addEventListener('mouseover',mouseOverBtn);
btn.addEventListener('mouseout',mouseOutBtn);
}
const clickBtn = function(){
document.getElementById('text').innerHTML = '<b>버튼을 클릭했어요.</b>';
}
const mouseOverBtn = function(){
document.getElementById('text').innerHTML = '<b>버튼 위에 마우스가 올라갔어요.</b>';
}
const mouseOutBtn = function(){
document.getElementById('text').innerHTML = '<b>버튼 밖으로 마우스가 나갔어요.</b>';
}
const delEvent = function(){
const btn = document.getElementById('eventBtn');
btn.removeEventListener('click',clickBtn);
btn.removeEventListener('mouseover',mouseOverBtn);
btn.removeEventListener('mouseout',mouseOutBtn);
document.getElementById('text').innerHTML = '<b>이벤트 리스너가 삭제되었습니다.</b>';
}
</script>
</head>
<body>
<h2>이벤트 리스너</h2>
<p><button id="eventBtn">이벤트버튼</button></p>
<p><button id="delBtn" onclick="delEvent()">이벤트 삭제 버튼</button></p>
<p id="text"></p>
</body>
</html>반응형
'Front-End > JavaScript' 카테고리의 다른 글
| [자바스크립트] location 객체, history 객체 설명과 종류 알아보기 (0) | 2021.06.28 |
|---|---|
| [자바스크립트] 이벤트 객체(Event Object), 이벤트 전파 (0) | 2021.06.27 |
| [자바스크립트] 정규표현식 문법, 함수 알아보기 (0) | 2021.06.26 |
| [자바스크립트] 폼(form) 객체 (0) | 2021.06.26 |
| [자바스크립트] 노드(Node) 개요, 종류, 사용법 (0) | 2021.06.26 |
