오늘 강의에서는 EventHandler에 대해 간단히 알아보았다.
지난 강의 에서 HTML의 엘리먼트를 자바스크립트에서 접근하는 방법으로
ID 로 접근하는 document.getElementById()
CLASS 로 접근하는 document.querySelector()
오늘은 CLASS 이름으로 엘리먼트에 접근해서 이벤트핸들러를 적용해보았다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<!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>
</head>
<body>
<div class="hello">
<h1>Good bye~!</h1>
</div>
<script src="apps.js"></script>
</body>
</html>
|
cs |
위와 같이 HTML 페이지가 작성 돼 있을 때
div 태그안의 h1태그에 접근하는 방법은 아래와 같다.
|
1
|
const h1 = document.querySelector("div.hello:first-child h1");
|
cs |
h1의 란 상수형 변수를 만들어주고 <div>태그 중 class="hello" 라는 이름을 가진 첫번째 자식 <h1>을 가리킨다는 의미.
(니코쌤 강의에서는 document.getElementByID 보다 위의 것을 쓴다고 하는데 이유는 잘..)
이제 이벤트 핸들러를 적용해보자.
마우스 클릭을 했을 때 어떤 반응?!이 일어나게 해보자.
작성 방법은 두 가지이다.
|
1
2
3
4
5
|
function handleTitleClick(){
h1.style.color = "blue";
}
h1.addEventListener("click", handleTitleClick);
h1.onclick = handleTitleClick;
|
cs |
<h1> 엘리먼트를 클릭 했을 때 폰트 컬러를 blue로 바꿔주는 함수가 실행된다.
4번, 5번 라인 둘 다 해당 엘리먼트를 클릭했을 때 위의 함수를 실행하게 작성 돼 있다.
(니코쌤 강의에서는 위의 addEventListener를 더 좋아한다고 했다. 이유는 잘..)
근데 두 가지 차이 점은 잘 모르겠다.
console.dir(h1); 으로 콘솔창에서 확인하면 5번 라인과 같이 작성했을 땐 값이 추가된게 보이는데,
4번 라인 처럼 작성했을 때는 확인을 못했다.
클릭했을 때 뿐만 아니라 다양한 이벤트 핸들러가 존재한다.
엘리먼트에 마우스를 올려놓았을 때
엘리먼트에서마우스가 떠날 때
브라우저 창 사이즈를 조절할 때
복사를 하려할 때 등등
JavaScirpt 이벤트란?
DOM에서 특정 이벤트가 발생되면 우리는 JavaScript 이벤트 객체에서 이를 확인할 수 있다.
DOM 구조에서 이벤트는 매우 다양하지만, 자주 쓰는 이벤트는 아래와 같다.
- 포커스 이벤트(focus, blur)
- 폼 이벤트(reset, submit)
- 뷰 이벤트(scroll, resize)
- 키보드 이벤트(keydown, keyup)
- 마우스 이벤트(mouseenter, mouseover, click, dbclick, mouseleave)
- 드래그 앤 드롭 이벤트 (dragstart, drag, dragleave, drop)
%%이벤트 리스너%%
이벤트 리스너는 DOM 객체에서 이벤트가 발생할 경우 해당 이벤트 처리 핸들러를 추가할 수 있는 오브젝트이다.
이벤트 리스너를 이용하면 특정 DOM에 위에 말한 Javascirpt 이벤트가 발생할 때 특정 함수를 호출한다.
%이벤트 리스너 등록하기
특정 DOM요소에 이벤트 리스너를 등록할 때는 addEventListener를 사용한다.
DOM객체. addEventListener(이벤트명, 실행할 함수명, 옵션)
각 매개변수를 살펴보면
이벤트명 : Javascript에서 발생할 수 있는 이벤트 명을 입력한다.
함수명 : 해당 변수는 생략 가능하며, 해당 이벤트가 발생할 때 실행할 함수 명을 입력한다.
옵션: 옵션은 생략이 가능하며, 자식과 부모 요소에서 발생하는 버블링을 제어하기 위한 옵션이다.
%이벤트 리스너 삭제하기
이벤트 리스너의 경우 웹 애플리케이션 메모리 누수의 원인이 될 수 있다.
더 이상 해당 이벤트 리스너가 필요 없다고 하면 반드시 추가된 이벤트 리스너는 반드시 삭제해주어야 한다.
특정 페이지에서만 사용하는 이벤트 리스너라면 해당 페이지를 떠날 때 이벤트 리스너를 삭제해준다.
이벤트 리스너를 삭제할 땐 removeEventListener을 이용한다.
DOM객체. removeEventListener(이벤트명, 실행했던 함수명);
'웹개발 > Javascript' 카테고리의 다른 글
| Javascript - 6 - getElementById (0) | 2022.12.23 |
|---|---|
| Javascript - 5 (0) | 2022.12.22 |
| Javascript - 4 (0) | 2022.12.21 |
| Javascript - 3 (0) | 2022.12.20 |
| Javascript - 2 (0) | 2022.12.19 |