💫 Event (이벤트)
- 객체(태그포함)에서 발생하는 사건
- 언제 발생할지 예측 불가능
💫 Event Handling (이벤트 처리) = Event listener (이벤트 리스너)
- 이벤트가 발생했을 때 실행할 코드를 미리 준비해두는데 이때 실행되는 코드를 이벤트 처리기 또는 이벤트 리스너라고 한다.
🌞 이벤트 등록 방법
- onXXX 속성(프로퍼티) 제공
- 정적 방식(
BOM정적 이벤트 모델)- HTML 태그에 속성으로 적용
<input type="button" onclick="changeColor();"/>- 동적 방식(
DOM동적 이벤트 모델)- 자바스크립트로 사용
<script>
document.form1.btn1.onmouseover = function() {
};
</script>🌞 Mouse Event
- 마우스를 사용할 때 발생하는 이벤트
- onmouseXXX로 시작한다.
1. onmouseover(=onmouseenter)
- 해당 객체의 영역에 마우스(커서)가 진입하는 순간 발생
2. onmouseout(=onmouseleave)
- 해당 객체의 영역에서 마우스(커서)가 빠져나가는 순간 발생
3. onmousedown
- 해당 객체의 영역에서 마우스 버튼을 누르는 순간 발생
4. onmouseup
- 해당 객체의 영역에서 마우스 버튼을 떼는 순간 발생
5. onmousemove
- 해당 객체 영역 위에서 마우스 커서가 움직일 때마다 발생
6. event.buttons
- 마우스 버튼 종류 (1: 오른쪽 버튼, 2: 왼쪽버튼)
마우스 커서 좌표
1. x, y
- 기준점 : 문서 좌측 상단
- 비표준(MS) > 비권장
2. clientX, clientY ★★★
- 기준점 : 문서 좌측 상단
- 표준 > 권장
- 절대좌표(=absolute)
3. screenX, screenY
- 기준점 : 모니터 좌측 상단
4. offsetX, offsetY ★★★
- 기준점 : 이벤트 객체의 좌측 상단
- 상대좌표(=relative)
💭 onclick
- 마우스 이벤트 X, 키보드를 사용해서 발생 가능하다.
- 클릭 이벤트에서는 마우스 좌표를 접근하면 안된다.
- 좌표를 얻어내지 못한다. ★
🌞 Keyboard Event
- 키보드의 키를 사용할 때 발생하는 이벤트
- onkeyXXX로 시작한다.
- 주로 폼 관련 태그에게 적용한다.
- 포커스를 가지는 태그에서만 발생한다. (텍스트박스, 체크 박스 등..)
1. onkeydown
- 키를 눌렀을 때 발생
- 입력된 문자를 구분하지 못한다.
- 입력된 문자는 중요하지 않고, 어떤 물리키를 눌렀는지가 중요하다.
- 입력값 자체보다
입력행위가 중요함 키보드에 존재하는 모든 키에 반응 ★★★- 방금 입력한
문자가 필요없는경우 사용
2. onkeyup
- 키가 떨어질 때 발생
3. onkeypress
- 키를 눌렀을 때 발생
- 거의 사용 안함 > why?
문자가 아닌 키는 반응 안한다. ★★★ - 입력된 문자키에 반응 > 입력된 문자를 구분할 수 있다.
- 방금 입력한
문자 필요한경우 사용
💭 이벤트 작동 순서 - 'a'키를 누르면 > 텍스트 박스 'a' 입력
1. 사용자 'a'키 누른다.
1.1 keydown 이벤트 발생
1.2 컨트롤(텍스트박스)에 값이 입력 ★★★
1.3 keyup 이벤트 발생
🌞 Attribute 조작
- HTML의 대부분의 속성은 자바스크립트의 프로퍼티로 제공된다.
- HTML 태그의 속성명을 그대로 자바스크립트 프로퍼티명으로 사용된다.
<input type="text" value=""> -> HTML txt1.value -> JavaScript - 태그의 식별자나 근본적인 속성은 조작하지 말아라.
- HTML 숫자 타입 속성은 숫자로 조작하고 나머지 속성은 문자열로 조작한다.
- HTML 플래그(boolean) 타입 속성은 boolean값으로 조작한다.
- HTML 속성명이 복합어면 캐멀 표기법으로 작성한다.
💭 태그(텍스트박스)의 조작은 태그의 속성을 조작한다.
<form name="form1">
<input type="text" name="txt1">
<input type="button" name="btn1" value="끄기">
</form>
<script>
var txt1 = window.document.form1.txt1;
var btn1 = window.document.form1.btn1;
btn1.onclick = m1;
function m1() {
txt1.value = '홍길동'; // 쓰기
alert(txt1.value); // 읽기
txt1.size = 50;
txt1.type = 'radio' // 이런 행동은 되도록 금지!! - 3번
txt1.readOnly = true; // 4번, 5번
// <p align="center"> 열거형 > 문자열
p.align = 'center';
// <body bgcolor="blue"> 색상 > 문자열
window.document.body.bgColor = 'blue';
}
</script>💭 하나의 버튼(스위치)으로 on/off 역할을 하는 버튼을 토글 버튼(Toggle Button)이라고 한다.
🌞 DOM 이벤트 프로퍼티
addEventListener()
-
동일한 이벤트를 여러번 추가 가능하다.
-
함수를 목록으로 관리한다. (Inovacation List)
-
리스트에 함수를 추가한다.
-
addEventListener() 메소드에서는 "on"이 붙지 않은 이벤트 타입을 사용해야 한다.
💭 BOM 이벤트는 동일한 이벤트를 덮어쓰기 한다.
var showBtn = document.getElementById("btn"); // 아이디가 "btn"인 요소를 선택함.
showBtn.addEventListener('click', showText); // 선택한 요소에 click 이벤트 리스너를 등록함.
function showText() {
document.getElementById("text").innerHTML = "짜잔~!! 텍스트가 나타났어요!!";
}var btn = document.getElementById("btn"); // 아이디가 "btn"인 요소를 선택함.
btn.addEventListener("click", clickBtn); // 선택한 요소에 click 이벤트 리스너를 등록함.
btn.addEventListener("mouseover", mouseoverBtn); // 선택한 요소에 mouseover 이벤트 리스너를 등록함.
btn.addEventListener("mouseout", mouseoutBtn); // 선택한 요소에 mouseout 이벤트 리스너를 등록함.
function clickBtn() {
document.getElementById("text").innerHTML = "버튼이 클릭됐어요!";
}
function mouseoverBtn() {
document.getElementById("text").innerHTML = "버튼 위에 마우스가 있네요!";
}
function mouseoutBtn() {
document.getElementById("text").innerHTML = "버튼 밖으로 마우스가 나갔어요!";
}removeEventListner()
- 리스트에 함수를 제거한다.
function clickBtn() {
btn.removeEventListener("mouseover", mouseoverBtn);
btn.removeEventListener("mouseout", mouseoutBtn);
document.getElementById("text").innerHTML = "이벤트 리스너가 삭제되었어요!";
}