[JavaScript] 웹 브라우저에 무슨 일이 ?? What happened to web Browser?

우리가 웹사이트의 틀을 그럴싸하게 꾸밀 때, Html로 마크업하고,

그 태그 요소들에 패딩,마진, 배경색, 애니메이션 등의 효과를 주는 CSS 요소들로 치장을 한다.

더 나아가,,  웹페이지에 사용하는 마우스 클릭시 뜨는 alert창, id, pw를 입력하는 회원가입 시 뜨는 오류 창, 이미지의 노출 방식( 이미지 슬라이드, 스크롤 다운시 이미지가 나타나는 방식..등) 그게 다 자바스크립트에서 발생한 이벤트에 반응해 특정 동작을 수행할 수 있다.. 

---

자바스크립트는 스크립트 언어로 소스 코드를 컴파일하지 않고도 실행할 수 있는 프로그래밍 언어이다.

 

  자바스크립트의 특징  

• 객체 기반의 스크립트 프로그래밍 언어.
• 웹 브라우저 내에서 주로 사용하며, 다른 응용 프로그램의 내장 객체에도 접근할 수 있는 기능이 존재.
• 자바스크립트는 브라우저마다 지원되는 버전이 상이..

 

자바스크립트에는 문서 객체DOM(document object Model) , BOM( Browser object Model) 객체 모델의 종류다.

Dom도 Bom도 자바스크립트가 웹페이지를 쉽게 조작하기 위해 제공되는 기능, 조작 가능한 객체 모델이라는 것이고,

Bom의 경우는, 웹브라우저에서 제공되는 조작 방식이 어떤 것이 있는지,

Dom의 경우는, html 요소를 어떤식으로 가져와서 조작해야 하는지에 대해 알아보고 숙달하면 된다.

 

 

그래 다 알겠고,,,그렇다면,, 자바스크립트 내에서 Event 란 도대체 뭐야?

 웹 브라우저 내에서 알려 주는 HTML 요소에 대한 사건의 발생의 의미 해..

웹페이지에 사용된 자바스크립트는 이렇게 발생한 이벤트에 반응하여 특정 동작을 수행할 수 있다. 따라서 클라이언트 측 자바스크립트를 비동기식 이벤트 중심(event-driven) 의 프로그래밍 모델이라고 한다.

여기서 다시,, 브라우저 객체 모델(BOM)이란?

자바스크립트를 이용하면 브라우저의 정보에 접근하거나 브라우저의 여러 기능들을 제어할 수 있다. 이때 사용할 수 있는 객체 모델이 바로 브라우저 객체 모델(BOM, Browser Object Model)이다.

브라우저 객체 모델(BOM)은 문서 객체 모델(DOM)과는 달리 W3C의 표준 객체 모델은 아니다.
하지만 이 모델은 자바스크립트가 브라우저의 기능적인 요소들을 직접 제어하고 관리할 방법을 제공해 준다.
자바스크립트에서는 이러한 BOM 모델의 객체들을 전역 객체(global object)로 사용할 수 있다.

이벤트 타입 (event type) 

이벤트 타입은 발생한 이벤트 종류를 나타내는 문자열로, 이벤트 명(event name) 이라고 하기도 함. 가장 많이 사용하는 키보드, 마우스, HTML DOM, Window 객체 등을 처리하는 이벤트가 제공됨. 

이벤트 명세(event specification) 

예전에는 onload, onclick, onmouseover 와 같이 기본적이고 단순한 이벤트만을 사용했다. 하지만 더 나아가 웹기술 발전에 따라 touch 나 gesture 와 같은 새로운 이벤트들이 늘어나고 있다. 이벤트를 위한 명세는 현재 다음과 같이 정의된다.

1.  DOM Level 3 이벤트 명세
2.  HTML5 관련 이벤트 명세
3.  모바일 장치를 위한 이벤트 명세

이벤트 리스너(event listener)

이벤트 리스너란 이벤트가 발생했을 때 그 처리를 담당하는 함수를 가리키며, 이벤트 핸들러(event handler)라고도 합니다. 지정된 타입의 이벤트가 특정 요소에서 발생하면, 웹 브라우저는 그 요소에 등록된 이벤트 리스너를 실행시킨다.

이벤트 리스너 등록
작성된 이벤트 리스너는 먼저 해당 객체나 요소에 등록되어야만 호출될 수 있습니다.
객체나 요소에 이벤트 리스너를 등록하는 방법은 다음과 같습니다.

 

1. 이벤트의 대상이 되는 객체나 요소에 프로퍼티로 등록하는 방법

2. 객체나 요소의 메소드에 이벤트 리스너를 전달하는 방법

 

이벤트 호출 순서
addEventListener() 메소드를 사용하면 하나의 이벤트 타입에 여러 개의 이벤트 리스너를 등록할 수 있다. 
이때 특정 타입의 이벤트가 발생하면 브라우저는 다음과 같은 순서로 이벤트를 호출하게 됩니다.

 1. 이벤트의 대상이 되는 객체나 요소에 프로퍼티로 등록한 이벤트 리스너를 가장 먼저 호출한다.
2. 그 후 addEventListener() 메소드를 사용하여 등록한 이벤트 리스너를 등록한 순서대로 호출한다.