DOTY
JS_4 (Events & Handler) 본문
무언가 변경이 되었을때 함수를 실행하고자 한다.
예를 들어보자.
function handelResize() {
console.log("화면 크기가 바뀌었어유!!!");
}
window.addEventListener("resize", handelResize);resize는 브라우저의 크기가 변경됬을 때 를 말한다.
브라우저 크기가 변경되면 handelResize함수를 실행시키게 된다.
이처럼 log찍히는 횟수가 화면 크기가 바뀔때 마다 늘어난다.
그만큼 함수가 불린것이다.
function handelResize(event) {
console.log(event);
}
window.addEventListener("resize", handelResize);다음과 같은 경우가 있다.
그런데 event가 여기서는 어떤걸 말하는건지....
.....
이 event는 JS에서 온 event를 말한다. event를 다루는 함수를 사용할 때마다 불리게 된다.
여기서는 resize라는 event를 자동으로 객체에 붙이게 된다.
이런것은 나중에 링크를 만들거나 등등 다양한 Event에도 적용시킬 수 있다.
또 다른것을 보자.
const title = document.querySelector("#title");
function HandleDown() {
title.style.color = "green";
}
function HandleUp() {
title.style.color = "yellow";
}
title.addEventListener("mousedown", HandleDown);
title.addEventListener("mouseup", HandleUp);mousedown : 마우스를 눌렀을 때
mouseup : 마우스를 뗏을 때
ID가 title인 것만 위와 같은 결과가 나온다.
지금까지 한 것들을 종합해보자.
다음과 같은 코드들이 있다.
<HTML>
<!DOCTYPE html>
<html lang="kor">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello JS!</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<h1 id = "title" class = "btn">This is my first JS!</h1>
<script src="index.js"></script>
</body>
</html><CSS>
body {
background-color: tomato;
}
.btn {
cursor: pointer;
}
<JS>
const title = document.querySelector("#title");
const CLICKED_CLASS = "clicked";
function handleClick() {
const currentClass = title.className;
if(currentClass !== CLICKED_CLASS) {
title.className = CLICKED_CLASS;
console.log("Hi");
} else {
title.className = "";
}
}
function init() {
title.addEventListener("click", handleClick);
}
init();간단하게 설명하자면, ID가 title인 곳을 클릭했을때 handleClick과 같은 이벤트가 실행된다.
자세히 설명 하자면 기본 화면은 다음과 같다.
마우스 커서가 손가락 모양으로 바뀐다. 클릭이 가능해보인다. 이를 클릭하면?
어떻게 된것일까.....??? 소스를 확인해보자.
class 명이 "clicked"로 바뀌면서 더이상은 CSS에서 .btn으로 설정한 내용은 더이상 class가 "btn"이 아니므로
cursor : pointer; 가 더이상은 적용되지 않는다.
이를 좀 더 간단하게 classList를 사용할 수 있다.
const title = document.querySelector("#title");
const CLICKED_CLASS = "btn";
function handleClick() {
title.classList.toggle(CLICKED_CLASS);
}
function init() {
title.addEventListener("click", handleClick);
}
init();(CLICKED_CLASS가 btn으로 바뀌었음 주의)
classList에 대해서는 아래의 링크를 참고하자.
이를 이용해서 더욱 다양한 것을 만들수 있을텐데~~~~~~~~~~~~~~
흠... 뭔가 더 재밌는 것이 나올 듯 하다..!
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
모든건 역시.. 여기로....ㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎ
developer.mozilla.org/ko/docs/Web/Events
이벤트 참조
DOM 이벤트는 발생한 흥미로운 것을 코드에 알리기 위해 전달됩니다. 각 이벤트는 Event 인터페이스를 기반으로한 객체에 의해 표현되며 발생한 것에 대한 부가적인 정보를 얻는데 사용되는 추가
developer.mozilla.org
또한 다양한 ClassList도 확인 가능하다.
developer.mozilla.org/ko/docs/Web/API/Element/classList
Element.classList
Element.classList는 엘리먼트의 클래스 속성의 컬렉션인 활성 DOMTokenList를 반환하는 읽기 전용 프로퍼티이다.
developer.mozilla.org
'WEB > JS' 카테고리의 다른 글
| JS_6 (createElement, appendChild, +Saving localStorage) (0) | 2020.11.01 |
|---|---|
| JS_5 (SetInterval, ect.) (0) | 2020.10.30 |
| JS_3 (DOM) (0) | 2020.10.28 |
| JS_2 (Array, Object) (0) | 2020.10.27 |
| JS_1 (script) (0) | 2020.10.26 |
