나는 프로그래머다!/HTML5

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

저작자표시 비영리 변경금지