본문 바로가기
Javascript

Javascript(event)_2024-07-19

by 앵보몬 2024. 7. 19.
728x90
반응형

이벤트(event)란?

이벤트(event)란 웹 브라우저가 알려주는 HTML 요소에 대한 사건의 발생을 의미합니다.

웹 페이지에 사용된 자바스크립트는 이렇게 발생한 이벤트에 반응하여 특정 동작을 수행할 수 있습니다.

따라서 클라이언트 측 자바스크립트를 비동기식 이벤트 중심(event-driven)의 프로그래밍 모델이라고 합니다.

 

이벤트 타입(event type)

이벤트 타입(event type)은 발생한 이벤트의 종류를 나타내는 문자열로, 이벤트 명(event name)이라고도 합니다.

가장 많이 사용하는 키보드, 마우스, HTML DOM, Window 객체 등을 처리하는 이벤트가 폭넓게 제공되고 있습니다.

다음 예제는 HTML 문서의 특정 단락을 클릭하면 발생하는 이벤트를 처리하는 예제입니다.

예제
<p onclick="changeText(this)">이 문자열을 클릭해 보세요!</p>

...

<script>

function changeText(element) {

    element.innerHTML = "문자열의 내용이 바뀌었습니다!";

}

</script>

 

이벤트 명세(event specification)

예전에는 onload, onclick, onmouseover와 같이 기본적이고도 단순한 이벤트만을 사용했습니다.

하지만 웹 기술의 발전에 따라 touch나 gesture와 같은 새로운 이벤트들이 빠르게 늘어났습니다.

따라서 하나의 표준만으로는 이벤트의 전체 목록을 정의할 수 없는 상황이 되었습니다.

이렇게 방대해진 이벤트를 위한 명세는 현재 다음과 같이 나누어져 정의되어 있습니다.

1. DOM Level 3 이벤트 명세

2. HTML5 관련 이벤트 명세

3. 모바일 장치를 위한 이벤트 명세

https://www.tcpschool.com/javascript/js_event_concept

 

function.css
0.00MB
test50.html
0.00MB
images.zip
0.08MB
test51.html
0.00MB

 

test50.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="function.css">
</head>
<body>
    <ul id="menu">
        <li><a href="#" onclick="changbg('green')">green</a></li>
        <li><a href="#" onclick="changbg('orange')">orange</a></li>
        <li><a href="#" onclick="changbg('purple')">purple</a></li>
    </ul>
    <div id="result"></div>

    <script>
        function changbg(color){
            let result = document.getElementById('result');
            result.style.backgroundColor=color;
        }
    </script>
</body>
</html>

 

test51.html

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>자바스크립트 이벤트</title>
    <link rel="stylesheet" href="css/event.css" />
    <style>
      #item {
        position: relative;
        width: 500px;
        height: auto;
        padding: 15px 20px;
        margin: 0 auto;
      }

      button {
        background-color: rgba(255, 255, 255, 0.7);
        padding: 5px;
        border: 1px solid #ccc;
        font-size: 0.8em;
      }

      .over {
        position: absolute;
        left: 30px;
        bottom: 30px;
      }

      .over1 {
        position: absolute;
        left: 140px;
        bottom: 30px;
      }

      .detail {
        width: 400px;
        text-align: left;
        line-height: 1;
        display: none;
      }

      #img {
        display: none;
      }
    </style>
  </head>
  <body>
    <div id="item">
      <img src="images/flower.jpg" alt="" />
      <button class="over" id="open">상세 설명 보기</button>
      <button class="over1" id="open1">그림 보기</button>
      <div id="desc" class="detail">
        <h4>등심붓꽃</h4>
        <p>
          북아메리카 원산으로 각지에서 관상초로 흔히 심고 있는 귀화식물이다.
          길가나 잔디밭에서 흔히 볼 수 있다. 아주 작은 씨앗을 무수히 많이 가지고
          있는데 바람을 이용해 씨앗들을 날려보내거나, 뿌리줄기를 통해 동일한
          개체들을 많이 만들어 냄으로써 번식한다.
        </p>
        <button id="close1">상세 설명 닫기</button>
      </div>
      <div id="img" class="img1">
        <img src="images/flower1.jpg" alt="" />
        <button id="close2" class="over1">그림 닫기</button>
      </div>
    </div>

    <script>
      document.querySelector("#open").onclick = function () {
        document.querySelector("#desc").style.display = "block";
        document.querySelector("#open").style.display = "none";
        document.querySelector("#open1").style.display = "none";
      };

      document.querySelector("#close1").onclick = function () {
        document.querySelector("#desc").style.display = "none";
        document.querySelector("#open").style.display = "block";
        document.querySelector("#open1").style.display = "block";
      };

      document.querySelector("#open1").onclick = function () {
        document.querySelector("#img").style.display = "block";
        // document.querySelector("#close2").style.display = "block";
        document.querySelector("#open").style.display = "none";
        document.querySelector("#open1").style.display = "none";
      };

      document.querySelector("#close2").onclick = function () {
        document.querySelector("#img").style.display = "none";
        document.querySelector("#open").style.display = "block";
        document.querySelector("#open1").style.display = "block";
        document.querySelector("#close").style.display = "none";
        document.querySelector("#close2").style.display = "none";
      };
    </script>
  </body>
</html>

 

728x90
반응형

'Javascript' 카테고리의 다른 글

Javascript(History 객체)_2024-07-22  (0) 2024.07.22
Javascript(Window 객체)_2024-07-19  (2) 2024.07.22
Javascript(Date 메소드)_2024-07-19  (0) 2024.07.19
Javascript(섭씨 화씨 변환 프로그램)_2024-07-18  (0) 2024.07.19
Javascript(반복문)_2024-07-17  (0) 2024.07.18

관련글

티스토리툴바