이벤트
1. 이벤트의 종류와 용어
○ 종류
(1) 마우스 이벤트
(2) 키보드 이벤트
(3) HTML 프레임 이벤트
(4) HTML 입력 양식 이벤트
(5) 유저 인터페이스 이벤트
(6) 구조 변화 이벤트
(7) 터치 이벤트
○ 용어 정리
■ “이벤트를 연결한다” : window 객체의 onload 속성에 함수 자료형을 할당하는 것
window 객체의 load 이벤트
<script>
window.onload = function( ){ };
</script>
□ load : 이벤트 이름 또는 이벤트 타입
□ onload : 이벤트 속성
□ 이벤트 리스너 / 이벤트 핸들러 : 이벤트 속성에 할당한 함수
window.onload = function () {
// 변수를 선언합니다.
var header = document.getElementById( 'header');
// 이벤트를 연결합니다.
function whenClickO { alert('CLICK'); }
header.onclick = whenClick;
}；
■ 이벤트 연결 방법
① DOM Level 0
- 인라인 이벤트 모델
- 기본이벤트 모델
② DOM Level 2
- 마이크로소프트 인터넷 익스플로러 이벤트 모델
- 표준이벤트 모델
2. 고전 이벤트 모델
○ getElementByld ( )와 같은 메서드로 문서 객체를 가져오고 이벤트를 연결
○ 문서 객체에 이벤트 속성에 이벤트 핸들러 대입하면 이벤트 연결
○ header.onclick = null; 이렇게 속성을 null로 하면 이벤트 제거
window.onload = function () {
// 변수를 선언합니다.
var header = document.getElementById('header');
// 이벤트를 연결합니다.
header.onclick = function () { alert('클릭‘); }；
// 이벤트를 제거합니다.
header.onclick = null;
}；
3. 이벤트 발생 객체와 이벤트 객체
○ 이벤트 발생 객체 찾기
■ 이벤트 리스너 안에서 this 키워드를 사용
document.getElementById('header').onclick = function () {
this.style.color = 'orange';
this, style.backgroundcolor = ‘red'；
}；
■ document,getElementById('header').onclick = function (e) {
var event = e II window.event;
}；
□ 조건문!
□ e가 존재하면 e를 변수 event에 집어넣고, e가 undefined이면 window.event 속성을 변수 event에 넣음
4. 이벤트 강제 실행
○ 메서드를 호출하는 것처럼 이벤트 속성을 호출
○ buttonA.onclick( );같이 이벤트 함수 안에 넣어줌 ㅎㅎ
5. 인라인 이벤트 모델
○ HTML 페이지의 가장 기본적인 이벤트 연결 방법
<body> <h1 onclick="“>Click〈/h1〉 </body>
<h1 onclick= "var aa=10; alert（aa）>Click</h1>
○ 태그 안 이벤트 속성에 직접 이벤트를 쓰는 것으로 함수를 정의해 넣어도 됨
이벤트를 호출할 때 매개변수를 넣음!
<script>
function whenClick(e) {alert('클릭,);}
</script>
<body>
<h1 onclick=“whenClick(event)“>Click</h1>
</body>
6. 디폴트 이벤트 제거
○ 디폴트 이벤트 : 일부 HTML 태그에 이미 정의된 이벤트 리스너
○ submit 디폴트 이벤트 제거
window.onload = function () {
// 이벤트를 연결합니다.
document.getElementById('my-form').onsubmit = function ( ) {
// 여기 새로운 이벤트 정의해도 됨
// 실행 안되게 하려면
return false; }； }；
○ 인라인 이벤트 모델 - 디폴트 이벤트 제거
function whenSubmitO {
// 유효성 검사
return false;
}
<form onsubmit= "return whenSubmit()">
7. 이벤트 전달
○ 이벤트 전달 : 어떠한 이벤트가 먼저 발생해 어떤 순서로 발생하는지의 순서
○ 이벤트 버블링 방식을 따름
이벤트 버블링 : 자식 노드에서 부모 노드 순으로 이벤트 실행
이벤트 캡쳐링 : 부모 노드에서 자식 노드 순으로 이벤트 실행
○ 이벤트 전달을 막아서 원하는 기능만 실행하도록 하는 것!이 중요
■ 인터넷 익스플로러와 그외 브라우저가 이벤트 전달을 막는 방식이 다름
□인터넷 익스플로러 : 이벤트 객체의 cancelBubble 속성을 true로 변경
□그 이외의 브라우저 : 이벤트 객체의 stopPropagation( ) 메서드를 사용
□stopPropagation( ) 메서드가 있으면 사용하고 그렇지 않으면 cancelBubble 속성을 true로
event.cancelBubble = true;
if (event.stopPropagation) {
event.stopPropagation(); }
8. 인터넷 익스플로러 이벤트 모델
○ 매개변수에 이벤트 속성을 씀
○ 객체에 attachEvent( ) 메서드로 이벤트를 연결
■ attachEvent(eventProperty, eventListener);
window.attachEvent('onload', function () { });
○ 다중 이벤트 연결 가능, 연결한 순서대로 작동
○ detachEvent () 메서드 : 이벤트를 제거
■ detachEvent(eventProperty, eventListener);
var header = document,getElementById( 'my-header');
var handler = function () { alert(‘클릭,); };
header.attachEvent('onclick', handler);
header.detachEvent('onclick', handler);
○ attachEvent () 메서드는 인터넷 익스플로러에만 있으므로 다른 브라우저에서는 에러 발생
9. 표준 이벤트 모델
○ 한 번에 여러 가지의 이벤트 리스너를 추가 & 이벤트 캡쳐링 지원
○ 이벤트 이름을 매개변수로 입력
○ addEventListener(eventName, handler, useCapture);
■ useCapture는 입력하지 않으면 자동으로 false를 입력
window.onload = function () {
var header = document.getElementById('my-header');
header.addEventListener('click', function () { this.innerHTML += ‘+’;
})； }；
○ removeEventListener(eventName, handler);
'JavaScript & JQuery' 카테고리의 다른 글
| [Javascript][이론]문서 객체 모델 (0) | 2020.09.10 |
|---|---|
| [Javascript][이론]브라우저 객체 (0) | 2020.09.09 |