끵뀐꿩긘의 여러가지

[부스트코스]웹 프로그래밍 20. event 본문

부스트코스 - 웹/2. DB 연결 웹 앱

[부스트코스]웹 프로그래밍 20. event

끵뀐꿩긘 2020. 3. 13. 23:25

Event

브라우저에는 많은 이벤트가 발생합니다.

브라우저 화면의 크기를 마우스로 조절할 때도, 스크롤을 할 때도, 마우스로 이동하거나 무언가를 선택할 때도 
이벤트가 발생합니다.

이벤트를 브라우저가 발생시켜주니, 우리는 그때 어떤 일을 하라고 할 일을 등록할 수가 있습니다.

다시 말해, HTML엘리먼트별로 어떤 이벤트(주로 키보드나 마우스 관련)가 발생했을 때 특정 행위를(어떤 일) 하고 싶다면, 대상엘리먼트를 찾고 어떤 일을 등록하면 된다.

그것을 자바스크립트로 구현할 수 있습니다.

 

이벤트 등록

이벤트 등록 표준방법입니다.

 

1
2
3
4
var el = document.querySelector(".outside";
el.addEventListener("click".fuction(){
//do somthing..
}, false);
 cs

 

함수의 두 번째 인자는 함수입니다.

이 함수는 나중에 이벤트가 발생할 때 실행되는 함수로 이벤트핸들러(Event Handler) 또는 이벤트리스너(Event Listener)라고 합니다.

콜백함수는 이벤트가 발생할 때 실행됩니다. 

 

이벤트 객체

브라우저는 이벤트 리스너를 호출할 때, 사용자로부터 어떤 이벤트가 발생했는지에 대한 정보를 담은 이벤트 객체를 생성해서 리스너 함수에 전달합니다.

따라서 이벤트리스너 안에서는 이벤트객체를 활용해서 추가적인 작업을 할 수 있게 됩니다. 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
</head>
<body>
  <div class = "outside"> outside element</div>
    <script>
      var el = document.querySelector('.outside');
      el.addEventListener("click", function(e){
        var target = e.target;
        alert(target.innerText); //target의 내용 출력
        }, false);
    </script>
</body>
</html>
 cs

자바스크립트를 포함한 html 코드를 짜보았습니다. 위에서 배운 이벤트 등록 방법을 활용하여 .outside의 이벤트로 클릭이 입력되었을 때에 target.innerText를 출력하도록 해보았습니다.

div 영역 클릭 전
div 영역 클릭 후
개발자 도구를 통해 event를 받았는지 확인

가장 많이 쓰이는 건 event.target입니다.

event.target은 이벤트가 발생한 element를 가리킵니다. 

element도 객체이므로 안에 nodeName이나 classname과 같이 element가 가진 속성을 사용할 수 있습니다.

 

또다른 이벤트의 목록들은 https://developer.mozilla.org/en-US/docs/Web/Events에서 찾아볼 수 있습니다.

'부스트코스 - 웹 > 2. DB 연결 웹 앱' 카테고리의 다른 글

[부스트코스]웹 프로그래밍 22. JSP(1)  (0) 2020.03.20
[부스트코스]웹 프로그래밍 21. 비동기 AJax 통신 + chrome DevToos  (0) 2020.03.20
[부스트코스]웹 프로그래밍 19. DOM과 querySelector  (0) 2020.03.13
[부스트코스]웹 프로그래밍 18. 전역(window) 객체 메서드  (0) 2020.03.06
[부스트코스]웹 프로그래밍 17. JS 기초(3)-함수  (0) 2020.03.06
'부스트코스 - 웹/2. DB 연결 웹 앱' Related Articles more
Comments