[JS] Event / 버블링 / 캡쳐링

이벤트

• 마우스 이벤트(click, mouseover, mouseout, mousemove ...)
• 폼 요소 이벤트(submit, focus)
• 키보드 이벤트(keydown, keyup)
• 문서 이벤트

등의 DOM 이벤트 들이 있는데 이러한 이벤트가 발생했을 경우 실행되는 함수를 이벤트 핸들러라고 하며

핸들러를 할당하는 방법은 다양하다.

1. HTML 속성

HTML 안의 onevent 속성에 이벤트 핸들러 할당하는 방법
Ex. <h1 onclick="실행코드"> 등
간단한 코드는 그냥 작성하기도 하지만 코드가 길다면 별도의 함수를 만들고 이를 호출한다.

<button onclick="alert('클릭했네?');">클릭해보세요</button>
    <button onmouseover="mouseover(this);">마우스를 올려보세요</button>
    <script>
        function mouseover(elem){
            alert('마우스 올리지마세요!');
            // 핸들러 내부에 쓰인 this의 값은
            // 핸들러가 할당 된 요소 => 이벤트가 발생한 button
            console.log(elem);
            console.log(elem.innerHTML);
            elem.innerHTML = '마우스 올리지 마세요!';
        }
    </script>

2. DOM 프로퍼티

요소 객체가 가지고 있는 onevent 속성에 이벤트 핸들러를 연결 하는 방법
Ex. element.onclick = 이벤트핸들러(함수);
해당 프로퍼티는 하나 밖에 없기 때문에 여러 개의 이벤트를 할당할 수는 없다.
만약 이벤트 객체를 제거할 때에는 속성 값에 null을 넣어주면 된다.

<button id="test1">test1 실행 확인</button>
    <button id="test2">test2 실행 확인</button>
    <div id="area1" class="area"></div>
    <script>
        let test1 = document.getElementById('test1');
        let test2 = document.getElementById('test2');

        test1.onclick = function(){
            document.getElementById('area1').innerHTML 
            += 'test1이 실행되었습니다.<br>'; 
            // 핸들러 내부에 쓰인 this의 값은 핸들러가 할당 된 요소
            // => 이벤트가 발생한 버튼
            console.log(this);
            console.log(this.innerHTML);
        };

        // 이전 이벤트 핸들러는 무시된다 => 하나의 이벤트 밖에 연결 할 수 없음
        test1.onclick = () => alert('이벤트 덮어쓰기!');

        function removeEvent(){
            document.getElementById('area1').innerHTML 
            += "test2가 실행되면서 test1 이벤트 제거<br>";
            test1.onclick = null;
        }

        // 선언 되어 있는 함수를 핸들러에 할당함
        test2.onclick = removeEvent;

    </script>

3. addEventListener

1, 2번 방식의 이벤트 핸들러 할당의 경우 복수의 핸들러 할당 불가
element.addEventListener(event, handler, [options])
element.removeEventListener(event, handler, [options])
위의 메소드로 핸들러를 추가/삭제하면서 복수의 핸들러를 할당할 수 있다.

<button id="btn">실행확인</button>
    <script>
        let btn = document.querySelector("#btn");
        // 복수의 이벤트 핸들러 할당 가능
        btn.addEventListener('click', () => alert('첫 번째 이벤트 동작!'));
        btn.addEventListener('click', () => btn.style.background = 'red');

        // 핸들러를 삭제하려면 핸들러 할당 시 사용한 함수를
        // 그대로 전달해야 하므로 위와 같은 경우는 삭제 불가
        // 함수 선언하여 핸들러 할당해서 삭제해보기
        function myFunction(){
            alert('곧 삭제될 친구!');
        }

        btn.addEventListener('mouseover', myFunction);

        // 삭제 테스트
        btn.removeEventListener('mouseover', myFunction);
    </script>

이벤트 객체

이벤트 객체는 이벤트에 대한 상세한 정보 (눌린 키보드 키, 마우스 클릭 된 좌표 등)를 가지고 있다.
이벤트가 발생하면 브라우저는 이벤트 객체를 만들어 핸들러에 인수 형태로 전달한다.
핸들러 내부에서 이벤트 타입과 요소 이벤트가 발생한 좌표 등을 확인할 수 있다.

<button id="evtObj">이벤트 객체 확인</button>
    <!-- HTML 속성 안에서도 event 객체 사용 가능 -->
    <button onclick="console.log(event);">이벤트 객체 확인</button>
    <script>
        let evtObj = document.querySelector("#evtObj");
        evtObj.onclick = function(event){
            console.log(event);
            console.log(event.type + " 이벤트");
            console.log(event.currentTarget);
            console.log("에서 발생");
            console.log("이벤트가 발생한 곳의 좌표는 ");
            console.log(event.clientX + " : " + event.clientY);
        };
    </script>

* console 출력확인 *
  click 이벤트

  <button id="evtObj">이벤트 객체 확인</button> 에서 발생
  이벤트가 발생한 곳의 좌표는 
  96 : 580

 

---

버블링과 캡쳐링

버블링이란 한 요소에 이벤트가 발생하면 할당 된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작하는 것
가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복 되면서 요소 각각에 할당 된 핸들러가 동작한다.

 

이벤트 버블링 막기

event.target : 실제 이벤트가 시작 된 타깃 요소로 버블링이 진행되어도 변함이 없음
event.currentTarget : 현재 실행 중인 핸들러가 할당 된 요소를 의미
이벤트 객체의 메소드 event.stopPropagation()을 사용하면 버블링 중단을 명령함

 

이벤트 캡쳐링

캡처링 : 이벤트가 하위 요소로 전파
버블링 : 이벤트가 상위 요소로 전파
캡쳐링 단계에서 이벤트를 잡아내려면 addEventListener의 capture 옵션을 true로 설정

 

기본 이벤트의 제거

기본 이벤트란
- a 태그를 통한 페이지 이동
- submit 시 입력 양식 제출 후 페이지 갱신
등의 브라우저 기본 동작을 말함
태그에 기본적으로 설정 되어 있는 이벤트를 제거하는 방법은
1. event.preventDefault()

<a href="#" onclick="event.preventDefault()">클릭해도 절대 이동할 수 없는 a태그</a>

2. onevent를 통해 할당 된 이벤트 핸들러의 return 값을 false로 반환

<form onsubmit="return invalidate();">
        <label for="password">비밀번호 : </label>
        <input type="password" name="password" id="password" requried>
        <br>
        <label for="checkPwd">비밀번호 확인 : </label>
        <input type="password" name="checkPwd" id="checkPwd" required>
        <input type="submit" value="제출">
    </form>

    <script>
        function invalidate(){
            let pwd1 = document.getElementById('password').value;
            let pwd2 = document.getElementById('checkPwd').value;

            if(pwd1 == pwd2){
                alert('입력 비밀번호가 일치합니다');
            } else {
                alert('입력 비밀번호가 일치하지 않습니다');
                document.getElementById('checkPwd').select();
                return false;
            }
        }   
    </script>