[JavaScript] 이벤트 등록방법
이벤트 등록방법
1. inline
인라인(inline) 방식으로 이벤트를 등록하는 방법을 알아보자. 인라인 방식은 이벤트를 이벤트 대상의 태그 속성으로 지정하는 것이다.(해당 태그안에 이벤트가 속성으로 직접 들어간 경우)
다음은 버튼을 클릭했을 때 Hello world를 경고창으로 출력한다.
<input type="button" onclick="alert('Hello world');" value="button" />
이벤트가 발생한 대상을 필요로하는 경우 this를 통해서 참조할 수 있다.
자바스크립트에서 this는 어떤 함수에서 this를 사용한다는 것은 그 함수가 속해있는 객체를 의미(자기 자신을 의미)
<!--자기 자신을 참조하는 불편한 방법-->
<input type="button" id="target" onclick="alert('Hello world, '+document.getElementById('target').value);" value="button" />
<!--this를 통해서 간편하게 참조할 수 있다-->
<input type="button" onclick="alert('Hello world, '+this.value);" value="button" />
this는 이벤트가 동작하고 있는 엘리먼트(input)을 가리킨다. --> 짧고 편리하게 코드를 작성할 수 있다.
인라인 방식은 태그에 이벤트가 포함되기 때문에 이벤트의 소재를 파악하는 것이 편리하다. 하지만 정보인 HTML과 제어인 JavaScript가 혼재된 형태이기 때문에 바람직한 방법이라고 할수는 없다.
2. 프로퍼티 리스너
프로퍼티 리스너 방식은 이벤트 대상에 해당하는 객체의 프로퍼티로 이벤트를 등록하는 방식이다. 인라인 방식에 비해서 HTML과 JavaScript를 분리할 수 있다는 점에서 선호되는 방식이지만 뒤에서 배울 addEventListener 방식을 추천한다.
<input type="button" id="target" value="button" />
<script>
var t = document.getElementById('target');
t.onclick = function(){
alert('Hello world');
}
</script>
t라는 객체중에 onclick(내장됨) 프로퍼티에 정의된 메소드를 실행하게된다.
(1) 이벤트 객체
이벤트가 실행된 맥락의 정보가 필요할 때는 이벤트 객체를 사용한다. 이벤트 객체는 이벤트가 실행될 때 이벤트 핸들러의 인자로 전달된다.
<body>
<input type="button" id="target" value="button" />
<script>
var t = document.getElementById('target');
t.onclick = function(event){
alert('Hello world, '+event.target.value)
// console.dir(event); --> 이벤트에 대한 다양한 정보를 출력한다.
} --> 이벤트 핸들러
// 익명함수의 첫번째 인자로 event객체를 전달하기로 약속되어 있다. 이벤트 호출될때 event 파라미터를 통해서 현재 발생한 이벤트에 대한 다양한 정보를 얻을 수 있다.
// input button을 클릭하면 이에 해당하는 이벤트 핸들러가 호출된다. 호출시 이벤트 객체(event)를 전달한다.
// 이 코드에서는 event 객체가 가진 프로퍼티 중에서 target 프로퍼티를 사용한다.
// target 프로퍼티는 이벤트가 호출된 시점에서 그 이벤트가 어디서 발생했는지를 알 수 있게 해주는 프로퍼티이다.
// value는 target이 되는 객체의 value 값을 말한다. 여기서는 value="button" 이다.
</script>
실행결과)
Hello world, button
ie8 이하 버전에서는 이벤트 객체를 핸들러의 인자가 아니라 전역객체의 event 프로퍼티로 제공한다. 또한 target 프로퍼티도 지원하지 않는다. 아래는 이 문제를 해소하기 위한 코드다.
<input type="button" id="target" value="button" />
<script>
var t = document.getElementById('target');
t.onclick = function(event){
var event = event || window.event;// window.event는 IE 브라우저의 이벤트 프로퍼티(크로스 브라우징)
var target = event.target || event.srcElement;
alert('Hello world, '+target.value)
}
</script>
3. addEventListener()
addEventListener은 이벤트를 등록하는 가장 권장되는 방식이다. 이 방식을 이용하면 여러개의 이벤트 핸들러를 등록할 수 있다.
<input type="button" id="target" value="button" />
<script>
var t = document.getElementById('target');
t.addEventListener('click', function(event){// click 이벤트 발생시, 두번째 인자의 함수가 실행된다.
alert('Hello world, '+event.target.value);//프로퍼티 리스너 유사(두번째 인자)
});
</script>
이 방식은 ie8이하에서는 호환되지 않는다.
ie에서는 attachEvent 메소드를 사용해야 한다. jQuery를 사용하면 호환성 문제 해결된다.
var t = document.getElementById('target');
if(t.addEventListener){//false=undefinded
t.addEventListener('click', function(event){
alert('Hello world, '+event.target.value);
});
} else if(t.attachEvent){//addEventListener이 없다면 attachEvent를 사용한다.
t.attachEvent('onclick', function(event){//attachEvent는 onclick
alert('Hello world, '+event.target.value);
})
}
이 방식의 중요한 장점은 하나의 이벤트 대상에 복수의 동일 이벤트 타입 리스너를 등록할 수 있다는 점이다.
addEventListner는 이벤트를 덮어쓰는 것이 아니라 add해주는 것이라서 복수로 사용이 가능한다.
뒷 단원 캡처링과 버블링이란 개념은 이벤트 전파 방식도 복수의 이벤트가 설치될 경우를 전제로 하므로 addEventListener로 이벤트 등록 방식을 사용할 경우에만 해당한다.
<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>
프로퍼티 리스너 방식은 하나만 실행된다.--> 위 예제에서는 '2'(alert)만 실행된다.
이벤트 객체를 이용하면 복수의 엘리먼트에 하나의 리스너를 등록해서 재사용할 수 있다.
<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){ // btn_listener는 이벤트 리스너로 사용될 함수이다.
switch(event.target.id){// 각각 event 객체로 전달된 target 프로퍼티에서 id의 값을 알 수 있다.
case 'target1':
alert(1);
break;
case 'target2':
alert(2);
break;
}
}
t1.addEventListener('click', btn_listener); // click시 t1의 식별자로 btn_listener 이벤트가 실행된다.
t2.addEventListener('click', btn_listener); // click시 t2의 식별자로 btn_listener 이벤트가 실행된다.
// 이제 버튼 2개를 이용하여 하나의 이벤트 핸들러로 이벤트를 처리할 수 있다.--> 많은 코드를 재활용할 수 있다.
</script>
출처: https://devbox.tistory.com/entry/JavaScript-이벤트-등록방법?category=574556 [장인개발자를 꿈꾸는 :: 기록하는 공간]
'Javascript > JavaScript' 카테고리의 다른 글
| 자바스크립트 함수 Core (this, arguments, closure, memoization 등) (0) | 2021.03.23 |
|---|---|
| JS를 이용한 HTML include(header,nav,footer 따로 관리하기) (0) | 2021.03.23 |
| 자바스크립트(JavaScript) 공부 (0) | 2021.03.23 |
| [JavaScript] 이벤트 타입 (0) | 2020.07.07 |
| [JavaScript] 이벤트 (0) | 2020.07.07 |
| [JavaScript] Text 객체 (0) | 2020.07.07 |
| [JavaScript] Document 객체 (0) | 2020.07.07 |
| [JavaScript] Node 객체 (0) | 2020.07.07 |