[여덟번쨰] 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 메서드 : 이벤트 제거하기