이벤트(Event)
- 웹 페이지에서 여러 종류의 상호작용이 있을 때 마다 이벤트 발생
- JS를 사용하여 DOM에서 발생하는 이벤트를 감지하여 이벤트에 대응하는 여러 작업 수행
- 이벤트는 일반적으로 함수와 연결되고, 함수는 이벤트가 발생되기 전에는 실행되지 않다가 이벤트가 발생할 경우 실행.
- Handler , Listener
마우스 이벤트(Mouse Event)
- 마우스 이벤트 핸들러에 전달되는 이벤트 객체에는 마우스 위치와 버튼 상태 등의 정보를 담고 있음
| 이벤트 | 설명 |
| onclick | element 클릭 했을 때 발생 |
| ondbclick | element 더블 클릭 했을 때 발생 |
| onmouseup | element에서 마우스 버튼을 올렸을 때 발생 |
| onmousedown | element에서 마우스 버튼을 눌렀을 때 발생 |
| onmouseover | 마우스를 움직여서 element 밖에서 안으로 들어 올 때 발생 |
| onmouseout | 마우스를 움직여서 element 안에서 밖으로 나갈 때 발생 |
| onmousemove | 마우스를 움직일 때 발생 |
키보드 이벤트(Keyboard Event)
- 운영체제에 영향을 받으므로 특정 키가 이벤트 핸들러에서 전달되지 않을 수 있음
- 키보드 커서가 나타내는 요소가 없다면 document에서 이벤트 발생
| 이벤트 | 설명 |
| onkeypress | 키보드가 눌려 졌을 때 발생 (ASCII) |
| onkeydown | 키보드를 누르는 순간 발생 (KeyCode) |
| onkeyup | 키보드를 누르고 있던 키를 뗄 때 발생 |
폼 이벤트(Form Event)
- form이 전송될 때 submit 이벤트 발생
- form 초기화할 때는 reset 이벤트 발생
- submit과 reset은 이벤트 핸들러에서 취소 가능
| 이벤트 | 설명 |
| onsubmit | form이 전송될 때 발생 |
| onreset | 입력 form이 reset될 때 발생 |
| oninput | input또는 textarea의 값이 변경 되었을 때 발생 |
| onchange | select box, checkbox, radio button의 상태가 변경 되었을 때 발생 |
| onfocus(focusin) | input과 같은 요소에 입력 포커스가 들어 올 때 발생 |
| onblur(focusout) | input과 같은 요소 등에서 입력 포커스가 다른 곳으로 이동할 때 발생 |
| onselect | input, textarea에 입력 값 중 일부가 마우스 등으로 선택될 때 발생 |
이벤트 핸들러
인라인 이벤트 핸들러
- JavaScript 초기에는 HTML 요소의 내부에서 직접 이벤트 핸들러를 등록
- HTML 코드를 JavaScript 코드가 침범한다는 문제가 있음
- 여러 개의 함수를 한번에 호출 가능
- 최근 CBD(Component Based Development) 방식의 Angular / React / Vue.js와 같은 프레임워크와 라이브러리에서는 인라인 방식으로 이벤트를 처리 → HTML, CSS, JS를 view의 구성 요소로만 보기 때문
<body>
<div id = "div1" onclick = "f1(); f2();"> 클릭 </div>
<script type = "text/javascript">
let f1 = function(){
alert("hi");
}
let f2 = function(){
alert("bye");
}
</script>
</body>이벤트 핸들러 프로퍼티 방식
- JavaScript에서 이벤트 핸들러를 등록함으로써 HTML 코드와 JS 코드를 분리
- 이벤트 대상이 되는 특정 DOM을 선택하고 이벤트 핸들러를 등록
- 인라인 이벤트 핸들러와 달리 하나의 이벤트 핸들러만 바인딩 할 수 있다는 단점을 가짐
<body>
<div id = "div1"> 클릭 </div>
<script type = "text/javascript">
document.getElementById("div1").onclick = function(){
alret('hi');
}
</script>
</body>addEventListener 메소드 방식
- addEventListener(arg1, arg2[, arg3])를 이용하여 더 세밀한 이벤트 제어
→ addEventListener(이벤트 이름, 이벤트 핸들러, 캡처링 여부 )
- 이벤트 이름에는 'on'을 제거한 이벤트 이름 사용
- addEventListener 메소드를 이용하여 대상 DOM 요소에 이벤트를 바인딩하고 해당 이벤트가 발생했을 때 실행될 콜백 함수(이벤트 핸들러)를 지정
- 하나의 이벤트에 대해 하나 이상의 이벤트 핸들러를 추가할 수 있음
- HTML 요소 뿐만 아니라 모든 DOM(HTML, XML, SVG)에 대해 동작
<body>
<div id = "div1"> 클릭 </div>
<script type = "text/javascript">
document.getElementById("div1").addEventListener('click', f1, false);
function f1(){
alert("hi");
}
</script>
</body>* 함수에 인자를 전달해야할 때
- 함수의 인자를 전달해야할 때는 익명함수를 사용해서 이벤트 핸들러 내부에서 함수를 호출하는 방식으로 해결한다.
<body>
<div> id <input type = "text"></div>
<div class = "message"> </div>
<script type = "text/javascript">
const MIN_LENGTH = 6;
const input = document.querySelector("");
const msg = document.querySelector("message");
function f1(len){
if(input.value.length < len){
msg.innerHTML = len + "이상 입력해주세요";
}else{
msg.innerHTML = '';
}
}
// 이렇게 하면 이벤트 발생 시까지 대기하지 않고 바로 실행
// 그렇다고 f1의 형태로 넘겨주면 인자를 전달할 수 없음
input.addEventListener("blur", f1(MIN_LENGTH));
// 이벤트 핸들러 내부에서 함수를 호출하는 방식으로 해결!!!!!
input.addEventListener("blur", function(){
f1(MIN_LENGTH);
});
</script>
</body>'JavaScript' 카테고리의 다른 글
| [JavaScript] 웹 스토리지(Web Storage) - localStorage, sessionStorage (0) | 2022.03.08 |
|---|---|
| [JavaScript] HTML과 DOM (0) | 2022.03.08 |
| [JavaScript] Web Browser와 Window 객체 (0) | 2022.03.08 |
| [JavaScript] JS의 기본 (특징, 문법) (0) | 2022.03.04 |
