웹 페이지 화면에서 클릭이나 드래그 등의 동작에 반응을 주고 싶을 때 사용하는것이 이벤트 리스너이다. 여기에서는 간단하게 클릭한 정보를 콘솔에 출력하는 실습을 할 것이다.
이벤트:
이벤트는 브라우저가 받는 활동들을 의미한다.Example : 보통 화면이나 요소를 클릭, 드래그, 휠 조정등 다양한 입력들을 이벤트라고한다.
이벤트 리스너(핸들러):
특정한 이벤트가 일어났을때 해당 이벤트에 대한 반응을 의미한다.Example : 검색버튼을 클릭, 로그인버튼을 클릭 등등 다양하다.
학습을 위해서는 아래의 코드를 통해 브라우저로 실행한뒤 직접클릭해보면서 코드를 이해하는게 좋다
JS 파일
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
var el = document.querySelector(".outside1");
//querySelector를 통해서 리스너를 추가할 뷰를 선택한다.
// addEventListener의 함수의 인자와 동작에 대해서는 정식링크를 참조하는 것이 좋다.
//https://developer.mozilla.org/ko/docs/Web/API/EventTarget/addEventListener#%EA%B5%AC%EB%AC%B8
el.addEventListener("click", function(e){
//function에 들어오는 인자는 클릭했을때는 호출한 이벤트의 정보가 있다.
//do something..
var target=e.target;
//target은 어떤것이 클릭되었는지를 전달, 가장많이쓰임
console.log("hellow",target.className,target.nodeName,target.innerText);
}, false);
// See :https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_handler_properties
| cs |
1
2
3
4
5
6
7
8
9
10
11
12
|
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="outside1">outside element</div><br>
</body>
<script src="event_listener.js"></script>
</html>
| cs |
'Web' 카테고리의 다른 글
| CSS - Element가 배치되는 방법들 (0) | 2020.01.18 |
|---|---|
| Servlet - Hellow World 출력하기(intellij) (0) | 2020.01.18 |
| Ajax 통신 정의, 필요성, 예제 (0) | 2020.01.18 |
| JSP(Java Server Page) - 정의, 문법 (0) | 2020.01.18 |
| Scope (유효변수)에 대하여 (0) | 2020.01.18 |