[ 목차 ]
728x90
반응형
✔ 이벤트(Event)
- 웹 브라우저가 알려주는 HTML 요소에 대한 사건을 발생
- 웹 페이지에 사용된 자바스크립트는 발생한 이벤트에 반응하여 특정 동작을 수행할 수 있음
- 자바스크립트는 비동기식 이벤트 중심의 프로그래밍 모델
<input type ="button" onclick="sendit()" value="확인">
--------- -------- --------
이벤트타겟 이벤트타입 이벤트리스너
이벤트타입(Event Type)
- 발생한 이벤트의 종류를 나타내는 문자열로 이벤트명이라고도 함
- 키보드, 마우스, HTML, DOM, window 객체등을 처리하는 이벤트 제공
- https://developer.mozilla.org/ko/docs/Web/Events
이벤트타겟(Event Target)
- 이벤트가 일어날 객체를 의미
<!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>eventtype</title>
<script>
window.onload = function(){//html이 전부 실행되고 난 후
const text = document.getElementById('text');
text.innerHTML = "<b style = 'color:deeppink;'>HTML 문서가 모두 로드되었습니다.</b>"
}
function changeText(el){
el.innerHTML = "<b style = 'color:deepskyblue;'>짠! 문자열 변경!😁</b>"
}
</script>
</head>
<body>
<h2>eventtype</h2>
<p id="text"></p>
<p onclick="changeText(this)">문자열을 클릭하세요</p>
<!-- this 자기자신 p테그 -->
</body>
</html>
✔ 이벤트리스너(Event Listener)
- 이벤트가 발생했을 때 그 처리를 담당하는 함수
- 이벤트 핸들러라고도 부름
- 지정된 타입의 이벤트가 특정 요소에서 발생하면 웹 브라우저는 그 요소에 등록된 이벤트리스너를 실행
이벤트 등록
객체.addEventListener(이벤트타입, 이벤트리스너);
이벤트 제거
객체.removeEventListner(이벤트타입, 이벤트리스너);
- 이벤트가 발생했을 때 그 처리를 담당하는 함수
- 이벤트 핸들러라고도 부름
- 지정된 타입의 이벤트가 특정 요소에서 발생하면 웹 브라우저는 그 요소에 등록된 이벤트리스너를 실행
이벤트 등록
객체.addEventListener(이벤트타입, 이벤트리스너);
이벤트 제거
객체.removeEventListner(이벤트타입, 이벤트리스너);
<!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>
window.onload = function(){
const btn = document.getElementById('eventBtn');
btn.addEventListener('click',clickBtn);
btn.addEventListener('mouseover',mouseOverBtn);
btn.addEventListener('mouseout', mouseOutBtn);
}
function clickBtn(){
document.getElementById('text').innerHTML = "<b>버튼을 클릭했어요</b>";
}
function mouseOverBtn(){
document.getElementById('text').innerHTML = "<b>버튼 위에 커서가 올라갔어요</b>";
}
function mouseOutBtn(){
document.getElementById('text').innerHTML = "<b>버튼 위에 커서가 나갔어요</b>";
}
function delEvent(){
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><button id ="delBtn" onclick="delEvent()">이벤트 삭제 버튼</button></p>
<p id="text"></p>
</body>
</html>
✔ 이벤트 객체(Event Object)
- 특정 타입의 이벤트와 관련이 있는 객체
- 이벤트 겍체는 해당 타입의 이벤트에 대한 상세 정보를 저장하고 있음
- 모든 이벤트 객체는 이벤트의 타입을 나타내는 type 프로퍼티와 이벤트 대상을 나타내는 target 프로퍼티를 가지고 있음
- 이벤트 겍체는 이벤트 리스너가 호출될 때 인수로 전달
function sendit(e){ //e는 이벤트 객체
console.log(e.target); // 이벤트 타겟(button)
console.log(e,type); // 이벤트 타입(onclick)
}
<input type = "button" onclick = "sendit()" value = "완료">
<!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>이벤트 객체1</title>
<script>
window.onload = function(){
const btn = document.getElementById('btn');
btn.addEventListener('click', clickBtn);
}
function clickBtn(e){
console.log(e.target); // button
console.log(e.target.id); // btn
console.log(e.target.value);// 확인
console.log(e.type); //click
}
</script>
</head>
<body>
<h2>이벤트 객체1</h2>
<input type="button" id="btn" value ="확인">
</body>
</html>
<!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>이벤트객체2</title>
<script>
window.onload = function(){
const btn1 = document.getElementById('btn1');
const btn2 = document.getElementById('btn2');
const btn3 = document.getElementById('btn3');
btn1.addEventListener('click', clickBtn);
btn2.addEventListener('click', clickBtn);
btn3.addEventListener('click', (e)=>{
console.log(`e.target.id :${e.target.id}`);
console.log(`버튼튼 3이 눌렸어요`);
});
}
function clickBtn(e){ //가독성을 높이기 위해 switch문을 사용하였다. 버튼이 100개면 어떻게 할거지??
switch(e.target.id){
case 'btn1':arguments
console.log('버튼 1이 눌렸어요!');
break;
case 'btn2':arguments
console.log('버튼 2이 눌렸어요!');
break;
}
}
</script>
</head>
<body>
<h2>이벤트객체2</h2>
<input type="button" id = "btn1" value="버튼1">
<input type="button" id = "btn2" value="버튼2">
<input type="button" id = "btn3" value="버튼3">
</body>
</html>
반응형
'JavaScript' 카테고리의 다른 글
| JavaScript(set, map, operator) (0) | 2022.11.10 |
|---|---|
| JavaScript(이벤트전파, iterable, generator, spread) (0) | 2022.11.10 |
| JavaScript (class, extends, wrapper) (0) | 2022.11.09 |
| JavaScript - function, object 예제 (0) | 2022.11.09 |
| JavaScript(정규식, 회원가입 페이지) (1) | 2022.11.09 |
