[생활코딩] 이벤트(등록방법 / 전파 / 기본동작의 취소 / 문서로딩 / 마우스 / jQuery 이벤트)
이벤트란?
- 사용자가 클릭했을 때, 스크롤을 했을 때, 텍스트 필드의 내용을 바꾸었을 '때'
- event target : 이벤트가 발생하는 대상 ex) 버튼
- event type : 이벤트가 발생하는 행위 ex) 클릭, 변경
- event handler : 어떠한 이벤트가 발생했을 때, 실행할 코드들
등록방법 & inline
- 이벤트의 대상에 이벤트 핸들러를 등록해줘야 한다.
(1) inline
: 이벤트를 이벤트 대상의 태그 속성으로 지정하는 것
(this : 이 이벤트가 동작하고 있는 element를 가르킨다. document.getElementById('target') 대신 사용가능)
(2) 프로퍼티 리스너
: 이벤트 대상이 되는 객체의 프로퍼티로 이벤트를 등록하는 방식
: 인라인 방식에 비해 HTML과 JS를 분리 가능
(3) addEventListener()
: 이벤트 등록하는 가장 권장되는 방식
(첫번째 인자 : 이벤트 객체의 타입, 두번째 인자 : 호출되는 내용)
<input type = "button" id = "target" value = "button" />
<script>
var t = document.getElementById('target');
t.addEventListener('click', function(event) {
alert('Hello world, '+event.target.value);
});
</script>➡ 이벤트 객체를 이용하면 복수의 엘리먼트에 하나의 리스너를 등록해서 재사용할 수 있다.
이벤트 전파(버를링과 캡처링)
- HTML 태그는 중첩되어 있다.
➡ 이벤트 핸들러가 어떤 순으로 발생하느냐에 따라 나뉜다. - (1) 캡처링 capturing
: event가 위에서 아래로 이벤트 발생 (부모에서 자식으로) / 사용 잘 X
- event.target : 깊숙한 곳에 위치한 이벤트 대상
- HTML ➡ BODY ➡ FIELDSET ➡ INPUT 순으로 - (2) 버블링 bubbling
: event가 아래에서(안에서) 위로 이벤트 발생 (자식에서 부모로)
: 안쪽의 코어에서부터 시작해 커진다. : 거품처럼 커진다? 해서 버블링이란 이름이 붙은 듯
- INPUT ➡ FIELDSET ➡ BODY ➡ HTML 순으로
➡ stophandler 호출 : 이후에 등장하는 이벤트 핸들러를 끊을 수 있음.
기본동작의 취소
- 이벤트는 사용자 정의 뿐만 아니라 기본적으로 브라우저가 가지고 있는 이벤트, 동작방법이 있다.
- inline
- event 핸들러에 객체로 전달된 event 메소드 중 preventDefault(); 호출하면 기본 이벤트 동작이 취소됨
폼
- 사용자가 입력한 정보를 서버로 전송할 때 사용하는 form
- submit : 유효성 검사 가능
- blur : 텍스트 필드 빠져나올때 생
- focus : 텍스트 필드 선택 시 강조되는 효과
문서로딩
- 웹페이지를 프로그래밍으로 제어하기 위해 웹페이지의 모든 요소에 대한 처리 필요
- 이것을 알려주는 이벤트가 load, DOMContentLoaded
- <script> 후 <body> 순으로 나와있을 경우, body 내 id 사용 시 null 값이 출력됨
- 😎 해결방법
- window.onload : 웹 페이지 전체가 브라우저에서 해석이 다 끝난 후 타겟을 찾는다.
- window.addEventListener('load', function()); : 상동
- window.addEventListener('DOMContentLoaded', function()); : 로딩 시간 단축
마우스
- 이벤트 타입
- click : 클릭했을 때 발생하는 이벤트.
- dblclick : 더블클릭을 했을 때 발생하는 이벤트
- mousedown : 마우스를 누를 때 발생
- mouseup : 마우스버튼을 땔 때 발생
- mousemove : 마우스를 움직일 때
- mouseover : 마우스가 엘리먼트에 진입할 때 발생
- mouseout : 마우스가 엘리먼트에서 빠져나갈 때 발생
- contextmenu : 컨텍스트 메뉴가 실행될 때 발생(우클릭) - 키보드 조합
- 마우스 이벤트가 호출될 때 특수키가 눌려진 상태를 감지해야 할 경우
- 객체의 프로퍼티 사용 / @키가 눌려져 있느냐 - 종류
- event.shiftKey
- event.altKey
- event.ctrlKey - 마우스 포인터 위치
- clientX와 clientY를 사용
jQuery 이벤트
- 훨씬 적은 코드로 사용자(개발자) 친화적인 인터페이스를 제공 😎
<input type="button" id="pure" value="pure" />
<input type="button" id="jquery" value="jQuery" />
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
// 순수하게 구현했을 때
var target = document.getElementById('pure');
if(target.addEventListener){
target.addEventListener('click', function(event){
alert('pure');
});
} else {
target.attachEvent('onclick', function(event){
alert('pure');
});
}
// jQuery를 사용했을 때
$('#jquery').on('click', function(event){
alert('jQuery');
})
</script>on API 사용법
(1) 기본 사용법
- jQuery에서 가장 중요한 이벤트 API
- 기본 문법 : .on( events [, selector ] [, data ], handler(eventObject) )
(2) 필터링
- selector 파라미터는 이벤트 대상을 필터링함
- jQuery는 존재하지 않는 엘리먼트에도 이벤트를 등록할 수 있음(미리 등록 가능)
(3) 다중 바인딩
- 하나의 엘리먼트에 여러개의 이벤트 타입 동시등록
(4) 이벤트 제거
- on ➡ off 사용
이벤트 - 웹브라우저 JavaScript
이벤트란? 이벤트(event)는 어떤 사건을 의미한다. 브라우저에서의 사건이란 사용자가 클릭을 했을 '때', 스크롤을 했을 '때', 필드의 내용을 바꾸었을 '때'와 같은 것을 의미한다. onclick 속성의
opentutorials.org