[JS] 이벤트(event)란?

[JS] 이벤트(event)란?

이벤트는 어떤 사건을 의미함

이벤트(event)의 흔한 예

• 마우스 클릭 
• 마우스 휠을 돌려 스크롤을 했을 때
• 필드의 내용을 바꾸었을 때

이벤트 등록 방식

1. 인라인(inline) 방식

<input type="button" onclick="alert('Hello world');" value="button" />

onclick이 위와 같이 태그 안에 속성으로 들어가 있을 때
그러나 이러한 방식은 추천되지 않음

2. 프로퍼티 리스너 방식

이벤트 대상에 해당하는 객체의 프로퍼티로 이벤트를 등록하는 방식

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

event 핸들러를 하나밖에 지정하지 못하므로 추천하지 않음

3. addEventListerner()방식 (추천!)

addEventListener는 event를 덮어씌우는게 아니라 추가하기 때문에 아무리 많은 event 리스너도 순차적으로 추가 가능

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

출처

• https://opentutorials.org/course/1375/6761