FrontEnd/JavaScript
[JavaScript] JavaScript 이벤트
ss__jae2
2022. 9. 24. 00:08
반응형
1. 이벤트와 이벤트 핸들러(리스너)
- 이벤트
- 웹 페이지에서 키보드, 마우스 클릭, 마우스 이동 등 동작의 사건을 발생시키는 것 - 이벤트 핸들러(리스너)
- 웹 페이지에서 이벤트가 발생 할 경우 호출되도록 등록하기 위한 함수
- 즉, 특정 함수를 이벤트에 등록하여 해당 함수(기능)을 하도록 함
2. 이벤트의 종류
| 마우스(Mouse) | 마우스 클릭, 이동, 포커싱, 동작과 관련된 이벤트 | click, dbclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave |
| 키(Keyboard) | 키보드의 키 업/다운 및 타이핑과 관련된 이벤트 | keydown, keyup, keypress, keycode |
| 폼(Form) | 입력폼 요소에서 발생하는 이벤트 | input(text) change(select, check, radio) |
| 포커스(focus) | 돔(Dom) 요소(Element)에 포커싱과 관련된 이벤트 | focus/focusin, blur/focusout |
| UI(User Interface) | 화면 로딩, 스크롤, 사이즈 변경 등에 관련된 이벤트 | load, unload, error, resize, scroll, select |
3. 이벤트 연결 방법
- 인라인(inline)
- 돔(Html Tag : DOM)의 이벤트에 함수를 바로 연결하는 방법
<input type="button" value="button" onclick="alert('Hello World');"/>
<button onclick="myHandler1(); myHandler2();/>Click me</button>
<script>
function myHandler1() {
alert('myHandler1');
}
function myHandler2() {
alert('myHandler2');
}
</script>
- 프로퍼티(Property)
- document 객체의 onclick에 함수를 바로 연결하는 방식
- 이벤트 핸들러 프로퍼티 방식은 이벤트에 하나의 이벤트 핸들러만을 바인딩 할 수 있음
- 여러 개라면 마지막에 바인딩 된 함수만 가능
<button class="btn">Click me</button>
<script>
var btn = document.querySelector('.btn');
// 첫번째 바인딩된 이벤트 핸들러
btn.onclick = function() {
alert('Button click 1');
}
// 두번째 바인딩된 이벤트 핸들러
btn.onclick = function() {
alert('Button click 2');
}
</script>
- 돔(Dom) addEventListener 메소드
- 요소(element)에 addEventListener() 함수(메소드)를 통해 등록하는 방식
- 이것은 여러 개를 바인딩 하더라도 다 실행가능하다.
- 함수를 function() 로 익명함수로 할 수 있고 () => (arrow)를 이용해서 할 수도 있다.
- 그리고 함수가 길어지거나 재사용 가능성이 있을 때는 따로 함수를 정의 해주고 사용한다.
<input type="button" id="target" value="button"/>
<script>
var t = document.getElementById('target');
t.addEventListener('click', function(event) {
alert('Hello world, ' + event.target.value);
});
</script>
4. 이벤트 관련 정보
- event
- onclick = "clickme(event)"; 처럼 함수 매개변수에 event로 준다면 작성한 이벤트의 객체가 매개변수로 넘어가서 자바스크립트에서 사용할 수 있게 된다. - target
- target은 event객체가 매개변수로 넘어왔을 때 event.target으로 그 이벤트를 발생시키는 태그를 받아올 수 있다.
- 그래서 그것을 이용해 value등 원하는 정보를 사용할 수 있다. - keycode
- keypress 이벤트를 할 때 누른 키에 대해 각각 keyCode를 가지고 있다.
- event를 매개변수로 받아 event.keyCode를 사용해서 검사를 할 수 있다.
- 예를 들어, 엔터는 키 코드가 13이므로 if 문을 써서 keyCode === 13일 때 경고창을 띄우든지 할 수 있다.
5. 다양한 이벤트 예시
<!DOCTYPE html>
<html>
<head></head>
<body>
<h2>마우스 이벤트 1</h2>
<button onclick="clickme();">클릭하세요</button>
<button ondblclick="clickme();">더블 클릭하세요</button>
<h2>마우스 이벤트 2</h2>
<button onmouseout="mouseEvent('마우스 아웃')">마우스 아웃</button>
<button onmousedown="mouseEvent('마우스 다운')">마우스 다운</button>
<button onmouseover="mouseEvent('마우스 오버')">마우스 오버</button>
<button onmouseup="mouseEvent('마우스 업')">마우스 업</button>
<button onmousemove="mouseEvent('마우스 이동')">마우스 이동</button>
<button oncontextmenu="mouseEvent('마우스 우클릭<메뉴>')">마우스 우클릭</button>
<h2>키 이벤트</h2>
<textarea onkeydown="keydown(event);"></textarea>
<textarea onkeyup="keyup(event);"></textarea>
<textarea onkeypress="keypress(event);"></textarea>
<h2>폼 이벤트</h2>
<label>
<input type="radio" name="fruit" value="apple" onchange="change('사과', event)"/>
사과
</label>
<label>
<input type="radio" name="fruit" value="apple" onchange="change('바나나', event)"/>
바나나
</label>
<textarea oninput="input(event)"></textarea>
</body>
</html>
<script>
function clickme() {
console.log("클릭하셨습니다.");
}
function mouseEvent(text) {
console.log("마우스 이벤트 ===> " + text);
}
function keydown(event) {
console.log(event);
}
function keyup(event) {
console.log(event);
}
function keypress(event) {
// console.log(event);
console.log(event.keyCode);
// 엔터를 입력할 경우 경고창 표시
if(event.keyCode === 13) {
alert("엔터를 입력하셨습니다.");
}
}
function change(title, event) {
alert(title + "를 선택하셨습니다.");
console.log(event);
}
// target은 이 이벤트를 하는 태그를 의미
function input(event) {
// console.lo(event);
var text = event.target.value;
console.log(text);
}
</script>
반응형