addEnevtListener()메서드

이예제에서는 addEnevtListener()메서드를 사용하여 사용자가 단추를 클릭할때 함수를 실행

</h2>

    <button id="myBtn">Try it</button>

    <script>

        document.getElementById("myBtn").addEventListener("click", myFunction);

        function myFunction() {

        alert ("Hello World!");

        }

    </script>

    <h3>많은 이벤트 추가</h3>  

    <button id="myBtn2">Try it</button>

    <p id="demo6"></p>

    <script>

        var z = document.getElementById("myBtn2");

        z.addEventListener("mouseover", myFunction);

        z.addEventListener("click", mySecondFunction);

        z.addEventListener("mouseout", myThirdFunction);

        function myFunction() {

            document.getElementById("demo6").innerHTML += "Moused over!<br>";

        }

        function mySecondFunction() {

             document.getElementById("demo6").innerHTML += "Clicked!<br>";

        }

        function myThirdFunction() {

            document.getElementById("demo6").innerHTML += "Moused out!<br>";

        }

    </script>

-------------------------------------

    <p>화면과 관련 예제</p>

   

    <p>랜덤수를 찾아 화면으로 보여줌.</p>

   

    <p id="demo7"></p>

   

    <script>

    window.addEventListener("resize", function(){  //resize 화면이 변경될때.

      document.getElementById("demo7").innerHTML = Math.random();

    });

    </script>