2월 21일에 시킨 내 모자는 언제 오려나
이벤트란 ?
웹페이지에서 마우스를 클릭했을 때, 키를 입력했을 때, 특정요소에 포커스가 이동되었을 때 어떤 사건을 발생시키는 것
이벤트의 종류
1. 마우스 이벤트
| 이벤트 | 설명 |
|---|---|
| click | 요소에 마우스를 클릭했을 때 이벤트가 발생 |
| dbclick | 요소에 마우스를 더블클릭했을 때 이벤트가 발생 |
| mouseover | 요소에 마우스를 오버했을 때 이벤트가 발생 |
| mouseover | 요소에 마우스를 오버했을 때 이벤트가 발생 |
| mouseout | 요소에 마우스를 아웃했을 때 이벤트가 발생 |
| mousedown | 요소에 마우스를 눌렀을 때 이벤트가 발생 |
| mouseup | 요소에 마우스를 떼었을 때 이벤트가 발생 |
| mousemove | 요소에 마우스를 움직였을 때 이벤트가 발생 |
| contextmenu | context menu(마우스 오른쪽 버튼을 눌렀을 때 나오는 메뉴)가 나오기 전에 이벤트 발생 |
2) 키 이벤트
| 이벤트 | 설명 |
|---|---|
| keydown | 키를 눌렀을 때 이벤트가 발생 |
| keyup | 키를 떼었을 때 이벤트가 발생 |
| keypress | 키를 누른 상태에서 이벤트가 발생 |
3) 폼 이벤트
| 이벤트 | 설명 |
|---|---|
| focus | 요소에 포커스가 이동되었을 때 이벤트 발생 |
| blur | 요소에 포커스가 벗어났을 때 이벤트 발생 |
| change | 요소에 값이 변경 되었을 때 이벤트 발생 |
| submit | submit 버튼을 눌렀을 때 이벤트 발생 |
| reset | reset 버튼을 눌렀을 때 이벤트 발생 |
| select | input이나 textarea 요소 안의 텍스트를 드래그하여 선택했을 때 이벤트 발생 |
4) 로드 및 기타 이벤트
로드 및 기타 이벤트
| 이벤트 | 설명 |
|---|---|
| load | 페이지의 로딩이 완료되었을 때 이벤트 발생 |
| abort | 이미지의 로딩이 중단되었을 때 이벤트 발생 |
| unload | 페이지가 다른 곳으로 이동될 때 이벤트 발생 |
| resize | 요소에 사이즈가 변경되었을 때 이벤트 발생 |
| scroll | 스크롤바를 움직였을 때 이벤트 발생 |
Event listener / Event handler 등록
어떠한 이벤트가 발생했을 때 이를 처리하는 함수를 이벤트 리스너 또는 이벤트 핸들러라고 한다.
1) 인라인 방식
- 인라인 방식은 이벤트를 HTML 요소의 속성으로 직접 지정하는 방식이다.
- HTML 코드에 자바스크립트를 추가함으로써 결국 HTML코드와 스크립트가 섞여 사용 되기 때문에 관점에 따라 유지보수에 안좋을 것이다.
// 예제 1
<!DOCTYPE html>
<html>
<body>
<button onclick="testHandler()">Test</button>
<script>
function testHandler() {
alert('Hello world');
}
</script>
</body>
</html>// 예제 2
<html>
<body>
<button onclick="alert('Hello world');">Test btn</button>
</body>
</html>2) 프로퍼티 방식
- 자바스크립트 코드에서 프로퍼티로 등록하여 사용하는 방식이다.
- HTML 코드와 자바스크립트가 섞여 사용되지 않는다.
- 하나의 이벤트 핸들러 프포퍼티엔 하나의 이벤트 핸들러만 바인딩 가능하다.
<html>
<body>
<button id="testBtn">Test</button>
</body>
<script>
let testBtn = document.querySelector('#testBtn');
testBtn.onclick = function () {
alert('Hello world1');
};
// 두번째 바인딩된 이벤트 핸들러 (하나의 이벤트 핸들러만 바인딩 가능하기때문에 "Hello world2"가 노출 된다.
testBtn.onclick = function () {
alert('Hello world2');
};
</script>
</html>3) addEventListener() 방식, attachEvent() 방식
- 2.2의 프로퍼티 방식에서는 1개의 이벤트 핸들러만 바인딩 가능했지만, 하나 이상의 이벤트 핸들러를 바인딩할 수 있다.
- 캡처링과 버블링을 지원한다.
- 문법 : 객체.addEventListener(
'이벤트타입',함수명[, 이벤트전파방식]);- 이벤트타입(바인딩될 이벤트의 문자열)
- 함수명(이벤트리스너)
- 이벤트전파방식(캡쳐링 사용 여부)
<html>
<body>
<button id="testBtn2">Test</button>
</body>
<script> let testBtn2 = document.querySelector('#testBtn2');
function testFunc(){
alert('Hello world1');
}
testBtn2.addEventListener('click', testFunc);
testBtn2.addEventListener('click', function () {
alert('Hello world2');
});
}
</script>
</html>4) removeEventListener()
- 등록된 이벤트 리스너를 삭제시 사용 가능하다.
testBtn2.removeEventListener('click', testFunc);<script>를 <head>태그 내부에 작성할 경우
- 'onload'는
문서가 모두 로드되었을 때를 의미 - 'onload' 이벤트가 실행되면 'onload'의 익명함수 부분은 일단 미실행!
- 문서의 끝까지 모두 로드 되었을 때 익명함수 실행!
<div id="bt">클릭</div>요소보다 document.getElementById("bt")가 먼저 정의 되었기 때문에 'onload'이벤트 사용- 'onload'이벤트 미사용시 'document.getElementById("bt")'가 실행되는 시점에
<div id="bt">클릭</div>요소는 미존재 하므로 bt 변수에 저장되지 않는 문제 발생
- 자바스크립트가
<head>태그 안에서 정의되고 getElementById() 메서드가 사용될 때는 반드시 'onload' 이벤트 사용 - 자바스크립트는
<body></body>태그 끝난 후 작성하는 것을 권장
마음이 시키는 프론트엔드.. RN과 IOS를 곁들인..