addEventListener 간단한 예제(JavaScript)

https://developer.mozilla.org/ko/docs/Web/API/EventTarget/addEventListener

<style>

        #container{

            margin: 30px auto;

            text-align: center;

            width: 300px;

            height: 300px;

            border: 2px solid black;

            color: white;

        }

</style>

<div id="container">

        <h1>Hello</h1>

</div>

<script>

        const divTag = document.getElementById("container");

        function handleMouseOver() {

            divTag.style.backgroundColor ="red";

            divTag.innerHTML = "mouseover";

        }

        function handleLeave() {

            divTag.style.backgroundColor = "blue";

            divTag.innerHTML = "mouseleave";

        }

        function handleResize() {

            divTag.style.backgroundColor = "pink";

            divTag.innerHTML = "resize";

        }

        function handleContextMenu() {

            divTag.style.backgroundColor = "green";

            divTag.innerHTML = "contextmenu";

        }

        divTag.addEventListener("mouseover", handleMouseOver);

        divTag.addEventListener("mouseleave", handleLeave);

        window.addEventListener("resize", handleResize);

        window.addEventListener("contextmenu", handleContextMenu);

</script>

addEventListener("mouseover", function);         마우스 포인터가 위에 올려놓은 경우

addEventListener("mouseleave", function);        마우스 포인터가 밖으로 이동한 경우

addEventListener("resize", function);                홈페이지 크기가 변경될 경우

addEventListener("contextmenu", function);      마우스의 오른쪽 버튼이 클릭 되었을 경우

https://developer.mozilla.org/ko/docs/Web/API/EventTarget/addEventListener