본문 바로가기

Dev.FrontEnd/JavaScript

[여덟번쨰] JavaScript - Web Browser / 이벤트 II




이벤트

키보드를 눌렀을 때 텍스트가 입력되는 것은 기본적으로 웹브라우저가 가지고 있는 API 라고 할 수 있다.
input 태그를 불러왔을 때 submit 버튼을 누르면 데이터가 전송되는 것도
a href 태그를 클릭하면 URL로 이동하는 것도
기본 이벤트 동작들
즉 API
브라우저들의 구성요소들이 우리가 원하는 작업이 실행될 수 있도록 하는 것이 이벤트

- 동작 취소하기.
checked 됬을 때 return false를 해주면 실행되지 않도록 해서
동작의 취소 기능을 구현한다.


이벤트 타입
- 폼 form

form이라는 이벤트 안에 submit을 만든다.
submit : 사용자가 입력한 폼의 정보들을 서버로 전송하는 명령
change : 텍스트 입력창에 입력을 하면 그대로 입력
blur :  포커스를 뺏을 때
focus :  포커스 시켰을 때

문서로딩
html 문서를 웹브라우저가 컴파일할 때는 절차지향으로 한다.
그러므로 body 태그 끝자락에 script 태그를 위치시킨다.
그렇다면 head 태그는 제어할 수 없는 가

그렇지 않다.

window 객체로 브라우저 자체, 창을 대표하는 onload 이벤트 타입을 사용.
window.addEventListener('load', function(){
var t = document.document.getElementById('target');
console.log(t);
})
이렇게 하면 조회할 수 있다.
단, onload를 사용하면 웹페이지의 모든 정보를 다운받아주는 것이다.
결국 웹페이지가 느려진다.
이런 문제를 해결하기 위해 각각 태그 자체만을 다운로드 할 수는 없을까
load 대신 DOMContentLoaded
HTML 문서 파일만 다운이 되면 된다.

결국 jQuery;

on API 사용법
jQuery가 제공하는 것 중 가장 중요한 것.

.on(event,[selector],[],handler)
event : 행위
handler : 실행될 것.

selector : 필터링의 기능을 담당
셀렉터 인자는 late binding이란 기능을 갖고 있다.
나중에 Element가 추가 되더라도 이벤트를 적용시킬 수 있다.
(아직 존재하지 않는 태그에 대해서도 이벤트를 설치할 수 있다.)
-> 이미 존재하는 엘리먼트의 하위 엘리먼트(아직 존재 X)로 잡는다.

다중 바인딩?
하나의 on API를 통해서 여러 개의 이벤트 핸들러를 설치한다.
이벤트와 이벤트 사이에 공백을 지정
('focus blur', function(e){
-> focus 와 blur 사이에 공백을 줘서 여러 개의 이벤트 핸들러를 설치했다.
정말 다양하다!

cf) .off 메서드 : 이벤트 제거하기