오봉이와 함께하는 개발 블로그

JavaScript - 이벤트 핸들러와 이벤트 처리(DOM 포함) 본문

FE/JavaScript

JavaScript - 이벤트 핸들러와 이벤트 처리(DOM 포함)

오봉봉이 2021. 12. 10. 16:51
728x90

이벤트 핸들러와 이벤트 처리

  • 인라인 방식과 고전 방식의 이벤트 처리 방식의 경우 동일한 객체에 대해 동일한 이벤트를 여러 번 사용 불가(마지막 이벤트 하나만 적용)
  • 자주 사용되는 이벤트 핸들러
    • onLoad: HTML 문서나 특정 요소가 로드되었을 때 발생
    • onUnload: HTML 문서나 특정 요소가 사라질 때 발생
    • onClick: 클릭했을 때 발생
    • onKeyUp: 키를 눌렀다가 떼었을 때 발생
    • onKeyPress: 키를 누를 때 발생
    • onMouseDown: 마우스 버튼 눌렀을 때 발생
    • onMouseUp: 마우스 버트느 눌렀다가 떼었을 때 발생
    • onMouseOver: 포커스로 마우스 포인터가 들어갈 때 발생
    • onMouseOut: 포커스에서 마우스 포인터가 나갈 때 발생
    • onResize: 무서의 특정 요소의 크기가 변경될 때 발생
    • onSubmit : 폼의 submit 버튼을 눌렀을 때 발생
    • onReset : 폼의 reset 버튼 눌렀을 때 발생
<!-- 인라인 이벤트 핸들러 - HTML 태그에 직접 이벤트 달기 -->
<img src="A.png" onmouseover="alert('msg')">
// 고전 방식의 이벤트
객체.onClick = function() {
    alert("msg");
}
// DOM : 이벤트 리스너 등록
addEventListener('이벤트 종류', '함수 이름');
removeEventListener();
이벤트 처리 예제 - 인라인 방식 event1.html
        <script type="text/javascript">
            function show() {
                alert("클릭2");
            }
        </script>
</head>
<body>
    <div onclick="alert('클릭1')">클릭1</div>
    <div onclick="show()">클릭2</div>
</body>
이벤트 처리 예제 - 고전 방식 mouseEvent.html
        <script type="text/javascript">
            window.onload = function() {
                var birdImg = document.getElementById('birdImg');

                birdImg.onmouseover = function() {
                    birdImg.style.opacity = 0.5; // 투명도
                }
                birdImg.onmouseout = function() {
                    birdImg.style.opacity = 1;
                }
            };

            // 문서 상에서 오른쪽 마우스 클릭했을 때 이벤트 처리
            document.oncontextmenu = function() {
                alert("오른쪽 마우스 사용을 금지 합니다.");
                // return false;
이벤트 처리 예제 - 동일한 이벤트 여러 번 적용(마지막 하나만 적용된다) sameEvent.html
        <script type="text/javascript">
            // 동일한 객체에 대해 동일한 이벤트를 여러 번 사용 불가
            // 마지막 이벤트 하나만 적용
            function show1() {
                alert("실행1");
            }
            function show2() {
                alert("실행2");
            }
            window.onload = show1();
            window.onload = show2(); // 마지막 이벤트만 처리
        </script>

DOM 이벤트 리스너 등록

  • addEventListener() 메소드 사용해서 이벤트 리스너 등록
객체.addEventListener('이벤트명', function() { 

});
  • 콜백 함수로 화살표 함수 사용할 경우
객체.addEventListener('이벤트명',() => {

});
DOM 이벤트 리스너 등록 예제 addEventListner.html
        <script type="text/javascript">
            window.onload = function() {
                var greenBtn = document.getElementById('greenBtn');
                var redBtn = document.getElementById('redBtn');
                var h2 = document.getElementById('h2');

                // 객체에 이벤트 리스너 등록 : click 이벤트
                greenBtn.addEventListener("click", function() {
                    h2.style.color = "green";
                });

                // 객체에 이벤트 리스너 등록 : mouseover 이벤트
                redBtn.addEventListener("mouseover", function() {
                    h2.style.color = "red";
                });
            };
        </script>
</head>
<body>
    <h2 id="h2">제목</h2>
    <button id="greenBtn">green</button>
    <button id="redBtn">red</button>
</body>
DOM 이벤트 리스너 등록 예제 - 동일 이벤트 처리 addEventListner2.html
        <script type="text/javascript">
            window.onload = function() {
                var btn = document.getElementById('btn');

                btn.addEventListener("click", show1);
                btn.addEventListener("click", show2);
            };
            function show1() {
                alert("실행1");
            }
            function show2() {
                alert("실행2");
            }
            // 동일 이벤트 둘 다 처리가 가능하다.
        </script>
</head>
<body>
    <button id="btn">클릭</button>
</body>
DOM 이벤트 리스너 등록 예제 - 화살표 함수 addEventListner3.html
        <script type="text/javascript">
            window.onload = function() {
                let box = document.getElementById("box");

                box.addEventListener("mousedown", () => {
                    box.style.background = 'green';
                });
                box.addEventListener("mouseup", event => {
                    event.currentTarget.style.background = 'white';
                });
            }
        </script>
728x90
저작자표시

'FE > JavaScript' 카테고리의 다른 글

JavaScript - 사용자 정의 객체 리터럴  (0) 2021.12.13
JavaScript - 폼 유효성 확인 예제  (0) 2021.12.13
JavaScript - 문서 객체 모델  (0) 2021.12.10
JavaScript - 브라우저 객체 모델 navigator객체  (0) 2021.12.10
JavaScript - 브라우저 객체 모델 location객체  (0) 2021.12.10
'FE/JavaScript' Related Articles more
Comments