addEventListener 실습예제

웹 프로그래밍 기초/DOM 문서객체

addEventListener 실습예제

별초롱언니 2025. 4. 11. 23:47

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body onload="onLoadEvent();">
  <h1 id="id1">my head title</h1>

  <script>
    function onLoadEvent() {
      document.body.style.backgroundColor = "pink";
    }
  </script>
</body>
</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>
</head>
<body>
  enter your name : <input type="text" id="fname" onchange="myFunction()">
  <p>transforms</p>

  <script>
    function myFunction() {
      let x = document.querySelector("#fname");
      x.value = x.value.toUpperCase();
    }
  </script>
</body>
</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>
</head>
<body>
  <div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color: pink; width: 120px; height:20px; padding:40px;">
    first display...

    <script>
      function mOver(obj) {
        obj.innerHTML = "Thank you";
      }
      function mOut(obj) {
        obj.innerHTML = "Mouse over me";
      }
    </script>
  </div>

</body>
</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>
</head>
<body>
  <div onmousedown="mDown(this)" onmouseup="mUp(this)" style="background-color: pink; width: 120px; height: 20px; padding: 40px;">
    click me...
  </div>

  <script>
    function mDown(obj) {
      obj.style.backgroundColor = "aqua";
      obj.innerHTML = "Release me";
    }
    function mUp(obj) {
      obj.style.backgroundColor = "yellow";
      obj.innerHTML = "Thank you";
    }
    
  </script>
</body>
</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>
</head>
<body>
  enter your name : <input type="text" id="fname" onfocus="focusFunction()" onblur="blurFunction()">

  <script>
    function focusFunction() {
      document.querySelector("#fname").style.backgroundColor = "pink";
    }

    function blurFunction() {
      document.querySelector("#fname").style.backgroundColor = "yellow";
    }
  </script>
</body>
</html>

removeEventListener()

addEventListener() 메서드로 첨부된 이벤트 핸들러를 제거한다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <p>click button</p>
  <button onclick="removeHandler()" id="myBton">remove</button>
  <button id="myDIV">mousemove</button>
  <p id="demo"></p>

  <script>
    // let으로 변수선언해서 간단하게도 가능 
    // let myDiv = document.querySelector("#myDIV");
    document.querySelector("#myDIV").addEventListener("mouseover",myFunction);
    function myFunction() {
      document.querySelector("#demo").innerHTML = Math.random();
    }
    function removeHandler() {
      document.querySelector("#myDIV").removeEventListener("mouseover",myFunction);
    }
  </script>
</body>
</html>

마우스 커서 mousemove에 가져다 대면 숫자 랜덤으로 생성되서 보여줌

remove 클릭하면 해당 숫자에서 더이상 다른 숫자는 보여지지않고 멈춤

add.EventListener() 괄호안에 적은내용 제거시

removeEventListener() 괄호안에 똑같이 기재해야 제거된다