addEventListener( )

 

생활코딩 웹브라우저 javascript를 참고하여 공부하였습니다.

스스로 공부한 것을 정리하고 복습하기 위한 목적으로 작성하였습니다.

( 출처 :  https://opentutorials.org/course/743inf.run/pBzy)

---

 addEventListener(  ) 

addEventListener은 이벤트를 등록하는 가장 권장되는 방식이다.

이 방식을 이용하면 여러개의 이벤트 핸들러를 등록할 수 있다.

---

<input type="button" id="target" value="button" />
<script>
    var t = document.getElementById('target');
    t.addEventListener('click', function(event){
        alert('Hello world, '+event.target.value);
    });
</script>

위 코드와 같이 t객체에 addEventListener을 이용하여, 해당 객체를 클릭하면 두번째 인자의 함수가 실행된다.

---

하지만, 위 방식은 ie8이하에서는 호환되지 않는다. 

따라서,  attachEvent 메소드를 사용해야 하며, 이것은 addEventListener와 같은 방식인데 이름만 다른 것이다.

var t = document.getElementById('target');
if(t.addEventListener){
    t.addEventListener('click', function(event){
        alert('Hello world, '+event.target.value);
    }); 
} else if(t.attachEvent){
    t.attachEvent('onclick', function(event){
        alert('Hello world, '+event.target.value);
    })
}

요즘은 이런 문제들을 라이브러리가 알아서 처리해준다.

---

addEventListener 방식의 장점은 하나의 이벤트 대상에 복수의 동일 이벤트 타입 리스너를 등록할 수 있다는 것이다.

<input type="button" id="target" value="button" />
<script>
    var t = document.getElementById('target');
    t.addEventListener('click', function(event){
        alert(1);
    });
    t.addEventListener('click', function(event){
        alert(2);
    });
</script>

---

이벤트 객체를 이용하면 복수의 element에 하나의 리스너를 등록해서 재사용할 수 있다. 

이에 반면, property 방식으로 복수의 이벤트를 설치하면 하나의 이벤트 핸들러만 설치가 가능하다.

<input type="button" id="target1" value="button1" />
<input type="button" id="target2" value="button2" />
<script>
    var t1 = document.getElementById('target1');
    var t2 = document.getElementById('target2');
    function btn_listener(event){
        switch(event.target.id){
            case 'target1':
                alert(1);
                break;
            case 'target2':
                alert(2);
                break;
        }
    }
    t1.addEventListener('click', btn_listener);
    t2.addEventListener('click', btn_listener);
</script>

위 소스와 같이 이벤트 리스너를 하나 만들어 놓고, 여러 개의 이벤트 target에다가 등록하는 것을 통해서 이벤트 리스너를 재활용할 수 있다.

 

여기서, 문제는 이벤트 target이 이벤트 발생시켰을 때, 그 이벤트가 어느 위치에서 발생하는 것을 알아야 한다.

이때 사용된 것이 event.target.id이다.