[js] 파이어베이스 연결하는데 계속 보이는 addEventListener ? 넌 구체적으로 뭐하는 친구니? (생활코딩)

 

파이어베이스 특강을 들으며 쌤이 주신 샘플코드를 하나하나 살펴보는데,

중간중간 계속 나오는 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>

첫번째 인자로 event 매개변수를 받는데, 저 event가 위에 t니까 value="button" 이 담길것이다.

 

ie8 이하에서는 addEventListener를 지원하지 않아서, attachEvent 를 이용하여 코드를 작성해야 한다고 하셨당

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);
    })
}

만약 저 value값이 없다면 'undefined'를 반환할 것이고, 자바스크립트에서 undefined는 곧 false를 의미한다.

따라서 if가 undefined로 나오면 else if가 실행될 것

 

attachEvent는 onclick이라고 써야하는데, addEventListener는 click이라고 써야한다.

 

 

그렇다면 addEventListener을 왜 쓰는거지?

 

아래처럼 작성하면, alert(2)만 실행이 된다 --> 위의 alert(1)은 실행되지 않는다. (하나만 실행되기 때문)

<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>

 

 

한마디로 하나의 이벤트 대상에 복수의 동일 이벤트 타입 리스너를 등록하기 위해 사용한다는 것!

 

아래처럼 addEventListener 를 작성하면, 복수의 이벤트를 등록할 수 있는 것

<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>