JavaScript(JS) - 이벤트(Event)

조성주·2023년 3월 14일
JavaScriptjs
1

JavaScript

목록 보기
15/21

✅ 이벤트란?

  • 시스템에서 일어나는 사건이다.
  • 웹페이지에서 사용자가 어떠한 행동을 취했을 때 생기는 사건이다.
  • ex) 버튼을 눌렀을 때 이벤트가 발생한다. (= 클릭 이벤트가 발생한다.)

📗 이벤트 종류(간략하게)

1. 자주 사용하는 이벤트 종류

1) click / doubleclick : 클릭 / 더블 클릭
2) mousedown : 마우스를 눌렀을 때
3) mouseup : 눌렀던 마우스를 땠을 때
4) mouseover : 요소 위로 마우스 올렸을 때
5) mouseout : 요소 밖으로 마우스 움직였을 때

2. 포커스 이벤트

1) focus : 포커스를 얻음
2) blur : 포커스를 잃음

3. 기타 이벤트

1) submit : 폼 전송
2) resize : 사이즈 조절
3) select : 텍스트 선택
4) scroll : 스크롤 기능
5) change : 폼 변경

📗 이벤트 핸들러

  • 이벤트를 다룬다.
  • 이벤트 발생 시 실행되는 코드
  • 이벤트를 JS에서 인식하여 사용하게 한다. (= 이벤트 리스너)

❓ 자주 사용하는 이벤트 핸들러 종류

1) onclick : 클릭
2) ondbclick : 더블클릭
3) onmousedown : 마우스 누를 때
4) onmouseup : 눌렀던 마우스 땠을 때
5) onmouseover : 요소 위로 마우스 올렸을 때
6) onmouseout : 요소 밖으로 마우스 움직였을 때
7) onfocus : 포커스 됐을 때
8) onblur : 포커스 해제 됐을 때
9) onsubmit : 폼 전송됐을 때
10) onresize : 사이즈 조절했을 때
11) onselect : 텍스트 선택했을 때
12) onscroll : 스크롤 기능
13) onchange : 폼 변경됐을 때

❓ 이벤트 핸들러 등록 방법

  1. HTML 요소의 속성으로 등록하는 방법
  2. DOM요소의 프로퍼티로 등록하는 방법
  3. addEventListener 메서드를 사용하는 방법

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

1) HTML 요소의 속성으로 등록하는 방법

button 태그로 button을 생성하고 onclick 속성으로 함수를 등록한다.

<!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>
    <button onclick = "btnClick()">
    <script>
		function btnClick(){
     		alert("버튼 클릭!");
    	}
    </script>
  </body>
</html>

2) DOM요소의 프로퍼티로 등록하는 방법

DOM은 자바스크립트로 HTML요소를 조작할 수 있다. id가 button인 요소를 가지고 와 button 변수에 저장하고 onclick 프로퍼티에 이벤트 처리함수인 click 함수를 등록한다.

const click = () => {
	alert("버튼 클릭!");
}

window.onload = function() {
	const button = document.getElementById("button");
    button.onclick = click;
}

3) addEventListener 메서드를 사용하는 방법

addEventListenr 메서드를 이용하여 대상 DOM 요소에 이벤트를 바인딩하고 해당 이벤트가 발생했을 때 실행될 콜백 함수(이벤트 핸들러)를 지정한다.

const button = document.getElementById("button");
button.addEventListenr("click", () => {
	alert("버튼 클릭")
})

📗 이벤트 객체

  • 이벤트가 일어나는 것 그 자체
  • 이벤트의 기능 및 속성 제공 (= event)
const button = document.querySelector("button");
button.addEventListener("click", (event) => {
	console.log(event) // 여기서 이 event가 event객체이다.
}

📗 이벤트 타겟

  • 이벤트가 발생했을 때 시작된 곳이다.
  • event.target 이용하여 접근 가능하다.
<!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>
    <button id="button">asd</button>
    <script>
      const btn = document.querySelector("#button");

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

결과로 event가 발생한 DOM이 출력이 된다.

📗 이벤트 전파

❓ 이벤트 전파란?

  • 이벤트 발생 시 다른 곳으로 전파 시킴
  • 이벤트 전파 종류로는 이벤트 캡쳐링과 이벤트 버블링이 있다.

이벤트 전파는 말 그대로 이벤트가 전파되는 것을 의미한다. 코드를 통해 알아보자

<div id="firstDiv">
  <div id="second">
    <div id="third"></div>
  </div>
</div>
const firstDivDOM = docuemnt.getElementById("firstDiv");
const secondDivDOM = docuemnt.getElementById("secondDiv");
const thirdDivDOM = docuemnt.getElementById("thirdDiv");

firstDivDOM.addEventListener("click", () => {
	alert("firstDivDOM 클릭");
})

secondDivDOM.addEventListener("click", () => {
	alert("secondDivDOM 클릭");
})

thirdDivDOM.addEventListener("click", () => {
	alert("thirdDivDOM 클릭");
})

이렇게 각 div영역에 클릭 시 alert가 뜨게 이벤트 핸들러를 등록을 하였다. 그렇다면 우리는 thirdDiv 영역에 마우스 클릭을 하게 되면 thirdDivDOM 클릭 이라는 알람창이 뜰거라고 생각을 할 것이다. 하지만 실제로 클릭하면 third, second, first 이렇게 3개 전부 다 alert가 뜨게 될 것이다. 그 이유는 thirdDiv는 secondDiv의 자식 요소이고 secondDiv는 firstDiv의 자식요소이기 때문이다. 즉, 감싸져 있기 때문이다. 따라서, thirdDiv를 눌러도 secondDiv, firstDiv에 등록한 이벤트도 발생을 한 것이다. 이 현상을 이벤트 전파라고 한다.

❓ 이벤트 전파 중단 방법

  • 이벤트 발생 시 다른 곳으로 전파를 중단 시키는 방법은 브라우저에 따라 방법이 다르다.

1) stopPropagation()

  • 이벤트 전파를 막는 함수
  • Chrome, Safari, firefox에서 사용한다.
const firstDivDOM = docuemnt.getElementById("firstDiv");
const secondDivDOM = docuemnt.getElementById("secondDiv");
const thirdDivDOM = docuemnt.getElementById("thirdDiv");

firstDivDOM.addEventListener("click", (event) => {
	alert("firstDivDOM 클릭");
    event.stopPropagation();
})

secondDivDOM.addEventListener("click", (event) => {
	alert("secondDivDOM 클릭");
  	event.stopPropagation();
})

thirdDivDOM.addEventListener("click", (event) => {
	alert("thirdDivDOM 클릭");
  	event.stopPropagation();
})

2) cancelBubble()

  • 이벤트 전파를 막는 함수
  • IE8 속성 true를 줘서 사용한다.
const firstDivDOM = docuemnt.getElementById("firstDiv");
const secondDivDOM = docuemnt.getElementById("secondDiv");
const thirdDivDOM = docuemnt.getElementById("thirdDiv");

firstDivDOM.addEventListener("click", (event) => {
	alert("firstDivDOM 클릭");
    event.cancelBubble = true;
})

secondDivDOM.addEventListener("click", (event) => {
	alert("secondDivDOM 클릭");
  	event.cancelBubble = true;
})

thirdDivDOM.addEventListener("click", (event) => {
	alert("thirdDivDOM 클릭");
  	event.cancelBubble = true;
})

이벤트 전파 중단함수는 아니지만 preventDefault()라는 함수도 존재한다. 이 함수는 이벤트 동작을 중단하는 함수이다.
예시로, a태그에는 필수로 사용해야하는 href라는 속성이 존재한다. 이 href 속성에는 이동할 url을 입력을 한다. a태그 클릭 시 href에 입력한 url로 이동을 하게 되는데 preventDefault()를 사용하게 되면 이동을 하지 않게 된다. 이벤트 동작을 중단하는 함수이기 때문에 이동을 하지 않는 것이다.

<!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>
    <a href="www.naver.com" id="aTag">네이버로 이동</a>
    <script>
     const aTagDOM = document.querySelector("#aTag");
      
     aTagDOM.addEventListener("click", (e) => {
     	e.preventDefault(); 
     })
    </script>
  </body>
</html>

이렇게 하면 원래 클릭을 했을 때 url로 이동을 해야하는데 preventDefault 함수를 사용하여 이벤트를 중단했기 때문에 페이지 이동을 하지 않게 된다.

📗 이벤트 전파 종류 두가지

❓ 이벤트 캡쳐링

  • 이벤트 발생 시 가장 위 영역부터 탐색을 한다.
  • 원래 이벤트를 아래에서 위로 탐색을 한다. 이벤트 캡쳐링은 위부터 탐색을 한다.

이벤트 캡쳐링 사용 방법

  • addEventListener에 capture를 true로 설정한다.
  • capture의 default값은 false이다.
<div id="firstDiv">
  <div id="second">
    <div id="third"></div>
  </div>
</div>
const divDOM = document.querySelector("div");

divDOM.forEach((div) => {
	div.addEventListener("click", 이벤트함수, {
    	capture : true
    })
})

❓ 이벤트 버블링

  • 이벤트 발생 시 가장 아래 영역부터 탐색을 한다.
  • capture default값이 false인데 버블링은 capture가 false일 때 작동하는 거라 따로 설정하지 않아도 된다.
    만약, 한다고 하면 아래의 코드와 같다.
<div id="firstDiv">
  <div id="second">
    <div id="third"></div>
  </div>
</div>
const divDOM = document.querySelector("div");

divDOM.forEach((div) => {
	div.addEventListener("click", 이벤트함수, {
    	capture : false
    })
})
profile
조성주
프론트엔드 개발자가 되기 위한 기록
이전 포스트

JavaScript(JS) - Ajax

다음 포스트

JavaScript(JS) - 클래스(Class)

0개의 댓글