자바스크립트에서 이벤트 객체는 이벤트를 발생시킨 요소와 발생한 이벤트에 대한 정보를 제공합니다. 이벤트가 발생하면 객체는 동적으로 생성되며, 이벤트 핸들러에게 암묵적으로 인자를 전달하게 됩니다.
1. 객체
객체 구성 요소
▶ 속성 (Property) — 값을 담고 있는 정보
▶ 메서드 (Method) —
객체 사용 방법
var kim = {
firstName : "John";
lastName : "Doe";
info : function() {
alert(firstName + lastName);
};
};
▶ 중괄호로 묶는다.
▶ 키와 값은 : (콜론) 을 사용합니다.
2. 사용자 정의 객체
여러 정보를 하나로 묶어 사용할 때
객체생성
▶ 리터럴 표기법 : var a= 10;
▶ 생성자 함수 사용하여 객체생성 : this.속성
▶ Object.create() 메소드를 이용하여 인스턴스 생성
3. 이벤트 객체
이벤트
event 객체는 이벤트 발생 시 이벤트 발생시킨 요소와 발생한 이벤트 정보를 제공하고 발생한 커서의 위치 정보를 제공합니다.
▶ 이벤트 — 방문자의 모든 동작. 스크립트를 실행할 요소 선택
▶ 이벤트 등록메서드 (바인딩) — 방문자 특정 동작 시 메서드를 이용하여 저장된 코드를 실행
▶ 이벤트 핸들러 — 이벤트 발생 시 코드를 실행시키는 것
ex1)
$("#btn").click( function() {
코드(창 띄움)
}
▶ 이벤트 — 버튼을
▶ 이벤트 등록메서드 — 클릭했을 때
▶ 이벤트 핸들러 — 경고창
ex 2)
html 파일
<body>
<img src="image/flower.jpg" alt="" id="cover">
// js 파일 연결
</body>
javascript 파일
var coverImage = document.querySelector("#cover");
coverImage.onclick = function() {
alert('이미지클릭');
};
모든 요소는 addEventListener 메서드가 있어 이 메서드를 통해 이벤트가 일어났을 때 호출할 함수를 지정할 수 있습니다. 또한 한 요소에 여러 이벤트 동시에 처리가능합니다.
- 프로퍼티 : clientX, clientY, target
이벤트 바인딩 방법
1. HTML 이벤트핸들러 : 권장하지 않습니다.
<onclick="...">
2. DOM이벤트핸들러
요소.onblur.checkusername; : 이벤트앞에 on붙이고 함수에 괄호는 생략합니다.
3. 이벤트리스너
요소.addEventListener('event', functionName[, Boolean]);
-> 요소.addEventListener('blur', ckeckusername[, fase]);
매개변수가 있는 경우
-> 요소.addEventListener('blur', function() {
checkuserName(5);
}, false);
구버전 IE
addeventListener() 대신 attachEvent()
이벤트 버블링과 캡쳐링
이벤트는 html이 계층적이기 때문에 한 곳에서만 처리해야하는 것은 아닙니다. 이벤트 핸들러는 다른 이벤트 핸들러에 어떻게 호출될지 영향을 주는 방법에 대해 알아볼까요
- 이벤트버블링 : 이벤트가 일어난 요소부터 시작해 거슬러 올라가는 방법. 이벤트 버블링을 막는 방법 preventDefault(), stopPropagation(), stopImmediatePropagation()
- 이벤트캡쳐링 : 가장 먼 조상부터 시작해 이벤트에 응답할 기회가 주어짐
이벤트 카테고리
- 드래그 이벤트 : dragStart, drag, dragend, drop
- 포커스 이벤트 : focus이벤트(필드에 들어갈 때), blur이벤트(필드 나갈 때), change이벤트(필드를 바꿀 때)
- 폼 이벤트 : submit
- 입력장치 이벤트 : mousedown, move, mouseup, mouseleave, mouseover, mousewheel, keydown, keypress, keyup
- 미디어 이벤트 : pause, play
- 문서로딩 이벤트
- abort() : 문서 완전히 불러오기 전 멈췄을 때.
- error() : 정확히 로딩되지 않았을 때
- load() : 로딩이 끝나면 호출
- resize() : 문서 화면 크기 변경 시
- scroll() : 문서 화면 스크롤 시
- unload() : 문서를 벗어날 때
- ready()
- 터치 이벤트 : touches 프로퍼티
- 그룹이벤트등록/제거메서드 : on(), off()
| 관련포스트 |
| ▶ Javascript | 자바스크립트 기초 문법 |
| ▶ Javascript | 자바스크립트 객체 (내장, DOM, BOM) |
'웹 개발 > 웹프로그래밍' 카테고리의 다른 글
| HTML | 콘텐츠 삽입 태그 iframe, embed, object 비교 (102) | 2024.07.26 |
|---|---|
| Javascript | 자바스크립트 객체 (내장, DOM, BOM) (33) | 2024.04.05 |
| Javascript | 자바스크립트 기초 문법 (75) | 2024.04.03 |
| Javascript | 비동기 처리 (콜백, 프로미스, await) (74) | 2024.04.01 |
| Javascript | jQuery 유용한 플러그인과 라이브러리 소개 (53) | 2024.03.25 |
| Javascript | jQuery UI 소개와 사용방법 (34) | 2024.03.22 |
| 파일업로드 dropzone.js 으로 손쉽게 구현하기 (84) | 2024.03.20 |
| JavaScript | 클릭 시 복사 버튼 만들기 (clipboard.js) (34) | 2023.09.30 |
댓글