Day3, 4. Event

.querySelectorAll  → 유사배열을 호출한다.

따라서 loop을 돌릴 수 있고, 인덱스로 호출할 수도 있다.

.parentElement     →    부모 Element를 호출할 수 있다.

.children             →     자식 Element를 호출할 수 있다.

.setAttribute    →    속성을 설정하는 것.

.getAttribute    →    해당 속성에 대한 값을 읽어오는 것이다.

dataset : date- 으로 시작하는 속성들에 대한 정보가 담겨있는 객체

모든 Element에는 style이라는 property가 있다. 

style은 CSS 정보가 들어있고, 자바스크립트를 이용해서 수정할 수 있다.

Camelcase : 자바스크립트에서 사용

Snakecase : css에서 사용

setTImeout (함수, 시간)

두 번째 인자인 시간 후에 함수를 실행시켜달라는 것이다. 시간의 단위는 m/s 즉, 2000은 2초.

 

 

이렇게 HTML에 header 태그 하위에 <div>, <span> 태그로 코드를 작성한 후에

자바스크립트로 headerElement 변수를 header 태그를 출력하도록 하고,

headerElemnet.innerHTML을 출력하면 header태그의 내부 HTML코드들이 출력된다. 

추가적으로 이런 코드를 작성하면 기존의 내부 HTML들이 제거되고 새로운 내부 HTML 코드가 생성된다.

createElement 는 태그를 만들기만 한다. 

이런 식의 코드를 작성하면 img 태그가 생성될 뿐, 화면에는 변화가 없다. 

  다음과 같이 이미지 태그에 실제 사진의 src를 적용해도 변화는 없다. 

.appendChild → 뒤에 자식으로 붙인다.

따라서 변수 headerElement로 선언된 header 태그 자식 태그로 imgElement로 선언된 img 태그가 들어가게 된다.

  

timerId로 10초 후에 foo함수를 실행하는 타이머를 걸고, clearTimeout으로 5초 후에 timerId를 취소한다. 

따라서 timerId는 실행되지 않는다.

setInterval은 반복적으로 실행한다. foo라는 함수를 1초에 한번씩 반복적으로 실행한다.

setInterval 또한 위에서처럼 clearInterval을 통해 중단할 수 있다.

Event

사건, 해프닝

• 사용자가 특정 부분을 클릭!
• 사용자가 난데없이 드래그!
• 사용자가 특정 폼 작성!
• 사용자가 윈도우 탭 닫음!
• 사용자가 브라우저 윈도우 사이즈 조정

Event Handler

이벤트가 발생했을 때, 실행하는 작업

• 사용자가 특정 부분을 클릭! 했을 때 alert 띄우기
• 사용자가 난데업싱 드래그 했을 대 배경 색깔 바꾸기
• 사용자가 특정 폼 작성 했을 때 입력 값 확인하기
• 사용자가 브라우저 윈도우 사이즈 조정했을 때 특정 기능 막기

Evnet Handler 등록

EventTarget.addEventListener(EVENT_TYPE, EVENT_HANDLER);

EventTarget이란, 이벤트를 지원하는 특정 객체 중 하나

• Element
• Window
• document
• etc

Event_Type이란, 이벤트의 종류, 즉 브라우저가 지원하는 이벤트가 무엇인지를 알려준다.

• "click"             (MouseEvent)
• "focus"            (FocusEvent)
• "hashchange"    (HashChangeEvent)

Event Handler는 특정 이벤트가 발생했을 때 실행되는 함수(자바스크립트 함수), 즉 이벤트 핸들러 자리에는 항상 함수를 써야한다.

Event Object

Event Handler에는 이벤트 객체가 첫번째 argument로 넘어옵니다.

이벤트 객체는 해당 이벤트에 대한 추가 정보들을 가지고 있습니다.

우리는 이 객체에 담긴 정보들을 이용하여 여러 가지 작업을 수행합니다.

그리고 그 추가 정보는 이벤트의 종류에 따라 조금씩 차이가 있습니다.

인자 값에는 event.type이 있다. 위 코드의 인자값은 ev이다.

event.type

발생한 이벤트의 종류에 대한 정보를 담고 있습니다.

• click
• keypress
• mousedown
• focus
• blur

event.target

이벤트가 발생된 최초 Element

<li>태그를 모두 포함하는 <ul>태그에 이벤트를 달았다.

2번째 li 클릭하면 2가, 5번째 li를 클릭하면 5가 뜬다.

<li>는 <ul>에 포함되어 있기 때문에 <li>를 클릭하는 것은 <ul>을 클릭하는 것과 사실상 같아 이벤트가 발생한다.

event.currentTarget

발생된 이벤트가 등록되어 있는 Element

만약 ev.currentTarget.id로 잡으면 <li>를 클릭해도 <ul>에 이벤트가 달려있기 때문에 "ul"이 호출된다.

event.preventDefault    →    함수

해당 이벤트의 브라우저 기본 동작을 방지하는 함수이다.

eventTarget과 currentTarget는 element 타입의 객체이다.

만약, check박스 객체에 preventDefault 함수를 사용하면 콘솔은 작동하지만 체크박스는 체크가 되지 않는다.

event.stopPropagation

해당 이벤트의 흐름을 중지시키는 함수이다.

Event Capturing : EventTarget 당사자의 최상위 엘리멘트부터 차례대로 Event가 실행한다.

Event Bubbling : EventTarget 당사자부터 Event가 실행

두번째 인자까지 입력하거나 세번째 인자로 false를 입력해주면 bubbling으로 실행된다.

Capturing과 Bubbling 중복 등록되어있을 경우, Capturing이 뜨고 이후 Bubbling가 뜬다.

여기에는 11개의 엘레멘트가 있다. 모든 엘레멘트에 click이벤트를 모두 개별적으로 등록되어있고, 번개마크의 엘레멘트를 클릭하면 capturing은 최상위 엘레멘트에서 번개모양의 엘레멘트까지 개별적으로 이벤트가 실행되고, bubbling은 번개모양의 엘레멘트에서부터 최상위 엘레멘트로 실행된다.

Event Handler에 3번째 인자를 추가하고 그 인자값으로 true라는 Boolean 값을 넣어주면 capturing으로 등록된다.

세번째 인자를 입력하지 않으면 기본값인 bubbling으로 등록된다.

혹은 Boolean값을 false값으로 준다.

일반적으로 bubbling으로 많이 쓴다.

하나의 엘레멘트마다 capturing과 bubbling 두개씩 총 6개의 이벤트가 등록되어 있다.

third 엘레멘트를 클릭했을 때, 콘솔은 다음과 같이 출력된다.

second 엘레멘트를 클릭했을 때는 위와 같이 출력된다.

만약 아래와 같이 second 엘레멘트의 capturing에 stopPropagation을 실행했을 때,

second 엘레멘트를 클릭하면?

third 엘레멘트의 capturing에 stopPropagation을 실행했을 때는 다음과 같이 콘솔이 출력된다.

이것은 stopPropagation이 capturing에서인지 bubbling에서인지가 중요한 것이 아니라 어떤 객체에서 실행되었느냐가 중요하기 때문이다.

third 엘레멘트에 stopPropagation이 실행되었기 때문에 capturing/bubbling과 상관없이 third 엘레멘트에서 이벤트가 중단된다.

** remove event listener