본문 바로가기
Web/JavaScript

[JavaScript] 이벤트(Event) - 이벤트 타입(Event Type), 이벤트 타겟(Event Target), 이벤트 리스너(Event Listener), 이벤트 객체(Event Object)

by coding-choonsik 2023. 4. 19.
728x90
반응형
SMALL

1. 이벤트(Event)

  • 웹 브라우저가 알려주는 HTML 요소에 대한 사건이 발생
  • 웹 페이지에 사용된 자바스크립트는 발생한 이벤트에 반응하여 특정 동작을 수행할 수 있음
  • 자바스크립트는 비동기식 이벤트 중심의 프로그래밍 모델
이벤트 등록
    객체.addEvenetListener(이벤트타입, 이벤트리스너)

    이벤트 제거
    객체.removeEventListener(이벤트타입, 이벤트리스너)
function sendit(e){
    // e.target(button), e.type(click)
}

<input type="button" onclick="sendit()" value="확인">

2. 이벤트객체(Event Object)

  • 특정 타입의 이벤트와 관련이 있는 객체
  • 이벤트 객체는 해당 타입의 이벤트에 대한 상세 정보를 저장하고 있음
  • 모든 이벤트 객체는 이벤트의 타입을 나타내는 type 프로퍼티와 이벤트 대상을 나타내는 target 프로퍼티를 가지고 있음
  • 이벤트 객체를 이벤트 리스너가 호출할 때 인수로 전달
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>이벤트 객체1</title>
    <script>
        window.onload = function(){
            const btn = document.getElementById('btn')
            btn.addEventListener('click',clickBtn)

            
        }
        // e는 이벤트 객체
        function clickBtn(e) {
            console.log(e)
            console.log(e.target)
            console.log(e.target.id)
            console.log(e.target.value)
            console.log(e.type)
        }
    </script>
</head>
<body>
    <h2>이벤트 객체2</h2>
    <button type="button" id="btn" value="확인">확인</button>
</body>
</html>

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>이벤트 객체2</title>
    <script>
        window.onload = function(){
            const btn1 = document.getElementById('btn1')
            btn1.addEventListener('click',clickBtn)
            const btn2 = document.getElementById('btn2')
            btn2.addEventListener('click',clickBtn)
            const btn3 = document.getElementById('btn3')
            btn3.addEventListener('click',(e) => {
                console.log(`e.target.id: ${e.target.id}`)
                console.log('버튼3이 눌렸어요!😝')
            })
        }
        function clickBtn(e){
            switch(e.target.id){
                case 'btn1':console.log('버튼1이 눌렸어요!😝')
                break
                case 'btn2':console.log('버튼2가 눌렸어요!😝')
                break
            }
        }
    </script>
    
</head>
<body>
    <h2>이벤트 객체2</h2>
    <button type="button" id="btn1" >버튼1</button>
    <button type="button" id="btn2" >버튼2</button>
    <button type="button" id="btn3" >버튼3</button>
</body>
</html>

 

3. 이벤트 타입(Event Type)

  • 발생한 이벤트의 종류를 나타내는 문자열로 이벤트명이라고도 함
  • 키보드, 마우스, HTML DOM, window 객체 등을 처리하는 이벤트 제공
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>이벤트 타입</title>
    <script>
        window.onload = function(){
            const text = document.getElementById("text")
            // 태그사이에 HTML 태그를 추가로 쓸수있게함
            text.innerHTML = "<b style='color:deeppink;'> HTML문서가 모두 로드되었습니다!</b>"
        }
        function changeText(el) {
            el.innerHTML="<b style='color:aqua;'>문자열이 변경되었습니다!😝</b>"
        }
    </script>
</head>
<body>
    <h2>이벤트 타입</h2>
    <p id="text"></p>
    <p onclick="changeText(this)">문자열을 클릭하세요</p>
    
</body>
</html>

4. 이벤트 타겟(Event Target)

  •  이벤트가 일어날 객체를 의미

5. 이벤트 리스너(Event Listener)

  • 이벤트가 발생했을 때 그 처리를 담당하는 함수
  • 이벤트 핸들러라고도 부름
  • 지정된 타입의 이벤트가 특정 요소에서 발생하면 웹 브라우저는 그 요소에 등록된 이벤트 리스너를 실행
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>이벤트 리스너</title>
    <script>
        window.onload = function() {
            const btn = document.getElementById('eventBtn')
            btn.addEventListener('click',clickBtn)  //이벤트타입, 이벤트리스너
            btn.addEventListener('mouseover', mouseOverBtn)
            btn.addEventListener('mouseout',mouseOutBtn)
        }
        
        function clickBtn(){
            document.getElementById('text').innerHTML = '<b>버튼을 클릭했어요!😀</b>'
        }   
        
        function mouseOverBtn() {
            document.getElementById('text').innerHTML = '<b>버튼 위에 커서가 올라갔어요!</b>'
        }

        function mouseOutBtn() {
            document.getElementById('text').innerHTML = '<b>버튼 밖으로 커서가 나갔어요!</b>'
        }
        function delEvent(){
            const btn = document.getElementById('eventBtn')
            btn.removeEventListener('click',clickBtn)
            btn.removeEventListener('mouseover',mouseOverBtn)
            btn.removeEventListener('mouseout',mouseOutBtn)
            document.getElementById('text').innerHTML = '<b>이벤트 리스너가 모두 삭제되었어요</b>'
        }
    </script>
</head>
<body>
    <h2>이벤트 리스너</h2>
    <p>
        <button id="eventBtn">이벤트 버튼</button>
        <button id="delBtn" onclick="delEvent()">이벤트 삭제 버튼</button>
    </p>
    <p id="text"></p>
</body>
</html>

    

MDN: Event

https://developer.mozilla.org/ko/docs/Web/API/Event

 

Event - Web API | MDN

Event 인터페이스는 DOM에서 발생하는 이벤트를 나타냅니다.

developer.mozilla.org

 

 

728x90
반응형
LIST

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

[JavaScript] 이터레이터(Iterator) & 이터러블(Iterable)  (0) 2023.04.19
[JavaScript] 이벤트 전파(Event Propagation) - 방식, 전파 막는 방법  (0) 2023.04.19
[JavaScript] URL & URI - 정의, 차이점, URL의 이스케이프 처리와 디코딩  (0) 2023.04.19
[JavaScript] wrapper class  (0) 2023.04.19
[JavaScript] 자바스크립트 객체 활용법  (0) 2023.04.14

관련글

티스토리툴바