JS를 이용한 이벤트
자바스크립트를 이용하여 HTML의 요소를 조작하여 보다 생동감 넘치는 화면을 만들어 낼 수 있다.
Html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initila-scale=1.0" />
<link rel="stylesheet" href="style.css">
<title>Momentum</title>
</head>
<body>
<div class="hello">
<h1>Grab me!</h1>
</div>
<div class="hello">
<h1>Grab me!</h1>
</div>
<div class="hello">
<h1>Grab me!</h1>
</div>
<script src="app1.js"></script>
</body>
</html>html 안에 body태그를 살펴보면
div태그를 이용하여 모두가 class는 hello를 가지고 있고
그 안에 있는 h1태크에는 모두 Grab Me!라는 문장이 적혀있다.
이 html코드가 표현된 초기의 모습은
위와 같이 Grab me! 가 3번 적혀있는 화면일 것이다.
이제 JS코드로 한 번 가보자.
JS
const title = document.querySelector((".hello h1 "))
# hello 클래스안에 h1태그를 지정(선택)
function handleTitleClick(){
title.style.color= "blue";
}
#선택된 태그가 클릭되었을 때
function handleTitleEnter(){
title.innerText = "Hi";
}
#선택된 태그와 마우스가 만났을 때
function handleTitleLeave(){
title.innerText = "Bye";
}
#선택된 태그와 마우스가 헤어질 때
title.addEventListener("click", handleTitleClick);
title.addEventListener("mouseenter", handleTitleEnter);
title.addEventListener("mouseleave", handleTitleLeave);
document.querySelector
위에서부터 한 줄 한 줄 차근차근 설명을 해보자면
const title = document.querySelector((".hello h1 "))위 코드는 title이라는 상수에
document.querySelector를 이용하여 태그를 지정해주는 역할을 해준다.
document.querySelector는 css선택자방식으로 요소를 집어낼 수 있다.
하지만 document.querySelector는 여러가지의 요소를 모두 집어내는 것이 아닌
최초로 만난 단 하나의 태그만 지정할 수 있다.
즉, 가장 처음에 나온 hello 클래스 안에 있는 h1태그만 지정할 수 있는 것이다.
여러 개의 요소를 선택하기 위해서는
Document.querySelectorAll()
를 이용하여 리스트 형태로 모두 받아올 수 있긴 하다.
Function
이제 함수들에 대해서 설명을 하자면
function handleTitleClick(){
title.style.color= "blue";
}
function handleTitleEnter(){
title.innerText = "Hi";
}
function handleTitleLeave(){
title.innerText = "Bye";
}handleTitleClick가 실행된다면 해당 선택된 태그가 파란색으로 변경되고
handleTitleEnter가 실행된다면 해당 선택된 태그의 내용이 Hi로 변경되고
handleTitleLeave가 실행된다면 해당 선택된 태그의 내용이 bye로 변경되는 간단한 내용의 함수들이다.
addEventListener
EventTarget.addEventListener()
EventTarget의 addEventListener() 메서드는 지정한 이벤트가 대상에 전달될 때마다 호출할 함수를 설정합니다. 일반적인 대상은 Element, Document, Window지만, XMLHttpRequest와 같이 이벤트를 지원하는 모든 객체를 대상으로 지정할 수 있습니다.
addEventListener()는 EventTarget의 주어진 이벤트 유형에, EventListener를 구현한 함수 또는 객체를 이벤트 처리기 목록에 추가해 작동합니다.
출처:https://developer.mozilla.org/ko/docs/Web/API/EventTarget/addEventListener
EventTarget.addEventListener() - Web API | MDN
EventTarget의 addEventListener() 메서드는 지정한 이벤트가 대상에 전달될 때마다 호출할 함수를 설정합니다.
developer.mozilla.org
쉽게 설명하자면 설정한 대상에 대해 특정한 이벤트가 발생하면 함수를 호출하는 방식으로
이해하면 좋을 거 같다.
코드를 통해 설명하자면
target.addEventListener(type, listener[, options]);target.addEventListener() 안에 해당 이벤트와 함수를 매개변수로 넣어주면 된다.
title.addEventListener("click", handleTitleClick);
#타겟을 클릭하면 실행
title.addEventListener("mouseenter", handleTitleEnter);
#타겟에 마우스가 들어가면 실행
title.addEventListener("mouseleave", handleTitleLeave);
#타켓에 마우스가 나가면 실행이때 매개변수로 들어가는 함수 뒤에 ()가 들어가지 않는 이유는
()가 들어가게 되면 우리가 원하는 이벤트가 성공했을 때에만 실행되지 않고
코드가 바로 실행되어 버리게 된다.
우리가 원하는 이벤트가 성공했을 때에만 함수가 호출되도록 하기 위해선
()를 붙이면 안 된다.
초기화면에서 맨 첫 번째 Gram me! 에 마우스를 다가가면
Hi로 바뀌고 다시 마우스가 멀어지면
Bye로 바뀐다.
이때 Bye를 클릭하면
파란색으로 바뀐다.
여러 가지 이벤트 유형들은
https://developer.mozilla.org/ko/docs/Web/Events
이벤트 참조 | MDN
DOM 이벤트는 발생한 흥미로운 것을 코드에 알리기 위해 전달됩니다. 각 이벤트는 Event 인터페이스를 기반으로한 객체에 의해 표현되며 발생한 것에 대한 부가적인 정보를 얻는데 사용되는 추가
developer.mozilla.org
에서 찾아보면 좋을 것 같다.
'JS' 카테고리의 다른 글
| Booleans(불린), undefined, null (0) | 2021.12.14 |
|---|---|
| 변수 (0) | 2021.12.02 |
| 기본적인 데이터 타입 (0) | 2021.12.02 |
