🎨 Web_Front end/JavaScript

이벤트

개발진스 2023. 4. 26. 16:22
728x90

이벤트의 종류


이벤트는 키보드를 이용해 버튼을 입력하거나 마우스 클릭과 같이 다른 것에 영향을 미치는 것을 의미한다.


자바스크립트에는 다음과 같은 이벤트가 있다.

  • 마우스 이벤트
  • 키보드 이벤트
  • HTML 프레임 이벤트 
  • HTML 입력 양식 이벤트
  • 유저 인터페이스 이벤트
  • 구조 변화 이벤트
  • 터치 이벤트

 

1. 이벤트 관련 용어

 

window객체의 onload속성에 함수 자료형을 할당하는 것을 "이벤트를 연결한다"라고 한다.

<script>
	window.onload = function() { };
</script>

이때 load를 이벤트 이름, 또는 이벤트 타입이라고 하며 onload를 이벤트 속성이라고 한다.

또한 이벤트 속성에 할당한 함수를 이벤트 핸들러라고 한다.

 

2. 고전 이벤트 모델

 

고전 이벤트 모델로 이벤트를 연결하고 제거하는 방법이다.

 

고전 이벤트 모델을 사용한 이벤트 연결

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
		window.onload = function() {
			var header = document.getElementById("header"); // ID값을 담은 변수 선언

			header.onclick = function(){ // 이벤트를 연결
				alert("클릭");

				header.onclick = null; // 이벤트를 제거
			};
		};
	</script>
</head>
<body>
    <h1 id = "header">Click</h1>
</body>

고전 이벤트 모델을 사용한 이벤트 제거

실행화면

 

고전 이벤트 모델을 사용한 이벤트 제거

    <script>
		window.onload = function () {
            // 변수 선언 
            var header = document.getElementById('header');

            // 이벤트를 연결 
            header.onclick = function (){
                alert('클릭');

                // 이벤트 제거
                header.onclick = null;
            };
        };
	</script>

위의 결과화면과 동일한 화면이 출력되지만 이벤트 핸들러가 한번 실행된 이후에 이벤트를 제거하므로, 두번째 클릭부터는 이벤트가 발생하지 않는다.

 

고전 이벤트 모델은 이벤트 하나에 이벤트 핸들러 하나만 연결할 수 있다.

 

 

 

3. 이벤트 발생 객체와 이벤트 객체

 

이벤트 객체를 사용하면 '누가, 언제, 어디서, 무엇을, 어떻게, 왜' 를 알수 있다.

 

우선 '이벤트를 누가 발생 시켰을까?' 부터 확인해보자.

이벤트 핸들러 안에서 this 키워드를 사용하면 이벤트가 발생한 객체를 찾을 수 있다.

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
		window.onload = function () {
            document.getElementById('header').onclick = function(){
                alert(this);
            };
        };
	</script>
</head>
<body>

    <h1 id = "header">Click</h1>
</body>

실행화면

 

Click을 하면 경고창에 [object HTMLHeadingElement]가 출력된다. 여기가 바로 이벤트를 발생한 객체다.

 

이벤트 발생 객체의 스타일변경

    <script>
		window.onload = function () {
            document.getElementById('header').onclick = function(){
                this.style.color = 'Orange';
                this.style.backgroundColor = 'Red';
            };
        };
	</script>

클릭 후 결과

 

 

4. 이벤트 강제 발생

 

이벤트를 강제로 발생시키는 기술은 자주 사용되지는 않는다.

하지만 적절한 부분에 활용하면 코드의 길이를 줄여줄 수 있다.

 

버튼B를 클릭하면 버튼A의 클릭 횟수도 증가 하는 예제

    <script>
        window.onload = function () {
            // 문서 객체를 가져옵니다.
            var buttonA = document.getElementById('button_a');
            var buttonB = document.getElementById('button_b');
            var counterA = document.getElementById('counter_a');
            var counterB = document.getElementById('counter_b');

            // 이벤트를 연결합니다.
            buttonA.onclick = function () {
                counterA.innerHTML = Number(counterA.innerHTML) + 1;
            };
            buttonB.onclick = function () {
                counterB.innerHTML = Number(counterB.innerHTML) + 1;
                buttonA.onclick();
            };
        };
    </script>
</head>
<body>
    <button id="button_a">ButtonA</button>
    <button id="button_b">ButtonB</button>
    <h1>Button A - <span id="counter_a">0</span></h1>
    <h1>Button B - <span id="counter_b">0</span></h1>
</body>

 

 

5. 인라인 이벤트 발생

 

인라인 이벤트 모델은 HTML 페이지의 가장 기본적인 이벤트 연결 방법이다.

<body>
	<h1 onclick="alert('클릭')">Click</h1>
    <h1 onclick="var alpha=10;alert(alpha);">Click</h1>
</body>

 

이벤트 속성에 여러줄의 자바스크립트 코드를 적을 수도 있다. 하지만 이렇게 여러줄의 코드를 사용하면 굉장히 지저분해진다.

따라서 HTML태그의 이벤트 속성 안에 코드를 모두 쓰기보다는 코드 10-18처럼 함수를 script 태그 안에 만들고 호출하는 방식을 많이 사용한다

 

<head>
	<script>
		function whenClick(e){
			alert("클릭");
		}
	</script>
</head>
<body>
	<h1 onclick="whenClick(event)">Click</h1>
</body>

 

 

6. 디폴트 이벤트 제거

 

일부 HTML 태그는 이미 이벤트 핸들러를 가지고 있다.

예를 들어 a태그는 클릭하면 다른 페이지로 이동하는데, 이것이 바로 a태그가 가진 기본 이벤트이다.

 

<head>
    <script>
        function whenSubmit() {
            // 변수를 선언합니다.
            var pass = document.getElementById('pass').value;
            var pass_check = document.getElementById('pass_check').value;
            // 비밀번호가 같은지 확인합니다.
            if (pass == pass_check) {
                alert('성공');
            } else {
                alert('다시 입력해주세요.');
                return false;
            }
        }
    </script>
</head>
<body>
    <form id="my_form" onsubmit="return whenSubmit()">
        <label for="name">이름</label><br/>
        <input type="text" name="name" id="name"/><br/>
        <label for="pass">비밀번호</label><br/>
        <input type="password" name="pass" id="pass"/><br/>
        <label for="pass_check">비밀번호 확인</label><br/>
        <input type="password" id="pass_check"/><br/>
        <input type="submit" value="제출"/>
    </form>
</body>

실행화면

입력 양식이 제대로 값이 들어갔는지 확인하는 유효성 검사를 한다.

인라인 이벤트 모델을 사용할 때는 form 태그의 onsubmit 이벤트 속성에 return 함수()를 입력해야 한다.

 

 

7. 이벤트 전달

 

이벤트 전달이란 어떠한 이벤트가 먼저 발생해 어떤 순서로 발생하는지를 이벤트 전달이라고 한다.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style>
		*{border: 3px solid black;}
	</style>
	<script>
		
	</script>
</head>
<body>
	<div onclick="alert('4. out-diw')">
		<div onclick="alert('3. inner-div')">
			<h1 onclick="alert('2. header')">
				<p onclick="alert('1. paragraph')">Paragraph</p>
			</h1>
		</div>
	</div>
</body>
</html>

실행화면

이 코드를 실행하면 생기는 p 태그를 클릭할 때 마우스 커서의 좌표에 네 개의 태그가 있으므로 네 개의 태그에서 동시에 이벤트가 발생한다.

이벤트는 위의 1. 2. 3. 4. 순으로 발생한다. 자바스크립트의 이벤트 전달 순서는 이벤트 버블링 방식을 따르기 때문이다.

이벤트 버블링은 자식 노드에서 부모 노드 순으로 이벤트를 실행하는 것을 의미한다.

 

 

 

참고 :  ⌜모던 웹을 위한 Javascript jQuery 입문⌟ 책을 공부하며 요약・정리한 내용입니다.

 

728x90
저작자표시 (새창열림)