1. inline
* 이벤트를 이벤트 대상의 태그 속성으로 지정하는 것이다.
<input type="button" value="Inline" onclick="alert('Event > Inline');"/>
* 이벤트의 소재를 파악하기 용이하다.
* 정보인 HTML과 제어인 JavaScript가 혼재되어 좋은 방식은 아니다.
☆ 이벤트가 발생한 대상을 원하는 경우 this를 이용해 참조할 수 있다.
- 자기 자신을 참조
<input type="button" id="target" onclick="alert('Hello world, '+document.getElementById('target').value);" value="button" />
2. Property Listener
* 이벤트 대상에 해당하는 객체의 프로퍼티로 이벤트를 등록한다.
* HTML과 JavaScript를 분리한다.
<input type="button" id="button" value="button" /> <script> var t = document.getElementById('button'); t.onclick = function(){ // 프로퍼티 리스너 alert('Hello world'); } </script>
☆ 이벤트가 실행된 맥락의 정보가 필요할 때 이벤트 객체를 이용한다. 이는 이벤트가 실행될 때 이벤트 핸들러의 인자로 전달된다.
<body> <input type="button" id="btn" value="button" /> <script> var t = document.getElementById('btn'); t.onclick = function(event){ alert('Hello !--->'+event.target.value) }
★ IE8 이하 버전에서는 이벤트 객체가 핸들러의 인자가 아니라 전역객체의 event 프로퍼티로 제공한다. target 프로퍼티도 존대하지 않는다.
이를 위해 IE8 이하 버전까지 호환되도록 코드를 조정한다.
<input type="button" id="btn" value="button" /> <script> var t = document.getElementById('btn'); t.onclick = function(event){ var event = event || window.event; //event 또는 window.event var target = event.target || event.srcElement; //target 프로퍼티 또는 srcElement alert('Hello !--->, '+target.value) } </script>
3. addEventListener()
* 이벤트를 등록하는 가장 권장되는 방법
* 여러개의 이벤트 핸들러를 등록할 수 있다.
- 기본 방식
<input type="button" id="btn" value="button" />
<script>
var t = document.getElementById('btn');
t.addEventListener('click', function(event){
alert('Hello !--->, '+event.target.value);
});
</script>- IE8 이하 버전 호환 코드
<input type="button" id="btn" value="button" />
<script>
var t = document.getElementById('btn');
if(t.addEventListener){
t.addEventListener('click', function(event){
alert('Hello !--->, '+event.target.value);
});
} else if(t.attachEvent){
t.attachEvent('onclick', function(event){
alert('Hello !--->, '+event.target.value);
})
}
</script>- 하나의 이벤트 대상 : 복수의 동일 이벤트 리스너
<input type="button" id="btn" value="button" /> <script> var t = document.getElementById('btn'); // 이벤트 대상 1 t.addEventListener('click', function(event){ // 이벤트 리스너 1 alert(1); }); t.addEventListener('click', function(event){ // 이벤트 리스너 2 alert(2); }); </script>
- 복수의 이벤트 대상 : 하나의 이벤트 리스너
<input type="button" id="btn1" value="버튼 1" />
<input type="button" id="btn2" value="버튼 2" />
<script>
var t1 = document.getElementById('btn1');
var t2 = document.getElementById('btn2');
function btn_listener(event){ // 버튼 별 이벤트 핸들러
switch(event.target.id){
case 'btn1':
alert(1);
break;
case 'btn2':
alert(2);
break;
}
}
t1.addEventListener('click', btn_listener);
t2.addEventListener('click', btn_listener);
</script>
'WEB > JavaScript' 카테고리의 다른 글
| 이벤트 : 기본 이벤트 취소 (0) | 2016.10.17 |
|---|---|
| 이벤트 : 전파 (0) | 2016.10.16 |
| 이벤트 (0) | 2016.10.16 |
| 요소의 위치와 크기 (0) | 2016.10.16 |
| Text 객체 : 조작 API (0) | 2016.10.16 |
