1. 이벤트
; 입력행위나 상태변화를 말한다.
2. 이벤트리스너
; 이벤트 발생시에 해야할 일을 정의한 것.
3. 동적변화
; HTML태그 ---- DOM 객체 ---- 화면출력
(DOM트리)
4. 이벤트 종류
; on~~~, 모두 소문자
. 클릭
- onclick : 클릭
- ondblclick : 더블클릭
. key
- onkeydown : 아무키나 누를때
- onkeyup
- onkeypress : 알파뉴메릭키를 누를때
. 마우스
- onmousedown:
- onmouseenter:
- onmouseleave:
- onmouseover :
- onmouseout:
- onmousemove:
- onwheel :
. 기타
- onload : 로딩이 완료되된 후
- onfocus: 포커스를 받을 때
- onblur : 포커스를 잃을 때
. 폼
- onchange: 선택의 내용이 변경, 체크상태변경 될 때
- onselect: 마우스로 긁어서 선택할 때
5. 이벤트 리스너를 만드는 방법
1) 태그안에서
2) 함수안에서 이벤트 리스너 속성(프로퍼티)에 등록
3) addEventListener() 메소드를 활용 등록 --- 하나의 DOM객체에 여러개의 리스너를 등록 가능
6. 이벤트 객체?
; 이벤트에 대한 정보 덩어리
event 객체
. type : 이벤트가 어떤 타입의 이벤트인지
. target : 이벤트를 발생시킨 태그
. currentTarget : 현재 이벤트 리스너를 실행하고 있는 태그
. preventDefault() : 디폴트행동을 취소시키는 메소드
. stopPropagation() : 리스너들 모두 실행 후에 흐름중단 (onfocus, onblur)
7. 이벤트 흐름
: 캡쳐단계와 버블단계 두 단계로 이루어지며, 버블이 기본이다.
window
|
document
|
html
|
---------------------
| |
head e - body - e
|
-------------------
p input hr
* target
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
p{font-size: 20px;}
p:hover{cursor: pointer;}
</style>
</head>
<body>
<h3>HTML태그에 리스너 작성</h3>
<hr>
<p onmouseover = "this.style.backgroundColor='orange'"
onmouseout = "this.style.backgroundColor='white'; this.style.fontSize='15px'"
ondblclick = "body.style.fontSize='30px'"
onwheel="body.style.backgroundColor='yellow'"
>마우스를 올리면 배경색이 오렌지색으로 변하고,
마우스가 벗어나면 흰색으로 변하게 해보자.</p>
</body>
</html>태그.addEventListener( '이벤트종류', 함수명, 캡쳐단계/버블단계 )
태그(DOM객체)가 갖는 고유한 기능을 제약 - preventDefault()
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function query(){
let ret = confirm("네이버로 이동하시겠습니까?");
return ret;
}
function noAction(e){
e.preventDefault();
}
</script>
</head>
<body>
<h3>이벤트의 고유한 기능을 제어(취소)</h3>
<hr>
<a href="http://www.naver.com" onclick='return query()'>네이버로 이동할 지 물어보는 링크</a>
<hr>
<form>
<input type="checkbox">빵(체크 됨)<br>
<input type="checkbox" onclick="noAction(event)">술(체크안됨)
</form>
</body>
</html>