09009

[Javascript] 이벤트 본문

Front-End/Javascript
[Javascript] 이벤트
09009 2023. 4. 3.

이벤트

키보드를 누르거나 마우스를 클릭하는 것처럼 어떤 현상이 프로그램에 영향을 미치는 것을 의미한다.

 

이벤트를 연결하기 위해 아래와 같은 코드를 작성해야 한다.

window.onload = function() {  };

 

이벤트 리스너: 문서 객체의 이벤트 속성에 지정된 함수

 

이벤트 연결

이벤트 모델 : 문서 객체에 이벤트를 연결하는 방식

인라인 이벤트 모델: HTML  태그 내부에 자바스크립트 코드를 넣어 이벤트를 연결하는 방식

 

* 고전 이벤트 모델

문서 객체의 이벤트 속성에 함수를 지정한다. 이 때 지정된 함수를 이벤트 리스너라고 한다.

 

✍ 입력

<!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>
    <script>
        // 이벤트를 연결합니다.
        window.onload = function() {
            // 문서 객체를 선택합니다.
            var button = document.getElementById('button');
            // 이벤트를 연결합니다.
            button.onclick = function() {
                alert('click');
            };
        };
    </script>
</head>
<body>
    <button id="button">버튼</button>
</body>
</html>

💻 출력 

 

* 이벤트 발생 객체

- 이벤트 리스너 내부에서 this 키워드를 사용하면 이벤트를 발생한 자기 자신을 의미한다.

아래 소스코드는 이벤트 리스너와 this 키워드의 textContent 속성을 사용하여 자기 자신의 글자를 변경한 것이다.

소스코드를 실행하면 버튼을 클릭할 때마다 별 모양이 하나씩 추가된다.

 

✍ 입력

<!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">버튼 - </button>
    <script>
        // 이벤트 연결
        document.getElementById('button').onclick = function() {
            this.textContent = this.textContent + '★';
        };
    </script>
</body>
</html>

💻 출력 

위 소스코드와 같이 script 태그를 body 태그의 아래쪽 부분에 넣을 경우 script 태그를 읽기 전에 다른 태그들이

먼저 화면에 표시되기 때문에 window.onload 이벤트를 사용하지 않아도 된다.

 

이벤트 사용

HTML 태그에는 기본적으로 몇 가지 이벤트가 있다.

a 태그를 클릭하면 href 속성에 입력한 위치로 이동하고, form 태그로 생성한 <제출> 버튼을 클릭하면 자동으로 입력 양식을

제출하는 것이 있다. 이와 같이 특정 태그가 가진 기본적인 이벤트를 기본 이벤트라고 한다.

 

하지만 가끔 기본 이벤트를 막아야 하는 경우가 발생한다.

예를 들어 회원가입 페이지에서 <확인> 버튼을 클릭하면 우선 사용자가 정확하게 정보를 입력하였는지 확인 후 이동해야 한다.

정보를 입력하지 않은 상태로 다음 페이지로 이동하면 안 된다. 이러한 경우 HTML 태그가 가지는 기본 이벤트를 제거해야 한다.

 

기본 이벤트 제거

고전 이벤트 모델에서 기본 이벤트를 제거하기 위해선 이벤트 리스너의 반환 값을 false로 입력하면 된다.

 

✍ 입력

<!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>
    <script>
        // 이벤트 연결
        window.onload = function() {
            // 문서 객체 선택
            var button = document.getElementById('button');

            // 이벤트 연결
            button.onclick = function() {
                // 기본 이벤트를 제거한다.
                return false;
            }
        };
    </script>
</head>
<body>
    <a id="button" href="https://www.youtube.com">유튜브 이동</a>
</body>
</html>
</html>

💻 출력 

유튜브 이동 링크를 클릭하여도 연결된 웹 페이지로 이동하지 않는다.

 

실습예제

 

다음 코드의 문제와 해결 방법을 설명하시오.

 

✍ 입력

<!DOCTYPE html>
<html>
<head>
	<title>Document Object Model</title>
	<script>
		var element = document.getElementById('element');
		element.style.color = 'red';
		element.innerHTML = 'From JavaScript';
	</script>
</head>
<body>
	<h1 id="element">Lorem ipsum dolor amet</h1>
</body>
</html>

웹 브라우저가 script 태그를 읽을 당시에는 h1 태그가 생성되지 않았기 때문에 스타일 조작이 이루어지지 않았다.

위 문제를 해결하기 위해서는 이벤트 기능을 아래와 같이 사용해야 한다.

 

<!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>
    <script>
     window.onload = function() {
        var element = document.getElementById('element');
        element.style.color = 'red';
        element.innerHTML = 'From JavaScript';
     }
    </script>
</head>
<body>
    <h1 id="element">Lorem ipsum dolor amet</h1>
</body>
</html>

💻 출력 

 

'Front-End > Javascript' 카테고리의 다른 글

[Javascript] 프레임 애니메이션  (0) 2023.04.04
[Javascript] 입력 양식 포커스 - 회원가입 양식  (0) 2023.04.04
[Javascript] 문서 객체 조작  (0) 2023.04.03
[Javascript] 문서 객체 모델  (0) 2023.04.03
[Javascript] 함수와 객체  (0) 2023.04.01
'Front-End/Javascript' Related Articles more
Comments