이벤트란?
- 사용자가 클릭했을 때, 스크롤을 했을 때, 텍스트 필드의 내용을 바꾸었을 '때'
- 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
'🤯TIL > Javascript & jQuery' 카테고리의 다른 글
| [생활코딩] 문서의 기하학적 특성(엘리먼트 위치 크기 알아내기 / Viewport / 스크롤 / 스크린의 크기) (0) | 2023.03.15 |
|---|---|
| [생활코딩] Text 객체(값 API, 조작 API) (0) | 2023.03.13 |
| [생활코딩] Document 객체 (0) | 2023.03.10 |
| [생활코딩] Node 객체(관계 API, 노드 종류 API, 변경 API) (0) | 2023.03.08 |
| [생활코딩] Element 객체(식별자 API, 조회 API, 속성 API, jQuery 속성 제어 API) (0) | 2023.03.07 |