안녕하세요. 명월입니다.
이 글은 Javascript에서 Html 요소(element)의 이벤트(Event)를 추가하는 방법에 대한 글입니다.
먼저 프로그램에서 이벤트라는 것은 컨트롤이나 요소가 특정 동작이나 액션을 감지하여 함수를 호출하는 프로시져를 말합니다.
쉽게 이야기하면, 사용자가 마우스로 버튼을 클릭하면, 버튼에 대한 클릭 이벤트가 발생하여 지정된 함수를 호출하는 것입니다.
<!doctype html>
<html>
<head>
<title>Document</title>
</head>
<body>
<!-- 버튼 요소 -->
<!-- onclick 이벤트로 클릭하면 test()함수가 호출! -->
<button onclick="test()">click</button><br />
<!-- 출력하는 textarea 요소 -->
<textarea id="console" style="width:200px;height:100px;"></textarea>
<script>
// 위 버튼을 클릭하면
function test() {
// click이라는 문구가 console의 textarea에 출력.
document.getElementById("console").value += "click\r\n";
}
</script>
</body>
</html>
html 요소에서 속성으로 「on + 이벤트 타입」명으로 이벤트를 추가 할 수도 있습니다.
이 방법은 html 인라인 이벤트로 위처럼 함수를 호출하면 호출의 함수 재사용은 가능하지만, 각 요소에서 이벤트를 직접 수정하는 경우나 가독성의 문제(각 요소에서 이벤트가 어떻게 작성되는지 한눈에 알기가 힘들다)때문에 사실 잘 사용하지는 않습니다.
좋은 방법은 script의 태그 안에서 요소를 탐색(selector)해서 이벤트 리스너(addEventListener)를 사용하는 방법이 일괄적인 관리가 가능합니다.
<!doctype html>
<html>
<head>
<title>Document</title>
</head>
<body>
<!-- 버튼 요소 -->
<button id="test">click</button><br />
<!-- 출력하는 textarea 요소 -->
<textarea id="console" style="width:200px;height:100px;"></textarea>
<script>
// test id의 요소에 click 이벤트를 연결.
document.getElementById("test").addEventListener("click", test);
// 위 버튼을 클릭하면
function test() {
// click이라는 문구가 console의 textarea에 출력.
document.getElementById("console").value += "click\r\n";
}
</script>
</body>
</html>
여기까지는 html 이벤트와 크게 차이가 없어보입니다.
<!doctype html>
<html>
<head>
<title>Document</title>
</head>
<body>
<!-- 여러 버튼을 만들고 -->
<button class="test">click1</button><br />
<button class="test">click2</button><br />
<button class="test">click3</button><br />
<button class="test">click4</button><br />
<button class="test">click5</button><br />
<!-- 출력하는 textarea 요소 -->
<textarea id="console" style="width:200px;height:100px;"></textarea>
<script>
// test 클래스를 가진 요소에 모두 동일한 클릭 이벤트를 연결.
var eles = document.getElementsByClassName("test");
for(let i=0; i<eles.length; i++) {
eles[i].addEventListener("click", test);
}
// 위 버튼을 클릭하면
function test() {
// click이라는 문구가 console의 textarea에 출력.
document.getElementById("console").value += "click\r\n";
}
</script>
</body>
</html>
여기까지 event를 연결하는 방법을 설명했습니다. event 타입을 소개하겠습니다.
| 종류 | 이벤트 타입 | 설명 |
|---|---|---|
| 마우스 관련 | mouseenter | 마우스 포인터가 요소의 테두리 안으로 들어갈 때 발생 |
| mouseover | 마우스 포인터가 요소의 위로 이동할 때 발생 | |
| mousemove | 마우스 포인터가 요소의 테두리 안에서 이동할 때 발생 | |
| mousedown | 마우스 포인터가 요소의 테두리 안에서 눌렸을 때 발생 | |
| mouseup | 마우스 포인터가 요소의 테두리 안에서 눌림이 끝날 때 발생 | |
| auxclick | 요소의 위에서 마우스의 주 버튼이 아닌 버튼이 눌렸을 때 발생 | |
| click | 요소의 위에서 마우스의 주 버튼이 눌렸을 때 발생 | |
| dblclick | 요소의 위에서 마우스의 주 버튼이 더블 클릭 되었을 때 발생 | |
| contextmenu | 요소의 위에서 컨텍스트 메뉴가 열리는 버튼을 눌렀을 때 발생 | |
| wheel | 요소의 위에서 휠 버튼이 회전되었을 때 발생 | |
| mouseleave | 마우스의 포인트가 요소를 벗어났을 때 발생 | |
| mouseout | 마우스의 포인트가 요소를 벗어났을 때(자식 요소로 이동되어도) 발생 | |
| select | 마우스에 의해 텍스트가 선택되었을 때 발생 | |
| 키보드 관련 | keydown | 키보드 키를 눌렸을 때 발생 |
| keypress | 키보드의 쉬프트, Fn, CapsLock을 제외한 키가 눌린 상태일 때 발생(연속적으로 실행됨) | |
| keyup | 키보드 키 누름이 해제될 때 발생 | |
| 포커스 관련 | focus | 요소에 포커스를 받았을 때 발생 |
| blur | 요소에 포커스를 잃었을 때 발생 | |
| 뷰 이벤트 관련 | fullscreenchange | 전체화면 모드로 변경되었거나 일반 모드로 돌아왔을 때 발생 |
| resize | 화면의 사이즈가 변경되었을 떄 발생 | |
| scroll | 화면의 스크롤의 위치가 바뀌었을 때 발생 | |
| 드래그 앤 드랍 관련 | dragstart | 요소의 드래그가 시작될 때 발생 |
| drag | 요소가 드래그 중일 때 발생 | |
| dragend | 요소의 드래그가 종료될 떄 발생 | |
| dragenter | 드래그된 요소가 유효된 드랍 대상에 들어갈 때 발생 | |
| dragover | 드래그된 요소가 유효된 드랍 대상 위에서 이동할 때 발생 | |
| dragleave | 드래그된 요소가 유효된 드랍 대상 위에서 벗어날 때 발생 | |
| drop | 드래그된 요소가 유효된 드랍 대상 위에 드랍이 되었을 때 발생 |
참조 - https://developer.mozilla.org/en-US/docs/Web/Events
여기까지 Javascript에서 Html 요소(element)의 이벤트(Event)를 추가하는 방법에 대한 글이었습니다.
궁금한 점이나 잘못된 점이 있으면 댓글 부탁드립니다.
'Study > Javascript, Jquery, CSS' 카테고리의 다른 글
| [Javascript] 프로미스(Promise) 사용법 (0) | 2020.03.26 |
|---|---|
| [Javascript] 타이머 함수(setTimeout, setInterval) (0) | 2020.03.26 |
| [Javascript] 익명함수, 람다식, 클로저 그리고 callback (DOMContentLoadedd와 load이벤트 예제) (0) | 2020.03.25 |
| [Javascript] 브라우저에서 Javascript 프로그래밍 디버깅하는 방법 (0) | 2020.03.25 |
| [Javascript] Html 요소(element)의 속성(attribute)을 추가, 삭제 그리고 수정하는 방법 (0) | 2020.03.23 |
| [Javascript] Html 요소(element)의 생성(CreateElement), 추가(appendChild)하는 방법 (2) | 2020.03.23 |
| [Javascript] Html 요소(element)의 셀렉터(selector - getElementById, getElementByClass, querySelector...) (0) | 2020.03.23 |
| [Javascript] 변수 선언, 제어문, 함수 사용법 (0) | 2020.03.23 |