###########################################################################
###########################################################################
7장. 이벤트
###########################################################################
1. 이벤트 개요
1> 용어정리
가. 이벤트(event)
- 사용자 및 시스템(웹브라우저)이 특정상황에 발생시키는 사건(동작) 의미.
ex>
사용자가 마우스를 이용해서 버튼을 클릭/더블클릭/드래그/마우스오버/...
사용자가 키보드를 이용해서 input 태그에 값을 입력...
시스템(웹브라우저)가 window(창) 에 html 랜더링하기 위해서
DOM 트리를 만드는데, DOM 트리가 모두 완성됨을 알 수 있는 정보를 얻을 수 있음.
나. 이벤트타입(event type): 이벤트 종류
마우스 이용: click, change, mouseover, mouseout, dbclick, ...
키보드 이용: keyup, keydown, keypress
포커스 관련: focus, blur(포커스 해제)
submit 버튼: submit
시스템 관련: load
다. 이벤트 핸들러(event handler)
- 이벤트가 발생했을 때 실제로 처리하는 코드를 가진 함수 의미.
- ex>
function fun() {}
var fun = function(){};
라. 이벤트 소스(event source)
- 이벤트가 발생된 태그(버튼)
2> 이벤트 처리 방법 (이벤트소스와 이벤트 핸들러 연결작업)
가. DOM Level 0
- 인라인 방식
=> html 시작태그에서 연결
=> 시작태그에서 on이벤트타입으로 된 속성이용
ex>
<button onClick="함수()"></button> ==> HTMLButtonElemnet 객체관리(속성,메서드)
<a href="daum"></a> ==> HTMLAnchorElemnet 객체관리
=> 특징은 html 과 JS 분리가 안된 방식으로 권장 안함.
- 고전 방식
=> 특징은 html 과 JS 분리해서 이벤트처리가 됨
=> JS 에서 이벤트소스를 얻고 on이벤트타입을 지정해서 처리
문법:
- JS
이벤트소스.onClick = function(){};
이벤트소스.href = "naver";
- html
<button id="x">Ok</button>
<button id="y">Ok2</button>
=> 이벤트소스 얻는 방법 (button)
document.메서드() 이용
ex>
요소 하나 반환하는 경우
- var result = document.getElementById("x");
..
- var result = document.querySelector("css의 선택자문법");
css 의 선택자문법: #id, .class, 태그명, [속성명], 부모 > 자식,
요소 여러개 반환하는 경우(배열로 반환)
- var result = document.querySelectorAll("css 의 선택자문법");
css 의 선택자문법: #id, .class, 태그명, [속성명], 부모 > 자식,
나. DOM Level 2
=> 특징은 html 과 JS 분리해서 이벤트처리가 됨.
=> JS 에서 이벤트소스를 얻고 addEvenetListener() 메서드로 이벤트 처리함.
문법:
JS: 이벤트소스.onclick = function(){}; // DOM Level 0
JS: 이벤트소스.addEvenetListener("이벤트타입", 이벤트핸들러, boolean(false)); // DOM Level 2
==> document.querySelector("#x").addEvenetListener("click", function(){}); // 콜백함수
var fun = function(){};
document.querySelector("#x").addEvenetListener("click", fun); // 콜백함수
html: <button id="x">OK</button>
==> useCapture 개요
- 기본값은 false
- 이벤트 전파와 관련된 동작방식을 변경하는 용도.
- 이벤트전파는 캡처링(부모->자식) & 버블링(자식->부모) 두가지가 있다.
a. 자식 ---> 부모
- 버블링(bubbling) 이라고 부름
b. 부모 ---> 자식
- 캡처링(capturing) 이라고 부름
- useCapture 값을 true 로 지정하면 부모 --> 자식으로 전파(캡처링(capturing))으로 동작.
- useCapture 값을 false 로 지정하면 자식 --> 부모으로 전파(버블링(bubbling)) 으로 동작.
==> 이벤트 전파되는 것을 방지가능하다.(event 객체이용)(*)
- 이벤트객체의 stopPropagation() 이용. (event 전파방지 메서드)
ex>
event.stopPropagation();
3> 이벤트 객체(*)
- 이벤트소소에서 발생되는 이벤트 정보를 관리하는 객체.
- 이벤트 객체를 사용해서 다양한 작업을 할 수 있다.
- 이벤트 객체를 얻는 방법은
이벤트 핸들러(함수) 에서 event 변수명으로 얻어온다.
ex>
function fun() {
console.log(event);
}
- 속성과 메서드가 제공됨.
속성: event.target
메서드:
-> 이벤트전파방지: event.stopPropagation();
-> 기본동작방지: event.preventDefault();
ex> <form> 태그의 submit 기능
<!DOCTYPE html>
<html lang="en">
<head>
<title>js11_form태그의기본동작방지_preventDefault메서드</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
// DOM Level 0
function go() {
// console 로 하면 출력됬다가 submit 되기에 없어짐 alert 권장.
// alert("go");
// 응용
if (false) {
// id 와 pw 일치하면 전환
} else { // id 와 pw 일치하지 않으면 전환x
// 기본동작방지 - 화면전환 방지
event.preventDefault();
alert("id 와 pw 를 입력하세요.");
}
}
// DOM Level 2
window.onload = init;
function init() {
var form = document.querySelector("#myForm");
form.addEventListener("submit", function () {
if (false) {
// id 와 pw 일치하면 전환
} else { // id 와 pw 일치하지 않으면 전환x
// 기본동작방지 - 화면전환 방지
event.preventDefault();
alert("id 와 pw 를 입력하세요.");
}
});
}
</script>
</head>
<body>
<h1>DOM Level 0 - 인라인방식</h1>
<form action="target.html" onsubmit="go()">
userid: <input type="text" name="userid"><br>
passwd: <input type="text" name="passwd"><br>
<input type="submit" value="로그인">
</form>
<h1>DOM Level 2</h1>
<form action="target.html" id="myForm">
userid: <input type="text" name="userid"><br>
passwd: <input type="text" name="passwd"><br>
<input type="submit" value="로그인">
</form>
</body>
</html>'Programming > HTML & CSS & JavaScript' 카테고리의 다른 글
| js 6일차 - 클래스, 모듈 (0) | 2024.05.16 |
|---|---|
| js 5일차 - DOM(DOM, 객체분해할당) (0) | 2024.05.09 |
| js 4일차 - event(1) (0) | 2024.05.08 |
| js 4일차 - 함수(2)(arrow, generator, 즉시실행함수) (0) | 2024.05.08 |
| js 3일차 - 객체(3) 함수(1) (0) | 2024.05.07 |