JavaScript - 이벤트

ironmask84 2015. 7. 28. 11:21

<!DOCTYPE html>
<html>
<body>
    <input type="button" onclick="alert(window.location)" value="alert(window.href)" />
    <input type="button" onclick="window.open('bom.html')" value="window.open('bom.html')" />
</body>
</html>

event target
->target은 이벤트가 일어날 객체를 의미한다.

event type
->이벤트의 종류를 의미한다.
(https://developer.mozilla.org/en-US/docs/Web/Reference/Events)

event handler
-> 이벤트가 발생했을 때 동작하는 코드를 의미한다.
위의 예제에서는 alert(window.location)이 여기에 해당한다.

출처 : https://opentutorials.org/module/904/6629

** 이벤트 등록방법

1. inline : 이벤트를 이벤트 대상의 태그 속성으로 지정하는 것이다.
<input type="button" onclick="alert('Hello world');" value="button" /> <input type="button" onclick="alert('Hello world, '+this.value);" value="button" />

2. property listener :
이벤트 대상에 해당하는 객체의 프로퍼티로 이벤트를 등록하는 방식
event 객체에는 여러가지 정보가 담겨있다!!(console.dir(event); 확인)

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

// I.E 8이하 버젼 호환을 위해서는 아래와 같이 추가 예외처리 필요

<input type="button" id="target" value="button" />

<script>

    var t = document.getElementById('target');

    t.onclick = function(event){

        var event = event || window.event;

        var target = event.target || event.srcElement;

        alert('Hello world, '+target.value)

}

</script>

3. addEventListener() :
가장 권장하는 방식. 한 target에 여러 이벤트 등록 혹은 정의해 놓은 한 이벤트 핸들러를 여러 객체에 등록할 수 있다.

var t = document.getElementById('target');

if(t.addEventListener){

    t.addEventListener('click', function(event){

        alert('Hello world, '+event.target.value);

});

} else if(t.attachEvent){    // I.E 8이하 버젼의 호환을 위해..

    t.attachEvent('onclick', function(event){

        alert('Hello world, '+event.target.value);

})

}

// 한 target에 여러 이벤트를 등록

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

// 하나의 리스너로 여러 target에 적용

<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/module/904/6759
https://opentutorials.org/module/904/6760
https://opentutorials.org/module/904/6761

저작자표시 비영리 변경금지 (새창열림)