54일 차 - event 객체 (23.03.15)

yvonne·2023년 3월 15일

📂Javascript

목록 보기

4/5

💡 css적용

<!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 str = "";
        str += "<p id='jsTitle'> javascript & node.js</p>";
        str += "<img id='logoImg', src='./img/logo.png'>";

        document.body.innerHTML = str;

        var titleNode = document.getElementById("jsTitle");
        titleNode.style.fontsize = "1.2em";
        titleNode.style.border = "1px solid #ff0000";
        
        // titleNode.parentNode.removeChild(titleNode); // 부모 노드에서 자식 삭제
        // titleNode.innerHTML = "JS & node";

        var logoNode = document.getElementById("logoImg");
        logoNode.style.width = "170px";
        logoNode.style.height = "67px";
        //  logoNode.parentNode.removeChild(logoNode); // 부모 노드에서 자식 삭제
        // logoNode.setAttribute("src", "img/arm_mbed.png");
        // logoNode.setAttribute("width", 297);
        // logoNode.setAttribute("height", 124);
      };
    </script>
  </head>

  <body></body>
</html>

결과

1. 이벤트

마우스 버튼을 클릭할 때 함수를 실행시키는 것

<!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>
      function headerClick() {
        console.log("click!");

        // 이벤트 제거
        var ce = document.getElementById("cEvent");
        console.log(ce);
        ce.onclick = null;
        ce.ondblclick = null;
      }
    </script>
    <style>
      #cEvent {
        width: 200px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        font-size: 1.2em;
        background-color: rgb(152, 231, 145);
        color: #fff;
        font-weight: bolder;
      }
    </style>
  </head>
  <body>
    <div id="cEvent" onclick="headerClick();">click event</div>
  </body>
</html>

결과

💡 기본 모델

   <script>
        window.onload = function(){

        var ce = document.getElementById("cEvent");

        /* 방법 1 */
        ce.onclick = function () {
          console.log("click!");
        };

        /* 방법 2 */
        ce.onclick = clickEventHandler;
        function clickEventHandler(){
           console.log("clickEventHandler!");
        }
    };
    </script>

결과

💡 이벤트 삭제

<!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 () {
        function addHandler() {
          console.log("click!");
        }

        function removeHandler() {
          console.log("event remove!");
          ceA.removeEventListener("click", addHandler, false);
        }

        var ceA = document.getElementById("cEventAdd");
        ceA.addEventListener("click", addHandler, false);

        var ceR = document.getElementById("cEventRem");
        ceR.addEventListener("click", removeHandler, false);
      };
    </script>

    <style>
      #cEventAdd {
        width: 200px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        font-size: 1.2em;
        background-color: #f00;
        color: #fff;
        font-weight: bolder;
      }

      #cEventRem {
        width: 200px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        font-size: 1.2em;
        background-color: #0f0;
        color: #fff;
        font-weight: bolder;
      }
    </style>
  </head>
  <body>
    <div id="cEventAdd">click event</div>
    <div id="cEventRem">remove event</div>
  </body>
</html>

결과

💡 이벤트 객체

사용자가 직접 만들지 않아도 기본적으로 제공
속성과 메소드가 존재

ex) 마우스 클릭 시 클릭한 좌표값, 이벤트를 발생시킨 객체가 어떤 것인지

<!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 () {
        /*   자바에서의 this. 객체 자기 자신
               자바스크립에서의 this = 자기를 호출하는 놈(객체)
            */
        function addHandler(e) {
          console.log("click!!");
          console.log("this : " + this);

          console.log(e);

          //IE8 이전버전을 고려
          var event = e || window.event;
          for (var key in event) {
            console.log(key + " : " + event[key]);
          }

          this.style.backgroundColor = "#0000ff";
        }

        var objD = document.getElementById("objDiv");
        objD.addEventListener("click", addHandler);

        var objP = document.getElementById("objPar");
        objP.addEventListener("click", addHandler);
      };
    </script>

    <style>
      #objDiv {
        width: 200px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        font-size: 1.2em;
        background-color: #f00;
        color: #fff;
        font-weight: bolder;
      }

      #objPar {
        width: 200px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        font-size: 1.2em;
        background-color: #0f0;
        color: #fff;
        font-weight: bolder;
      }
    </style>
  </head>

  <body>
    <div id="objDiv">Object Division</div>
    <p id="objPar">Object Paragraph</p>
  </body>
</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 () {
        function sumHandler() {
          console.log("sumHandler!");
          var num1 = document.getElementById("num1").value;
          var num2 = document.getElementById("num2").value;
          var sumDiv = document.getElementById("sum");
          sumDiv.innerHTML = "합계:" + (Number(num1) + Number(num2));
        }

        var objB = document.getElementById("btn");
        objB.addEventListener("click", sumHandler);
      };
    </script>

    <style>
      #event {
        text-align: center;
        background-color: rgb(224, 224, 224);
        border: 1px solid rgb(136, 136, 136);
        border-radius: 5px;
      }
    </style>
  </head>
  <body>
    숫자 1: <input id="num1" type="number" value="0" /> + 숫자 2:
    <input id="num2" type="number" value="0" /> =
    <button id="btn">더하기</button>
    <div id="sum">합계:</div>
  </body>
</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(){
      function areaHandler() {
        console.log("A-Handler!");

        var count = document.getElementById("area-input").value.length;

        if(count >= 30) {
          alert("ㅡㅡ"+"30자 까지만 입력해");
          return;
        }
        document.getElementById("area-count").innerHTML = String(count);
      }
   
      var objArea = document.getElementById("area-input");
      objArea.addEventListener("keyup",areaHandler)
    };
    </script>

    <style>
      #event {
        text-align: center;
        background-color: rgb(224, 224, 224);
        border: 1px solid rgb(136, 136, 136);
        border-radius: 5px;
      }
    </style>
  </head>
  <body>
    <textarea id="area-input"></textarea>
    <p>글자수<span id="area-count">0</span>/1200</p>
  </body>
</html>

결과

💡 폼 태그

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript</title>

    <script>
      window.onload = function () {
        var sbmBtn = document.getElementById("sbmBtn");
        sbmBtn.onclick = function () {
          if (document.getElementById("uId").value == "") {
            alert("user id blank!!");
          } else if (document.getElementById("uPw").value == "") {
            alert("user pw blank!!");
          } else {
            alert("login ok!!");
            document.getElementById("loginForm").submit();
          }
        };

        var resBtn = document.getElementById("resBtn");
        resBtn.onclick = function () {
          alert("reset ok!!");
          document.getElementById("loginForm").reset();
        };
      };
    </script>

    <style></style>
  </head>

  <body>
    <form id="loginForm" action="http://www.google.com">
      USER ID : <input id="uId" type="text" name="uId" /><br />
      USER PW : <input id="uPw" type="password" name="upw" /><br />
      <input id="sbmBtn" type="button" value="SUBMIT" />
      <input id="resBtn" type="button" value="RESET" />
    </form>
  </body>
</html>