자바스크립트 이벤트 - 자바스크립트 강좌 6강
이번 강좌에서는 사용자가 오퍼레이션을 하는 각각의 형태에 따른 이벤트에 대해 공부하겠습니다.
※이벤트(Event)란?
우리가 흔히 생각하는 이벤트란 무엇일까요?
아마도 엄청 많은듯 한데요.
외식사업장에서 진행하는 이벤트, 게임에서 진행하는 이벤트, 여러형태의 가전제품 매장에서 진행하는 이벤트 등등..
참 다양한 이벤트들이 있습니다.
웹문서에도 마찬가지로 이벤트가 존재합니다.
사용자는 웹문서를 통해 정보를 가져가거나 입력할때 다양한 형태로 키보드나 마우스를 활용하여 오퍼레이션을 하죠.
바로 그때 발생하는것을 웹문서에서 이벤트라고 합니다.
가장 많이 사용하고 간단한 예를 들자면, 마우스 왼쪽클릭 혹은 오른쪽 클릭.. 이러한 것들이 있습니다.
예제)
1. 스크립트 코드
<script>
function clickEvent(){
alert("클릭했네요!");
}
</script>
2. 본문 코드
<body>
<input type="button" value="클릭시이벤트" onclick="clickEvent()">
</body>
결과)
위 예제는 아주 많이 사용하고 흔한 형태의 이벤트를 표현한 예제입니다.
사용자가 클릭을 하면 "클릭했네요!"라는 메시지를 보여주는 이벤트죠.
위 예제를 통해 이벤트의 구성에 대해 설명을 하겠습니다.
(1) 이벤트 타입 : 위 예제에서 이벤트 타입은 click 입니다. click 외에도 다양한 타입이 존재합니다.
(2) 이벤트 핸들러 : 위 예제에서 이벤트 핸들러는 바로 onclick=""에서 지정해준 clickEvent() 입니다.
(3) 이벤트 타겟 : 위 예제에서 이벤트 타겟은 바로 버튼입니다.
이벤트를 설정하고 싶은 타겟에 이벤트 타입을 지정하고 이벤트 핸들러를 지정하면 이벤트 설정이 완료됩니다.
※이벤트 등록방법
이벤트를 등록하는 방법에는 몇 가지 형태가 존재합니다.
△인라인(Inline) 방식
인라인 방식으로 이벤트를 등록하는 방식은 이벤트 대상의 태그 속성에 이벤트 핸들러를 직접 입력하는 방식입니다.
예제1)
<body>
<input type="button" value="클릭시이벤트" onclick="alert('클릭했네요!')">
</body>
예제2)
<body>
<input type="button" value="굿잡" onclick="alert('클릭했네요!, '+this.value);">
</body>
위 예제1은 단순한 형태의 메시지 이벤트 입니다.
그런데 예제2를 보면 예제1과 약간 다르죠.
바로 this라는 놈이 나오는데요.
this란 이벤트를 지정한 태그 자신을 의미하고 this.value는 그 태그의 value 값을 말합니다.
결과)
굿잡이란 버튼을 클릭하면 "클릭했네요!" 라는 메시지와 더불어 굿잡이란 버튼의 value값 까지 포함하여 메시지를 띄우는 형태입니다.
△프로퍼티 리스너 방식
프로퍼티 리스너 방식은 이벤트 대상에 해당하는 객체의 프로퍼티를 이용하여 이벤트를 설정하는 방식입니다.
예제)
1. 스크립트 코드
<script>
var objBtn = document.getElementById("inputBtn");
objBtn.onclick = function(){
alert("안녕하세요!");
}
</script>
2. 본문 코드
<body>
<input type="button" value="굿잡" id="inputBtn">
</body>
자 그런데 이러한 방식으로 이벤트를 설정하려면 반드시 주의해야 할 점이 있습니다.
바로 이벤트를 설정할 태그보다 스크립트 코드를 먼저 작성하면 안된다는 것입니다.
이유는 다음과 같습니다.
위 방식의 이벤트는 스크립트 코드에서 태그의 프로퍼티 값을 가져와야 합니다.
그런데 태그보다 스크립트 코드가 먼저 실행이 되면 태그에서 가져올 프로퍼티가 존재하지 않겠죠.
위에서부터 문서를 읽기 시작하기 때문입니다.
그렇기에 태그보다 아래쪽에 스크립트 코드를 작성해야 태그의 프로퍼티를 가져올 수 있는거죠.
아래와 같이 작성을 하면 문제없이 실행이 됩니다.
<body>
<input type="button" value="클릭" id="inputBtn">
</body>
<script>
var objBtn = document.getElementById("inputBtn");
objBtn.onclick = function(){
alert("안녕하세요!");
}
</script>
△addEventListener 방식
addEventListener방식은 여러가지 타입의 이벤트를 등록할 수 있는 방식입니다.
(주의할점은 IE8 버전 이하에서는 실행이 안되므로 attachEvent 메소드를 사용해야 합니다.)
예제)
<body>
<input type="button" id="inputBtn" value="이벤트">
</body>
<script>
var btn = document.getElementById('inputBtn');
if(btn.addEventListener){
btn.addEventListener('click', function(event){
alert('click, '+event.target.value);
});
btn.addEventListener('mouseover', function(event){
alert('mouseover, '+event.target.value);
});
}
</script>
결과)
대부분 addEventListener방식을 주로 사용하고 권장합니다.
하지만 이 외에도 첫번째로 보여주었던 예제인 메소드를 생성하고 메소드를 연결하는 이벤트 방식도 있습니다. 제가 주로 사용하는 방식이기도 하죠. 위 예제들 처럼 다양한 방식으로 테스트를 진행보길 권합니다~
'코딩이야기 > Javascript' 카테고리의 다른 글
| 자바스크립트 이메일 검증 - 자바스크립트 강좌 8강 (0) | 2016.11.09 |
|---|---|
| 자바스크립트 폼 유효성 검증 - 자바스크립트 강좌 7강 (0) | 2016.11.08 |
| 자바스크립트 DOM/문서제어 - 자바스크립트 강좌 5강 (1) | 2016.05.03 |
| 자바스크립트 팝업/window - 자바스크립트 강좌 4강 (0) | 2016.04.17 |
| 자바스크립트 location/navigator - 자바스크립트 강좌 3강 (3) | 2016.04.15 |