9주 dom & event advanced

Event�� 고급

목표Event�� 를�� 효율적으로�� 등록하는�� 방법을�� 안다.��

특정�� DOM�� 위치에�� node를�� 추가할�� 수�� 있다.��

Mobile�� Web�� 에서의�� Event가�� 무엇이�� 있고�� 어떻게�� 사용하는지�� 안다.

Event�� delegation으로�� 효율적으로�� 이벤트�� 관리하기

이벤트를�� 좀더�� 효율적으로�� 등록하는�� 방법을�� 배웁니다.

두�� 개의�� 이벤트�� 핸들러를�� 만들고,��

P영역을�� 클릭하면�� 어떤�� 핸들러가�� 실행될까?

div

p

div.addEventListener(handlerDIV)!p.addEventListener(handleP)

http://goo.gl/s7MJMl /에스7엠제이엠엘

확인.

http://goo.gl/s7MJMl

jsbin을�� clone하고,��

P영역�� 이벤트�� 핸들러를�� 제거해보자.

div

p

div.addEventListener(handlerDIV)!p.addEventListener(,handleP,)

handlerDIV에서�� e.target으로�� 클릭�� 영역�� 정보를�� 출력해보자.��

div

p

div.addEventListener(,handlerDIV,)!!function handlerDIV(e) {! alert(e.target);!}

#�� e.currentTarget은�� 무엇이�� 출력될까?

각각�� 이벤트핸들러를�� 등록하지�� 만들지�� 말고,��

감싸고�� 있는�� 부분에만�� 이벤트�� 핸들러를�� 등록할�� 수�� 있지�� 않을까?��

div

p

div.addEventListener(,handlerDIV,)!!function handlerDIV(e) {! alert(e.target);!} p p

ul p div

비슷한�� 상황�� 하나�� 더.��

li�� 태그를�� 누를�� 때�� 마다�� 그�� 안에�� text내용을�� 출력하고�� 싶다면?

<ul><li> 빨강 </li><li> 주황 </li><li> 노랑 </li><li> 초록 </li><li> 파랑 </li><li> 남색 </li><li> 보라 </li>

</ul>

li1.addEventListener(‘click’,function(){...}, false);li2.addEventListener(‘click’,function(){...}, false);li3.addEventListener(‘click’,function(){...}, false);li4.addEventListener(‘click’,function(){...}, false);li5.addEventListener(‘click’,function(){...}, false);li6.addEventListener(‘click’,function(){...}, false);li7.addEventListener(‘click’,function(){...}, false);

http://jsbin.com/ElEgoSU/4/edit

너무�� 많은�� 이벤트�� 핸들러는�� 브라우저의�� 성능에�� 좋지�� 않음��

메모리사용�� 증가,�� 기억해야�� 할�� 이벤트�� 핸들러의�� 증가..

<ul><li> 빨강 </li><li> 주황 </li><li> 노랑 </li><li> 초록 </li><li> 파랑 </li><li> 남색 </li><li> 보라 </li>

</ul>

li1.addEventListener(‘click’,function(){...}, false);li2.addEventListener(‘click’,function(){...}, false);li3.addEventListener(‘click’,function(){...}, false);li4.addEventListener(‘click’,function(){...}, false);li5.addEventListener(‘click’,function(){...}, false);li6.addEventListener(‘click’,function(){...}, false);li7.addEventListener(‘click’,function(){...}, false);

이와�� 같이�� 부모�� 영역에�� Event를�� 등록해서�� 사용하는�� 것을��

이벤트�� 위임(delegation)이라고�� 한다.��

!

이를�� 잘�� 활용해서�� 이벤트를�� 등록하는�� 것이�� nice한�� 방법임.��

이 벤 트 �� 버 블 링

div

p

body

하위�� Element�� 먼저�� 실행되고�� 나머지도�� 모두�� 실행�� !body.addEventListener(,handler1,)!div.addEventListener(,handler2,)!p.addEventListener(,handler3,)

1.handler3��

2.handler2��

3.handler1

div

p

body

Event는�� 상위�� element로�� 전파(propagation)된다�� !

bubbling

div

a

body

하지만,�� addEventListener()를�� 사용하여�� 하위�� element로�� 전파되게�� 할�� 수도�� 있다.

예제)�� addEventListener(‘click’�� ,�� handler�� ,�� true);��

!document�� >�� body�� >�� div�� >�� p

capturing

D O M ��

다 양 하 게 �� 조 작 해 보 자

html을�� 문자열로�� 만들고,�� 한�� 방에�� 넣는�� 방법!

element.innerHTML = “<li>쇼핑</li>”

잉...??�� innerHTML은�� 자식을�� 모두�� ...교체해버린다..��

원하는�� 위치에�� 쉽게�� 추가�� 하려면�� ?

잉...??�� innerHTML은�� 자식을�� 모두�� ...교체해버린다..��

원하는�� 위치에�� 쉽게�� 추가�� 하려면�� ?

element.insertAdjacentHTML(position, html);

https://developer.mozilla.org/en-US/docs/Web/API/element.insertAdjacentHTML

https://developer.mozilla.org/en-US/docs/Web/API/element.insertAdjacentHTML

그외�� 꼭�� 알아야�� 할�� DOM�� API

document.createElement(‘div’);document.createElement(‘li’);

element를�� 새로�� 만드는�� 방법



baseElement.appendChild(targetNode);element�� 추가



baseElement.appendChild(targetNode);element�� 추가

baseElement.removeChild(targetNode);element�� 삭제.

<div id= ‘wrap’></div> div�� 아래�� p�� 태그(id가�� p1)를�� 추가하자.

<div id= ‘wrap’></div> div�� 아래�� p�� 태그(id가�� p1)를�� 추가하자.

아마도�� 이런�� 순서가�� 될�� 듯.��

1.�� div�� 를�� 기억한다.��

2.�� p�� 를�� 하나�� 생성하고��

3.�� p에�� ‘p1’�� 이라는�� id�� 속성을�� 추가한다.��

3.�� div자식으로�� p�� 를�� 추가한다.

<div id= ‘wrap’></div>

! var wrapDiv = document.getElementById('wrap'); var divEle = document.createElement('p'); divEle.id = 'p1'; wrapDiv.appendChild(divEle);!

div�� 아래�� p�� 태그(id가�� p1)를�� 추가하자.

특정�� 지점에�� node를�� 추가하고�� 싶다면?��

insertBefore�� API를�� 사용.��

!!

text�� node를�� 추가하려면?��

textNode를�� 추가하기�� 위해서는�� textContent를�� 사용하는게�� 좋다.��

물론�� createTextNode로�� textNode를�� 자식으로�� 추가�� 할�� 수도�� 있다.��

숙제1

다음과�� 같은�� element�� 가�� 있다.�� <div id= 'wrap'> <ul> <li>뉴스</li> <li>카페</li> <li>블로그</li> <li>메일</li> </ul> </div>

!위�� html에�� 어떠한�� id,class�� 를�� 부여하지�� 않고��

블로그�� 앞에�� ‘쇼핑’을�� 동적으로�� 추가하라��

(insertBefore,�� createElement�� ,textContent�� 를�� 사용)

http://jsbin.com/abafid/1/edit

http://jsbin.com/abafid/1/edit

모바일 웹 이벤트전용우

터치 이벤트의 이해

모바일은 마우스 이벤트가 없다.

Mouse Event

mousedown mousemove

mouseup

Touch Event

touchstart touchmove

touchend

mouse와 touch의 차이

• touch는 mouseover이벤트가 없다.

• touch는 멀티 터치가 가능.

터치 이벤트 객체의 이해

//touchmove, touchend같음

ele.addEventListener("touchstart",function(e){ event.touches; //TouchList [Touch...] event.changedTouches; //TouchList [Touch...] event.targetTouches; //TouchList [Touch...] });

터치 이벤트 설명

• 모든 터치 이벤트에는 touches, changedTouches, tagetTouches의 속성이 있다.

• 각 속성에은 [TouchList] 타입이다.

• TouchList는 [Touch]로 구성된 List이다.

• Touch는 아래와 같은 구조로 되어 있다.

http://www.w3.org/TR/touch-events/#touchlist-interface

http://www.w3.org/TR/touch-events/#idl-def-Touch

Touch의 구조속성 설명

identifier touch 포인트의 유일한 값

target touch한 엘리먼트

clientX(Y) 화면에서의 X,Y 좌표

pageX(Y) 페이지에서의 X,Y 좌표

screenX(Y) 디바이스 화면의 X,Y 좌표

위치값의 이해

clientX(Y)

pageX(Y)

screenX(Y)

TouchList의 구조[

{ "identifier" : 1, "target" : div, "clientX" : "10px", "clientY" : "10px", "pageX" : "30px", "pageY" : "30px", "screenX" : "10px", "screenY" : "10px", }, { "identifier" : 2, "target" : div, "clientX" : "20px", "clientY" : "20px", "pageX" : "40px", "pageY" : "40px", "screenX" : "20px", "screenY" : "20px", }

]

[ { "identifier" : 1, "target" : div, "clientX" : "10px", "clientY" : "10px", "pageX" : "30px", "pageY" : "30px", "screenX" : "10px", "screenY" : "10px", }

]

touchstart touchmove

[ { "identifier" : 1, "target" : div, "clientX" : "10px", "clientY" : "10px", "pageX" : "30px", "pageY" : "30px", "screenX" : "10px", "screenY" : "10px", }

]

touchend

TouchList의 종류종류 설명

touches 스크린의 터치의 개수changedTouches 이벤트를 발생시킨 터치의 개수targetTouches 엘리먼트 위에 올라온 터치의 개수

[touchstart] event.touches; //2 event.changedTouches;//1 event.targetTouches;//1

※ 안드로이드는 기기별로 다르며 대게 touches가 targetTouches랑 같다.

[touchmove] event.touches; //2 event.changedTouches;//1 event.targetTouches;//1

[touchend] event.touches; //0 event.changedTouches;//1 event.targetTouches;//0

터치 이벤트의 브라우저별 차이

기본적으로 알고 있어야 할 이슈

• iOS는 스크롤 이벤트에서 돔을 수정하면 바로 반영되지 않는다.

• 안드로이드는 touchmove에서 스크롤되면 touchcancel이벤트가 발생후 touch이벤트(move,end)가 발생 안한다

• touchmove에서 e.preventDefault()을 사용하면 scroll을 막을 수 있다.

• android의 경우 touches와 targetTouches와 같다.

End ;-D

9주 dom & event advanced

Software