[DOM 이벤트] Event Object Method

1. preventDefault()

웹브라우저에서 제공하는 기본적인 이벤트를 수행하지 않도록 한다. 예를 들어, <a> 태그의 경우 기본적인 기능이 하이퍼링크인데, 하이퍼링크 기능을 수행되지 않도록 해준다.

<a href="http://martinwork.tistory.com" onclick="func(event)">링크이동</a>
    <script>
        function func(event){
            event.preventDefault();
        }
   </script>

위의 소스처럼 preventDefalut()를 사용하면 a의 하이퍼링크 기능이 실행되지 않는다.

2.stopPropagation()

해당 기능을 이해하기 위해서는 버블링 효과에 대해서 이해를 해야합니다

    <div onclick=" func()">
        <a href="#none" onclick="func(event)">버튼</a>
    </div>
    <script>
        var cnt = 0;
        function func(event){
            cnt++;
            alert("cnt의 값은 " + cnt + "입니다.");
        }
   </script>
 

위와 같이 실행을 했을 경우를 보면 div 태그와 a 태그를 클릭하였을 경우 func 라는 함수를 실행하게 되어있다.

func라는 함수는 기존 설정해 놓은 cnt의 값을 1번 증감한 후에 메세지창으로 cnt 의 값을 보여준다. 

위 소스에서  a 태그만 클릭하면 cnt가 한번 증감되며, 메세지창 에서는 "cnt의 값은 1입니다" 라고 떠야하지만, 실제 클릭을 하면 cnt가 총 2번 증감되며 메세지창이 2번뜨는 것을 볼 수 있다. 이것을 바로 버블링 효과라고 한다. 같은 이벤트가 바인딩되어 있을 경우, (위의 소스는 onclick 이벤트) a태그를 클릭해도 이벤트는 a 태그에서만 그치는 것이 아니라, a 태그의 부모 div까지 영향을 미친다. 이 것을 방지하는 것이 stopPropagation()이다.

기본적으로 propagation의 의미는 확산, 전파의 의미를 가지고 있다. 이 기능은 이벤트가 바인딩되어있는 노드 외에 그 상위 노드로 이벤트가 전파되는 것을 방지한다. 위의 소스를 수정하면 아래와 같다.

    <div onclick=" func()">
        <a href="#none" onclick="func(event)">버튼</a>
    </div>
    <script>
        var cnt = 0;
        function func(event){
            cnt++;
            alert("cnt의 값은 " + cnt + "입니다.");
            event.stopPropagation();
        }
   </script>
 

이처럼 event.stopPropagation()을 추가해줌으로써 원하던 바와 같이 버튼을 클릭했을 경우 증감이 1번 되여 메세지창 역시 1번만 뜰 수 있게 할 수 있다.

3. stopImmediatePropagation()

Dom에 같은 이벤트가 바인딩 되어 있을 경우, 중복된 이벤트의 실행을 중지시킨다. 

    <a href="#none" id="btn">버튼</a>
    <script>
        var btn = document.getElementById("btn"),
            cnt =0;
 
        btn.addEventListener("click", func1);
        btn.addEventListener("click", func2);
        function func1(event){
            cnt++;
            alert("버튼을" + cnt + "번 클릭하였습니다.");
            event.stopImmediatePropagation();
        }
        function func2(){
            cnt++;
            alert("버튼을" + cnt + "번 클릭하였습니다.");
        }
   </script>
 

 위의 소스를 볼 경우 a 태그에 이벤트 리스너를 이용하여 기능을 func1과 func2라는 함수를 실행시킨다. 하지만 func1에서 event.stopImmediatePropagation()을 사용함으로써 a태그를 클릭하여도 func2는 실행되지 않는다.