불로구

자바스크립트 - 이벤트, 이벤트 리스너, 익명 함수 본문

프로그래밍/JavaScript

자바스크립트 - 이벤트, 이벤트 리스너, 익명 함수

맹이맹이 2020. 6. 25. 00:11
반응형

이벤트 종류

- HTML5 표준 이벤트는 70개가 넘는다.

- 여기서는 몇 가지만 나열하겠습니다.

onkeydown

아무 키가 누르는 순간

onclick

객체에 클릭할 때

onmousedown

객체에 마우스 버튼이 눌러지는 순간

onmousemove

객체 위에서 마우스가 움직이는 동안 발생

onmouseover

마우스 커서가 객체 안으로 들어가는 순간

onmouseout

마우스 커서가 객체에서 벗어나는 순간

​

이벤트 리스너 만들기

- HTML 태그 내에 작성

- DOM 객체의 이벤트 리스너 프로퍼티에 작성

- DOM 객체의 addEventListener() 이용

​

여기서는 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>
    <script>
        document.addEventListener("DOMContentLoaded",init,false);
        
        function init(){
            let p = document.getElementsByTagName("h2")[0];
            p.addEventListener("mouseover" , over);
            p.addEventListener("mouseout" , out);

            function over(){
                p.style.backgroundColor="red";
            }
            function out(){
                p.style.backgroundColor = "blue";
            }
        }
    </script>
</head>
<body>
    <div>
        <h2>안녕하세요</h2>
        <hr>
    </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>
    <script>
        document.addEventListener("DOMContentLoaded",init,false);
        function init(){
            let p = document.getElementsByTagName("h2")[0];
            p.onmouseover = function(){
                this.style.backgroundColor = "red";
            } 
        
            p.addEventListener("mouseout",function(){
                this.style.backgroundColor = "blue";
            },false)
        }
    </script>
</head>
<body>
    <div>
        <h2>안녕하세요</h2>
        <hr>
    </div>
</body>
</html>

결과는 똑같습니다~

코드를 보시면 onmouseover, onmouseout 부분을 모두 익명함수로 구현했습니다.

반응형

'프로그래밍 > JavaScript' 카테고리의 다른 글

자바스크립트 - 이벤트 타겟, 이벤트 취소( (preventDefault() )  (0) 2020.06.25
자바스크립트 - 이벤트 객체  (0) 2020.06.25
자바스크립트 - DOM 객체 생성, 삽입, 삭제  (0) 2020.06.22
자바스크립트 - HTML DOM & Document  (0) 2020.06.19
자바스크립트 - 배열 & Array  (0) 2020.06.18
'프로그래밍/JavaScript' Related Articles more
Comments