웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
자바스크립트를 사용한 이벤트 사용에 대하여 알아보고자합니다. 먼저 자바스크립트에서 말하는 이벤트는 무엇일까요? 그리고 클릭 등의 이벤트를 어떻게 사용하는지 아주 간단한 예제를 만들어 같이 알아봅니다.
- 클릭 / 더블클릭 click, dbclick
- 마우스오버 mouseover
- 마우스아웃 mouseout
- 마우스 드래그 drag
- 타임아웃 setTimeout
- 타임인터벌 setInterval
- 값의 변화 onchange
그 외에도 여러가지 이벤트를 동작할 수 있습니다. 이런 이벤트는 대부분 키보드, 마우스, 태블릿 등의 디바이스를 조작하는 것들이 대부분 이지만 게임패드나 리더기 등등에 반응하는 이벤트도 있다는 점을 참고하세요.
이처럼 트리거가 동작하면 예약된 함수인 이벤트 함수가 동작하게됩니다. 간단한 예제를 만들어보면서 자세히 알아보겠습니다.
- 버튼을 생성
- 버튼에 클릭 이벤트를 추가
- 클릭시 "클릭"이란 문구를 출력
매우 간단합니다. 그럼 차근차근 알아보겠습니다.
1. 버튼을 생성
button 태그를 사용해 클릭 가능한 요소를 만듭니다.
2. 버튼에 클릭이벤트를 추가
클릭에 동작하는 버튼을 만들기 위하여 클릭이벤트를 추가하고 이벤트 핸들러인 이벤트함수를 추가합니다. 이벤트 핸들러(event handler)는 이벤트가 발생할 경우 이를 전달받는 함수를 말합니다.
3. DOM 태그에 이벤트를 만드는 onclick 속성을 추가하는 방법
이번에는 dom 엘리먼트에 onclick 어트리뷰트를 추가하여 이벤트를 동작하는 방법입니다. 생성한 버튼 엘리먼트에 클릭이벤트를 추가하도록 하겠습니다.
위 방법은 순수 자바스크립트를 사용하는 방법입니다. 이제 해당 코드를 실행하고 클릭하면 해당하는 메시지를 띄우게됩니다. 실제로 잘 동작하는지 아래에서 버튼을 클릭해보세요.
위 예제는 매우 간단하지만 대부분의 이벤트는 이처럼 동작하게됩니다. 여기까지 이벤트를 추가하고 실행하는 방법을 알아보았습니다.
! 참고사항
참고로 실제 웹어플리케이션을 만들때는 고려할 사항이 더욱 많습니다.
- 이벤트 추가 외에 제거하는 방법
- 이벤트 등록시 성능 개선 부분
- 이벤트에 적은 리소스를 사용하는 방법
- 이벤트의 완료 후 메모리에 남지 않도록 하기
- 이벤트 간섭, 캡쳐링 및 버블링 고려하기
이처럼 복잡한 웹어플리케이션을 만들기 위해서는 작은 기능, 이벤트도 매우 많은 부분을 고려하고 만들게됩니다.
# 자바스크립트 이벤트
자바스크립트에는 정해진 동작 또는 계획에 의하여 이벤트를 발생시킬 수 있습니다. 이 이벤트는 미리 등록한 콜백함수를 호출하고 실행하게 되는데 자바스크립트에는 사용 가능한 다양한 이벤트 트리거가 존재합니다. 트리거는 사전적 의미처럼 방아쇠(trigger) ~ 즉 이벤트를 동작하게 만드는 행동을 말하죠. 예를들어 아래의 행동에 의하여 동작할 수 있습니다.- 클릭 / 더블클릭 click, dbclick
- 마우스오버 mouseover
- 마우스아웃 mouseout
- 마우스 드래그 drag
- 타임아웃 setTimeout
- 타임인터벌 setInterval
- 값의 변화 onchange
그 외에도 여러가지 이벤트를 동작할 수 있습니다. 이런 이벤트는 대부분 키보드, 마우스, 태블릿 등의 디바이스를 조작하는 것들이 대부분 이지만 게임패드나 리더기 등등에 반응하는 이벤트도 있다는 점을 참고하세요.
이처럼 트리거가 동작하면 예약된 함수인 이벤트 함수가 동작하게됩니다. 간단한 예제를 만들어보면서 자세히 알아보겠습니다.
! 클릭시 클릭되었음을 알리는 문구 만들기
너무 간단한 예제이지만 가장 이해하기 쉬운 예인 것 같습니다. 다음과 같은 작은 기능을 구현하려 합니다.- 버튼을 생성
- 버튼에 클릭 이벤트를 추가
- 클릭시 "클릭"이란 문구를 출력
매우 간단합니다. 그럼 차근차근 알아보겠습니다.
1. 버튼을 생성
button 태그를 사용해 클릭 가능한 요소를 만듭니다.
<button>Click</button>
2. 버튼에 클릭이벤트를 추가
클릭에 동작하는 버튼을 만들기 위하여 클릭이벤트를 추가하고 이벤트 핸들러인 이벤트함수를 추가합니다. 이벤트 핸들러(event handler)는 이벤트가 발생할 경우 이를 전달받는 함수를 말합니다.
<button onclick="alert("Click!")";>
3. DOM 태그에 이벤트를 만드는 onclick 속성을 추가하는 방법
이번에는 dom 엘리먼트에 onclick 어트리뷰트를 추가하여 이벤트를 동작하는 방법입니다. 생성한 버튼 엘리먼트에 클릭이벤트를 추가하도록 하겠습니다.
<button id="myBtn">Click</button>
btnEle = document.getElementById("myBtn");
btnEle.addEventListener("click", function() {
alert("Click!");
});
btnEle.addEventListener("click", function() {
alert("Click!");
});
위 방법은 순수 자바스크립트를 사용하는 방법입니다. 이제 해당 코드를 실행하고 클릭하면 해당하는 메시지를 띄우게됩니다. 실제로 잘 동작하는지 아래에서 버튼을 클릭해보세요.
<button id="myBtn">Click</button>
<script>
var btnEle = document.getElementById("myBtn");
btnEle.addEventListener("click", function() {
alert("Click!");
});
</script>
<script>
var btnEle = document.getElementById("myBtn");
btnEle.addEventListener("click", function() {
alert("Click!");
});
</script>
위 예제는 매우 간단하지만 대부분의 이벤트는 이처럼 동작하게됩니다. 여기까지 이벤트를 추가하고 실행하는 방법을 알아보았습니다.
! 참고사항
참고로 실제 웹어플리케이션을 만들때는 고려할 사항이 더욱 많습니다.- 이벤트 추가 외에 제거하는 방법
- 이벤트 등록시 성능 개선 부분
- 이벤트에 적은 리소스를 사용하는 방법
- 이벤트의 완료 후 메모리에 남지 않도록 하기
- 이벤트 간섭, 캡쳐링 및 버블링 고려하기
이처럼 복잡한 웹어플리케이션을 만들기 위해서는 작은 기능, 이벤트도 매우 많은 부분을 고려하고 만들게됩니다.
아래의 글도 찾고 계시지 않나요?
자바스크립트 마우스휠 사용시 스크롤 방향 알아내는 방법은?
lodash 메소드 throttle 알아보기- 자바스크립트 이벤트 제거, removeEventListener
VueJS 부모 자식 컴포넌트에 props 사용하여 양방향 바인드 방법
제이쿼리 trigger 대신 자바스크립트에서 클릭 이벤트 호출하는 방법
[VueJS] 클릭 이벤트 버튼 만들기 및 예제- [VueJS] EventBus를 사용, 컴포넌트 데이터 주고받는 통신 방법
- VueJS에서 마우스오버 이벤트 구현, mouseover
[자바스크립트] key pressing 누르거나 클릭중인 이벤트 예제
인간과 인공지능의 대결! 세종대학교에서 열린다