📗 모던 자바스크립트 Deep Dive | 이벤트 [이벤트 핸들러]

TIL

📗 모던 자바스크립트 Deep Dive | 이벤트 [이벤트 핸들러]

grasinnong 2022. 5. 26. 16:12

용어 정리

- 이벤트 버블링(event bubbling) : 이벤트 타깃 요소에 이벤트가 발생하면, 최상단의 부모 요소까지 각각 할당된 이벤트가 발생되는 것.

- 이벤트 캡처링(event capturing)

3단계의 이벤트 흐름에서 첫 번째 단계이다.

1. 캡처링 단계 : 이벤트가 하위 요소로 전파되는 단계

2. 타깃 단계

3. 버블링 단계

가장 최상위 조상에서 아래(타깃 요소)로 이벤트가 전달되는 단계이다.

이벤트(Event)

브라우저에서 로그인 버튼을 클릭했을 때, 뒤로 가기 버튼을 클릭했을 때 브라우저는 버튼의 역할에 맞게 동작을 수행한다. 사용자가 어떤 사건(버튼 클릭, 더블클릭, enter 등)을 발생시켰을 때 브라우저가 이를 감지하여 이벤트(로그인을 한다, 다음 페이지로 넘긴다 등)를 발생시킨다.

위의 코드는 버튼에 클릭(onclick)이벤트가 발생하였을 때 console.log("button clicked!") 함수가 실행되도록 하는 코드이다. 이벤트에 이벤트 핸들러(함수)를 할당하면, 해당 이벤트가 발생했을 때 브라우저가 이벤트 핸들러를 호출한다.

다양한 이벤트 목록은 아래에서 확인할 수 있다.

이벤트 참조 | MDN

DOM 이벤트는 발생한 흥미로운 것을 코드에 알리기 위해 전달됩니다. 각 이벤트는 Event 인터페이스를 기반으로한 객체에 의해 표현되며 발생한 것에 대한 부가적인 정보를 얻는데 사용되는 추가

developer.mozilla.org

이벤트 핸들러(Event Handler)

이벤트 핸들러는 이벤트가 발생했을 때 실행될 동작이다.

이벤트 핸들러를 등록하는 방법은 3가지가 있다.

1. 속성으로 넣어주기

HTML Event Attributes

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

html event attributes를 이용한 방식이다. 다른 속성처럼 이벤트 속성의 값으로 이벤트 핸들러를 넣어주면 된다.

주의사항 : 함수 할당(함수 참조)이 아닌, 함수 호출을 해주어야 한다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <button onclick="alert('button clicked!')">click!</button>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <button onclick="onclickHandler();">click!</button>
    <script>
      const onclickHandler = () => {
        alert("button clicked!");
      };
    </script>
  </body>
</html>

함수 참조가 아닌, 함수 할당을 하면 함수 결과 값이 이벤트 핸들러로 등록된다.

- 이벤트 핸들러 내부의 this : window 객체

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <button onclick="onclickHandler(this);">click!</button>
    <script>
      const onclickHandler = (val) => {
        console.log(val);//<button onclick="onclickHandler(this);">click!</button>
      };
    </script>
  </body>
</html>

2. 프로퍼티로 등록하기

이벤트를 걸어줄 요소에 이벤트 프로퍼티 값으로 함수를 바인딩하는 방식이다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <button>click!</button>
    <script>
      $target = document.querySelector("button");

      $target.onclick = () => {
        alert("button clicked!");
      };
    </script>
  </body>
</html>

- 이벤트 핸들러 내부의 this : 이벤트를 바인딩한 DOM 요소

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <button class="btn01">click!</button>
    <script>
      $target = document.querySelector(".btn01");

      $target.onclick = function(e){
        console.log(this); //<button class="btn01">click!</button>
        console.log(this === e.currentTarget); //true
      };
    </script>
  </body>
</html>

3. addEventListener 메서드 사용

[구문]

addEventListener(eventType, eventHandler, options, useCapture);

parameter

- type : 이벤트 유형

- eventHandler : 이벤트 핸들러 함수 이름

- options

- capture : 이벤트 캡처링 단계에서 이벤트를 실행할지 설정 | true or false(default : 버블링 단계에서 이벤트 동작)

- once : 딱 한 번만 이벤트를 실행하고 이벤트를 제거할 지 설정 | true or false(default)

- passive : preventDefault()를 호출할지 설정 | true or false(default)

- signal :

- useCapture : 캡처링, 버블링순서 조절 | true or false(default)

return

반환 값 없음.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <button>click!</button>
    <script>
      $target = document.querySelector("button");

      $target.addEventListener("click", () => {
        alert("clicked!");
      });
    </script>
  </body>
</html>

- 이벤트 핸들러 내부의 this : 이벤트를 바인딩한 DOM 요소

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <button>click!</button>
    <script>
      $target = document.querySelector("button");

      $target.addEventListener("click", function(e){
        console.log(this);//<button>click!</button>
        console.log(this === e.currentTarget); //true
      });
    </script>
  </body>
</html>

이벤트 객체

이벤트가 발생하면 👉 이벤트 객체가 생성되고 👉 이벤트핸들러의 첫 번째 인수로 자동으로 담긴다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <button>click!</button>
    <script>
      $target = document.querySelector("button");

      $target.onclick = function(){
        alert("clicked 1!");
      };

      $target.addEventListener("click", (eventObj) => {
        console.log(eventObj);
      });
    </script>
  </body>
</html>

이벤트 객체에는 이벤트와 관련된 여러 가지 정보가 담겨있다.

예제 1)

<html>
    <head>
			<style>
				#wrap{
					position : fixed;
					bottom : 0;
				}
				.infobox{
					border:10px solid skyblue;
					display : inline-block;
					background-color: yellow;
				}
			</style>
    </head>
    <body>
			<h1>클릭시 마우스좌표 / 리사이징 시 창의 크기 / 스크롤 시 스크롤길이</h1>
			<div id="wrap">
				<h3 id="info1" class="infobox"></h3>
				<h3 id="info2" class="infobox"></h3>
				<h3 id="info3" class="infobox"></h3>
			</div>
			<p>some scroll here.....</p>
			<p>some scroll here.....</p>
			<p>some scroll here.....</p>
			<p>some scroll here.....</p>
			<p>some scroll here.....</p>
			<p>some scroll here.....</p>
			<p>some scroll here.....</p>
			<p>some scroll here.....</p>
			<p>some scroll here.....</p>
			<p>some scroll here.....</p>
			<p>some scroll here.....</p>
			<p>some scroll here.....</p>
			<p>some scroll here.....</p>
			<p>some scroll here.....</p>
			<p>some scroll here.....</p>
			<p>some scroll here.....</p>
			<p>some scroll here.....</p>
			<p>some scroll here.....</p>
			<p>some scroll here.....</p>
			<p>some scroll here.....</p>
			<p>some scroll here.....</p>
			<p>some scroll here.....</p>
			<p>some scroll here.....</p>
			<p>some scroll here.....</p>
			<p>some scroll here.....</p>
			<p>some scroll here.....</p>
			<p>some scroll here.....</p>
			<p>some scroll here.....</p>
			<p>some scroll here.....</p>
			<p>some scroll here.....</p>
			<p>some scroll here.....</p>
			<p>some scroll here.....</p>

      <script>
        $html = document.querySelector("html");
        $html.addEventListener("click", function(e){
          //클릭 시 마우스 x와 y좌표 
          let x = e.pageX;
          let y = e.pageY;
          document.querySelector("#info1").textContent = `x좌표 : ${x} , y좌표 : ${y}`;
        });

        window.addEventListener("resize", function(e){
          //창 너비 변경 시 창의 width, height
          let w = e.target.innerWidth;
          let h = e.target.innerHeight;

          document.querySelector("#info2").textContent = `창의 너비 : ${w}, 창의 높이 : ${h}`;
        });

        window.addEventListener("scroll",function(e){
          //스크롤 시 스크롤 된 길이 
          let length = this.scrollY;
          document.querySelector("#info3").textContent = `스크롤길이 : ${length}`;
        });
      </script>
    </body>
</html>

버블링과 캡처링

ko.javascript.info

저작자표시 비영리 변경금지 (새창열림)