등록방법
이벤트 프로그래밍을 하기 위해서는 이벤트의 대상에 이벤트 핸들러를 등록해줘야 한다. 웹브라우저에서는 크게 3가지 종류의 등록방법을 제공한다.
inline
인라인 방식은 이벤트를 이벤트 대상의 태그 속성으로 지정하는 것이다.
인라인 방식은 태그에 이벤트가 포함되기 때문에 이벤트의 소재를 파악하는 것이 편리하다. 하지만 정보인 HTML과 제어인 JavaScript가 혼재된 형태이기 때문에 바람직한 방법이라고 할수는 없다.
<input type="button" onclick="alert('jin seok');" value="button" />
이벤트가 발생한 대상을 필요로하는 경우 this를 통해서 참조할 수 있다.
<!--자기 자신을 참조하는 불편한 방법-->
<input type="button" id="target" onclick="alert('jin seok, '+document.getElementById('target').value);" value="button" />
<!--this를 통해서 간편하게 참조할 수 있다-->
<input type="button" onclick="alert('jin seok, '+this.value);" value="button" />
프로퍼티 리스너
프로퍼티 리스너 방식은 이벤트 대상에 해당하는 객체의 프로퍼티로 이벤트를 등록하는 방식이다. 인라인 방식에 비해서 HTML과 JavaScript를 분리할 수 있다는 점이 있다.
<input type="button" id="target" value="button" />
<script>
var t = document.getElementById('target');
t.onclick = function(){
alert('jin seok');
}
</script>var t = document.getElementById('target');을 이용하여 이벤트 대상인 input태그를 객체의 프로퍼티로 등록한 것을 확인 할 수 있다.
이벤트 객체
이벤트가 실행된 맥락의 정보가 필요할 때는 이벤트 객체를 사용한다. 이벤트 객체는 이벤트가 실행될 때 이벤트 핸들러의 인자로 전달된다.
<body>
<input type="button" id="target" value="button" />
<script>
var t = document.getElementById('target');
t.onclick = function(event){
alert('jin seok, '+event.target.value)
}
</script>
- +event.target.value을 이용하여 이벤트 핸들러의 인자로 이벤트가 실행된 맥락의 정보인 input 태그의 value값이 전달한 것을 확인 할 수 있다.
- 이때 이벤트 헨들러인 함수 function(event)의 event는 이벤트 헨들러인 function() 함수의 첫 번째 인자로 event 객체로 정의하여 event 객체를 받아 내어 이벤트 헨들러 함수가 호출될 때 다양한 event 정보를 받아 낼 수 있게 하는 일종의 파라미터를 해주게 하는 약속이다.
- target은 event 내에서 어디서 발생한 것인지 알려주는 프로퍼티라고 할 수 있다.
addEventListener()
addEventListener은 이벤트를 등록하는 가장 권장되는 방식이다. 이 방식을 이용하면 여러개의 이벤트 핸들러를 등록할 수 있다.
<input type="button" id="target" value="button" />
<script>
var t = document.getElementById('target');
t.addEventListener('click', function(event){
alert('jinseok, '+event.target.value);
});
</script>addEventListener의 첫 번째 인자는 '이벤트 타입'('click'...여러 종류 등등)이 들어가고 이벤트 타입이 실행되면 두 번째 인자의 '이벤트 리스너' 함수가 호출된다.
이 방식의 중요한 장점인 이벤트 대상에 복수의 동일 이벤트 타입 리스너를 등록할 수 있다는 점이다.
↓
<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>
이벤트 객체를 이용하면 복수의 엘리먼트에 하나의 리스너를 등록해서 재사용할 수 있다.
↓
<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>
- 위의 코드에서 btn_listener 함수의 인자 event와 switch문의 인자에 event.target.id가 들어가 있어 '이벤트 객체'를 사용하는 것을 확인할 수 있다
※ 이때 addEventListener의 두 번째 인자인 이벤트 리스너의 함수 btn_listener 뒤에 ()가 붙지 않은 이유는 자바스크립트에서 함수 객체를 실행시킨다는 의미가 되버려 함수를 이미 실행한 리턴값을 적용하는 의미로 받아드려지기 때문에 ()가 붙지 않는다.
'프로그래밍 개발 > JS 웹' 카테고리의 다른 글
| Javascript 이벤트 - 기본동작의 취소 (0) | 2020.11.23 |
|---|---|
| Javascript 이벤트 전파 - 버블링과 캡처링 (0) | 2020.11.23 |
| Javascript 이벤트 (0) | 2020.11.23 |
| Javascript 문서의 기하학적 특성 (0) | 2020.11.23 |
| Javascript Text 객체 - 조작 API (0) | 2020.11.20 |
댓글