이벤트
- 웹페이지에서 마우스를 클릭했을 때, 키를 입력했을 때, 특정요소에 포커스가 이동되었을 때 어떤 사건을 발생시키는 것
이벤트의 종류
1) 마우스 이벤트
| 이벤트 | 설명 |
| click | 요소에 마우스를 클릭했을 때 이벤트가 발생 |
| dbclick | 요소에 마우스를 더블클릭했을 때 이벤트가 발생 |
| 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 | 스크롤바를 움직였을 때 이벤트 발생 |
이벤트 연결
- 사용자가 실제 이벤트를 발생시켰을 때 그 이벤트에 대응하여 처리하는 것 => '이벤트 핸들러'
- '이벤트 핸들러'는 앞에 'on'을 붙여 주고 이벤트에 대한 동작(함수)을 처리
| 이벤트를 객체와 연결하는 방식 | ||
| 인라인 방식 | DOM Level 0 | 단점 : 동일한 객체에 동일한 이벤트 여러번 적용 불가 |
| 고전방식 | ||
| 표준 이벤트 방식 | DOM Level 2 | DOM Level 0의 단점을 보완하기 위한 것 |
| 인터넷 익스플로러 방식 | ||
1) 인라인 방식
<태그명 on이벤트 = 자바스크립트 코드> </태그명> <div onclick="alert('클릭했습니다1.')">클릭</div>
<div onclick="view()">클릭</div>
<script>
function view() {
alert("클릭했습니다2.");
}
</script>
2) 고전 방식
[1]
객체.on이벤트명 = function() {
}
[2]
function 함수명() {
}
객체.on이벤트명 = 함수명 <div id="bt">클릭</div>
[방법1]
<script>
var bt = document.getElementById("bt");
bt.onclick = function () {
alert("클릭했습니다!!!");
};
</script>
[방법2]
<script>
var bt = document.getElementById("bt");
function view() {
alert("클릭했습니다!!!");
}
bt.onclick = view;
/*
bt.onclick = function() {
view();
}
*/
</script>
★ <script></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>태그 끝난 후 작성하는 것을 권장
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>이벤트</title>
<style>
div {
border: 1px solid red;
}
</style>
<script>
window.onload = function () {
var bt = document.getElementById("bt");
bt.onclick = function () {
alert("클릭했습니다.!");
};
};
</script>
</head>
<body>
<div id="bt">클릭</div>
</body>
</html>
3) 표준이벤트 vs IE이벤트
★ 인라인 방식과 고전 방식의 경우 같은 객체에 대해 동일한 이벤트를 여러 번 사용 불가 ★
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>이벤트</title>
</head>
<body></body>
<script>
function loadEnd1() {
alert("실행1");
}
function loadEnd2() {
alert("실행2");
}
window.onload = loadEnd1;
window.onload = loadEnd2;
</script>
</html>
>> 결과 : loadEnd2() 함수만 실행, 즉! 동일한 window객체에 대해 이벤트 핸들러('onload')는 마지막 하나만 적용
해결 : '이벤트리스너' 이용하여 해결 => 인터넷 익스플로러에 적용되는 것 과 그 외 (크롬,파이어폭스 등)에서 적용되는 것으로 나뉨.
| '인터넷 익스플로러 이벤트 리스너' 추가 삭제 방법 | |
| 객체.attachEvent('on이벤트명',function(){ }); |
|
| 객체.detachEvent('on이벤트명',function(){ }); |
| '표준 이벤트 리스너' 추가 삭제 방법 (크롬, 파이어폭스 등) |
| 객체.addEventListner('이벤트명',function(){ }); |
| 객체.removeEventListner('이벤트명',function(){ }); |
'자바스크립트 개념정리' 카테고리의 다른 글
| DOM 정리 (0) | 2022.12.06 |
|---|---|
| Symbol type(ES6) (0) | 2022.12.04 |
| Set&Map (0) | 2022.12.04 |
| Iterator&Generator (0) | 2022.12.02 |
| 자료구조(data structure) (0) | 2022.11.29 |
