8주 dom & event basic

89
DOM & Event BASIC 8주

Upload: -

Post on 26-Jun-2015

389 views

Category:

Documents


1 download

TRANSCRIPT

Page 1: 8주  dom & event basic

DOM����������� ������������������  &����������� ������������������  Event����������� ������������������  BASIC

8주

Page 2: 8주  dom & event basic

목표

HTML����������� ������������������  을����������� ������������������  동적으로����������� ������������������  조작할����������� ������������������  수����������� ������������������  있다

Page 3: 8주  dom & event basic

U I ����������� ������������������   개 발 에 서 의 ����������� ������������������  

D O M ����������� ������������������   & ����������� ������������������   E v e n t

Page 4: 8주  dom & event basic
Page 5: 8주  dom & event basic

어느����������� ������������������  영역에서,����������� ������������������  

키보드����������� ������������������  입력을����������� ������������������  하면,����������� ������������������  ����������� ������������������  

어떤����������� ������������������  일이����������� ������������������  일어난다.

Page 6: 8주  dom & event basic

어느����������� ������������������  영역에서,����������� ������������������  

키보드����������� ������������������  입력을����������� ������������������  하면,����������� ������������������  ����������� ������������������  

어떤����������� ������������������  일이����������� ������������������  일어난다.

Page 7: 8주  dom & event basic

어느����������� ������������������  영역에서,����������� ������������������  

키보드����������� ������������������  입력을����������� ������������������  하면,����������� ������������������  ����������� ������������������  

어떤����������� ������������������  일이����������� ������������������  일어난다.

DOM����������� ������������������  API로����������� ������������������  찾기

Page 8: 8주  dom & event basic

어느����������� ������������������  영역에서,����������� ������������������  

키보드����������� ������������������  입력을����������� ������������������  하면,����������� ������������������  ����������� ������������������  

어떤����������� ������������������  일이����������� ������������������  일어난다.

Page 9: 8주  dom & event basic

어느����������� ������������������  영역에서,����������� ������������������  

키보드����������� ������������������  입력을����������� ������������������  하면,����������� ������������������  ����������� ������������������  

어떤����������� ������������������  일이����������� ������������������  일어난다.

이벤트����������� ������������������  등록

Page 10: 8주  dom & event basic

어느����������� ������������������  영역에서,����������� ������������������  

키보드����������� ������������������  입력을����������� ������������������  하면,����������� ������������������  ����������� ������������������  

어떤����������� ������������������  일이����������� ������������������  일어난다.

Page 11: 8주  dom & event basic

어느����������� ������������������  영역에서,����������� ������������������  

키보드����������� ������������������  입력을����������� ������������������  하면,����������� ������������������  ����������� ������������������  

어떤����������� ������������������  일이����������� ������������������  일어난다. 이벤트����������� ������������������  핸들러����������� ������������������  실행

Page 12: 8주  dom & event basic

어느����������� ������������������  영역에서,����������� ������������������  

키보드����������� ������������������  입력을����������� ������������������  하면,����������� ������������������  ����������� ������������������  

어떤����������� ������������������  일이����������� ������������������  일어난다. 이벤트����������� ������������������  핸들러����������� ������������������  실행

이벤트����������� ������������������  등록

DOM����������� ������������������  API로����������� ������������������  찾기

Page 13: 8주  dom & event basic

D O M 은 ����������� ������������������   무 엇 인 가 ? ����������� ������������������  

Page 14: 8주  dom & event basic

DOM(Document����������� ������������������  Object����������� ������������������  Model)은����������� ������������������  ,����������� ������������������  !

HTML을����������� ������������������  위한����������� ������������������  API이며,����������� ������������������  HTML을����������� ������������������  탐색할����������� ������������������  수����������� ������������������  있고,����������� ������������������  HTML구조를����������� ������������������  바꿀����������� ������������������  수도����������� ������������������  있다.����������� ������������������  !

����������� ������������������  

Page 15: 8주  dom & event basic

<html>

<head>

<title> NEXT Home Page </title>

</head>

<body>

<h1>Welcome!</h1>

<section>

<h2> 2013 start!</h2>

<p>blah..blah..</p>

</section>

</body>

</html>

HTML은����������� ������������������  DOM을����������� ������������������  통해����������� ������������������  Node의����������� ������������������  계층����������� ������������������  구조로����������� ������������������  표현����������� ������������������  가능����������� ������������������  ����������� ������������������  

Page 16: 8주  dom & event basic

����������� ������������������  Document

����������� ������������������  Element����������� ������������������  html

����������� ������������������  Element����������� ������������������  head

Element����������� ������������������  Title

����������� ������������������  Element����������� ������������������  Body

����������� ������������������  Element����������� ������������������  h

����������� ������������������  Element����������� ������������������  section

Element����������� ������������������  h2

Text����������� ������������������  2013����������� ������������������  start!

Element����������� ������������������  p2

Text����������� ������������������  blah..blah..

����������� ������������������  Text����������� ������������������  NEXT����������� ������������������  Home����������� ������������������  Page

<html>

<head>

<title> NEXT Home Page </title>

</head>

<body>

<h1>Welcome!</h1>

<section>

<h2> 2013 start!</h2>

<p>blah..blah..</p>

</section>

</body>

</html>

Page 17: 8주  dom & event basic

����������� ������������������  Document

<html>

<head>

<title> NEXT Home Page </title>

</head>

<body>

<h1>Welcome!</h1>

<section>

<h2> 2013 start!</h2>

<p>blah..blah..</p>

</section>

</body>

</html>

����������� ������������������  Element����������� ������������������  html

����������� ������������������  Element����������� ������������������  head

����������� ������������������  Element����������� ������������������  Body

����������� ������������������  Element����������� ������������������  h

����������� ������������������  Element����������� ������������������  section

Element����������� ������������������  h2

Text����������� ������������������  2013����������� ������������������  start!

Element����������� ������������������  p2

Text����������� ������������������  blah..blah..

Element����������� ������������������  Title

����������� ������������������  Text����������� ������������������  NEXT����������� ������������������  Home����������� ������������������  Page

Page 18: 8주  dom & event basic

각자의����������� ������������������  프로젝트에서����������� ������������������  살펴보기����������� ������������������  개발자도구����������� ������������������  -����������� ������������������  Elements����������� ������������������  탭����������� ������������������  선택����������� ������������������  -����������� ������������������  맨����������� ������������������  하단에����������� ������������������  계층살펴보기����������� ������������������  

Page 19: 8주  dom & event basic

Node����������� ������������������  에는����������� ������������������  속성이����������� ������������������  존재함.����������� ������������������  ����������� ������������������  

!

nodeType����������� ������������������  ����������� ������������������  

nodeName����������� ������������������  ����������� ������������������  

nodeValue����������� ������������������  

Page 20: 8주  dom & event basic

nodeType은����������� ������������������  숫자로����������� ������������������  표현가능.����������� ������������������  

html����������� ������������������  작업중에는����������� ������������������  1번����������� ������������������  element와����������� ������������������  3번����������� ������������������  text노드만����������� ������������������  참고함.����������� ������������������  

!

!

Element����������� ������������������  ����������� ������������������   :����������� ������������������  1����������� ������������������  

Attribute����������� ������������������  ����������� ������������������  :����������� ������������������  2����������� ������������������  

TEXT����������� ������������������  ����������� ������������������   ����������� ������������������   :����������� ������������������  3...����������� ������������������  

Page 21: 8주  dom & event basic

각자의����������� ������������������  프로젝트에서����������� ������������������  살펴보기����������� ������������������  개발자도구����������� ������������������  우측의����������� ������������������  properties����������� ������������������  항목

다른����������� ������������������  부분도����������� ������������������  살펴보자.����������� ������������������  ����������� ������������������  꽤����������� ������������������  다양한����������� ������������������  속성들이����������� ������������������  많다.����������� ������������������  

Page 22: 8주  dom & event basic

Node����������� ������������������  에는����������� ������������������  자식노드를����������� ������������������  모두����������� ������������������  담고����������� ������������������  있는����������� ������������������  childNodes가����������� ������������������  있다.����������� ������������������  

이것은����������� ������������������  NodeList����������� ������������������  Type이며����������� ������������������  배열과����������� ������������������  유사하지만����������� ������������������  배열이����������� ������������������  아니다.����������� ������������������  

!

!

childNodes;����������� ������������������  

childNodes.length;����������� ������������������  

childNodes[0];����������� ������������������  

Page 23: 8주  dom & event basic

각자의����������� ������������������  프로젝트에서����������� ������������������  살펴보기����������� ������������������  body태그의����������� ������������������  이름은?����������� ������������������  ,����������� ������������������  ����������� ������������������  ����������� ������������������  Node의����������� ������������������  type����������� ������������������  은?����������� ������������������  ����������� ������������������  ,����������� ������������������  ����������� ������������������  ����������� ������������������  자식����������� ������������������  노드의����������� ������������������  갯수는?����������� ������������������  ����������� ������������������  

!이번에는����������� ������������������  Console탭에서����������� ������������������  하기.

document.body.nodeName;

document.body.nodeType;

document.body.childNodes;

document.body.childNodes.length;

Page 24: 8주  dom & event basic

D O M ����������� ������������������   탐 색 ����������� ������������������  

Page 25: 8주  dom & event basic

원하는����������� ������������������  영역����������� ������������������  쉽게����������� ������������������  찾는����������� ������������������  방법은?

Page 26: 8주  dom & event basic

원하는����������� ������������������  영역을����������� ������������������  보자.

<div id="image_promotion" class="cmn_promotion_image" style=“display:none”>!

Page 27: 8주  dom & event basic

<div id="image_promotion" class="cmn_promotion_image" style=“display:none”>!

원하는����������� ������������������  영역을����������� ������������������  보자.

Page 28: 8주  dom & event basic

<div id="image_promotion" class="cmn_promotion_image" style=“display:none”>!

우리가����������� ������������������  활용할����������� ������������������  수����������� ������������������  있는����������� ������������������  정보들����������� ������������������  !

tag(nodename),����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  id,����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  class

Page 29: 8주  dom & event basic

document.getElementById(‘wrap’)ID로����������� ������������������  찾기����������� ������������������  (성능이����������� ������������������  좋다.����������� ������������������  다시말해����������� ������������������  빠르게����������� ������������������  찾는����������� ������������������  좋은����������� ������������������  방법)

Page 30: 8주  dom & event basic

document.getElementById(‘wrap’)ID로����������� ������������������  찾기����������� ������������������  (성능이����������� ������������������  좋다.����������� ������������������  다시말해����������� ������������������  빠르게����������� ������������������  찾는����������� ������������������  좋은����������� ������������������  방법)

document.getElementsByTagName(‘div’)tag로����������� ������������������  찾기

Page 31: 8주  dom & event basic

document.getElementById(‘wrap’)ID로����������� ������������������  찾기����������� ������������������  (성능이����������� ������������������  좋다.����������� ������������������  다시말해����������� ������������������  빠르게����������� ������������������  찾는����������� ������������������  좋은����������� ������������������  방법)

document.getElementsByTagName(‘div’)tag로����������� ������������������  찾기

document.getElementsByClassName(‘on’)className����������� ������������������  으로����������� ������������������  찾기

Page 32: 8주  dom & event basic

document.getElementById(‘wrap’)document.getElementsByTagName(‘div’)document.getElementsByClassName(‘on’)

return����������� ������������������  type����������� ������������������  ����������� ������������������  ?

Page 33: 8주  dom & event basic

document.getElementById(‘wrap’)

document.getElementsByTagName(‘div’)document.getElementsByClassName(‘on’)return����������� ������������������  type����������� ������������������  :����������� ������������������  nodeList

return����������� ������������������  type����������� ������������������  :����������� ������������������  ����������� ������������������  HTMLElement

Page 34: 8주  dom & event basic

숙제1����������� ������������������  

본인����������� ������������������  프로젝트에서����������� ������������������  ����������� ������������������  

document내에����������� ������������������  모든����������� ������������������  ‘li’태그를����������� ������������������  찾아서����������� ������������������  class이름을����������� ������������������  출력하는����������� ������������������  함수를����������� ������������������  만들자.����������� ������������������  

!����������� ������������������  힌트����������� ������������������  :����������� ������������������  attribute(속성)에����������� ������������������  접근하는����������� ������������������  방법.����������� ������������������  

element.id����������� ������������������  및����������� ������������������  element.className����������� ������������������  을����������� ������������������  활용해서����������� ������������������  접근����������� ������������������  가능

Page 35: 8주  dom & event basic

D O M ����������� ������������������   탐 색 ����������� ������������������  

css����������� ������������������  selector

Page 36: 8주  dom & event basic

DOM을����������� ������������������  탐색하는����������� ������������������  또����������� ������������������  다른����������� ������������������  방법,����������� ������������������  

CSS����������� ������������������  Selector����������� ������������������  를����������� ������������������  활용한����������� ������������������  막강한����������� ������������������  방법

id,tagname으로만����������� ������������������  DOM을����������� ������������������  탐색하였지만,����������� ������������������  

CSS����������� ������������������  Selector를����������� ������������������  기반으로����������� ������������������  찾는����������� ������������������  것이����������� ������������������  알려지면서����������� ������������������  웹표준으로����������� ������������������  반영����������� ������������������  되었음.

Page 37: 8주  dom & event basic

CSS����������� ������������������  Selector

document.querySelector(Selector 문법);

document.querySelectorAll(Selector 문법);

일치하는����������� ������������������  첫번째����������� ������������������  element

일치하는����������� ������������������  모든����������� ������������������  element

Page 38: 8주  dom & event basic

CSS����������� ������������������  Selector����������� ������������������  문법

http://www.w3.org/TR/CSS2/selector.html

http://www.w3schools.com/cssref/css_selectors.asp

Page 39: 8주  dom & event basic

id검색이����������� ������������������  비교적����������� ������������������  빠름으로,����������� ������������������  ����������� ������������������  

이렇게����������� ������������������  사용하는����������� ������������������  것이����������� ������������������  이상적

document.getElementById(‘wrap’).querySelector(‘ul>li’);

Page 40: 8주  dom & event basic

숙제2����������� ������������������  

querySelectorAll을����������� ������������������  활용해서����������� ������������������  ����������� ������������������  

class를����������� ������������������  가지고����������� ������������������  있지����������� ������������������  않은����������� ������������������  ����������� ������������������  

모든����������� ������������������  element의����������� ������������������  갯수를����������� ������������������  출력하는����������� ������������������  함수를����������� ������������������  만들어보자.����������� ������������������  

!

Page 41: 8주  dom & event basic

navigating����������� ������������������  ����������� ������������������  

DOM����������� ������������������  Nodes

이미지 : http://www.w3schools.com/dom/dom_nodes_navigate.asp

element만����������� ������������������  찾아주는����������� ������������������  속성도����������� ������������������  있음����������� ������������������  

����������� ������������������  firstElementChild����������� ������������������  

����������� ������������������  lastElementChild����������� ������������������  

����������� ������������������  nextElementSibling����������� ������������������  

����������� ������������������  previousElementSibling����������� ������������������  

Page 42: 8주  dom & event basic

E v e n t 란 ����������� ������������������   무 엇 인 가 ?

Page 43: 8주  dom & event basic

동적인����������� ������������������  웹은����������� ������������������  사용자와����������� ������������������  상호작용이����������� ������������������  잘����������� ������������������  돼야����������� ������������������  함����������� ������������������  

상호작용은����������� ������������������  어떤����������� ������������������  이벤트(Event)에����������� ������������������  의해서����������� ������������������  발생

Page 44: 8주  dom & event basic

이벤트(Event)����������� ������������������  

!

마우스로����������� ������������������  어떤����������� ������������������  걸����������� ������������������  눌렀다.����������� ������������������  

화면을����������� ������������������  이동하려고����������� ������������������  마우스를����������� ������������������  움직인다.����������� ������������������  

뭔가����������� ������������������  입력하려고����������� ������������������  키보드를����������� ������������������  누른다.����������� ������������������  

....

Page 45: 8주  dom & event basic

Event가����������� ������������������  발생하면����������� ������������������  예약해둔����������� ������������������  것이����������� ������������������  실행����������� ������������������  됨.����������� ������������������  !

event����������� ������������������  handler����������� ������������������  또는����������� ������������������  event����������� ������������������  listener����������� ������������������  라고����������� ������������������  함

Page 46: 8주  dom & event basic

event는����������� ������������������  사용자의����������� ������������������  조작과정에서����������� ������������������  다양한����������� ������������������  형태로����������� ������������������  발생����������� ������������������  !

브라우저����������� ������������������  화면이����������� ������������������  다����������� ������������������  보여지고����������� ������������������  나서(로딩후)����������� ������������������  

마우스가����������� ������������������  클릭,이동����������� ������������������  될����������� ������������������  때,����������� ������������������  

키보드를����������� ������������������  눌렀을����������� ������������������  때����������� ������������������  

어떤����������� ������������������  값을����������� ������������������  입력����������� ������������������  할����������� ������������������  때,����������� ������������������  

손가락으로����������� ������������������  터치����������� ������������������  할����������� ������������������  때,����������� ������������������  

휴대폰을����������� ������������������  가로모드로����������� ������������������  변경����������� ������������������  할����������� ������������������  때,

Page 47: 8주  dom & event basic

event가����������� ������������������  발생하면����������� ������������������  다양한����������� ������������������  event����������� ������������������  정보를����������� ������������������  알����������� ������������������  수����������� ������������������  있음����������� ������������������  !

눌려진����������� ������������������  위치가����������� ������������������  어디인지����������� ������������������  ?����������� ������������������  

어떤����������� ������������������  element����������� ������������������  인지?����������� ������������������  ����������� ������������������  

어떤����������� ������������������  글자가����������� ������������������  쓰여졌는지����������� ������������������  ?����������� ������������������  

어떤����������� ������������������  버튼을����������� ������������������  눌렀는지����������� ������������������  ?

Page 48: 8주  dom & event basic

E v e n t ����������� ������������������   설 정

Page 49: 8주  dom & event basic

크게,����������� ������������������  !

HTML에����������� ������������������  직접����������� ������������������  만들거나,����������� ������������������  

Javascript로����������� ������������������  접근해서����������� ������������������  만들거냐의����������� ������������������  차이.

Page 50: 8주  dom & event basic

<div onclick='alert(1);'>click</div>

HTML에����������� ������������������  직접����������� ������������������  만들거나,

Page 51: 8주  dom & event basic

HTML에����������� ������������������  직접����������� ������������������  만들거나,

<script> function clickTest() { alert('click'); }</script>

<div onclick='clickTest();'>click</div>

����������� ������������������  Javascript

����������� ������������������  HTML

Page 52: 8주  dom & event basic

HTML에����������� ������������������  직접����������� ������������������  만들거나,

<div onclick='clickTest();'>click</div>

html����������� ������������������  코드����������� ������������������  안에����������� ������������������  Javascript����������� ������������������  라니...분리하는����������� ������������������  게����������� ������������������  좋다.����������� ������������������  

(구조,스타일,동작의����������� ������������������  분리)����������� ������������������  

따라서����������� ������������������  HTML에����������� ������������������  Event를����������� ������������������  등록하는����������� ������������������  건����������� ������������������  좋지����������� ������������������  않다.

Page 53: 8주  dom & event basic

Javascript로����������� ������������������  접근해서����������� ������������������  만들거나.

var eleMain = document.getElementById('main');eleMain.onclick = function() {alert(1);}

����������� ������������������  Javascript

����������� ������������������  HTML

<div id="main">click</div>

Page 54: 8주  dom & event basic

<html><head> <script> var eleMain = document.getElementById('main'); eleMain.onclick = function() {alert(1);}! </script></head><body>!<div onclick='alert(1);'>click</div><div id="main">click</div>!</body></html>

����������� ������������������  ����������� ������������������  이시점에는����������� ������������������  아직����������� ������������������  브라우저에서����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  document����������� ������������������  의����������� ������������������  형태를����������� ������������������  다����������� ������������������  만들지����������� ������������������  못했음

Javascript로����������� ������������������  접근해서����������� ������������������  만드는데����������� ������������������  문제...

Page 55: 8주  dom & event basic

HTML맨����������� ������������������  마지막����������� ������������������  부분에����������� ������������������  추가하거나,����������� ������������������  

브라우저가����������� ������������������  완성됐다고����������� ������������������  알려주는����������� ������������������  정보를����������� ������������������  활용����������� ������������������  하면����������� ������������������  됨

가장����������� ������������������  적절한����������� ������������������  Javascript����������� ������������������  코드의����������� ������������������  위치는����������� ������������������  어디인가요?

Page 56: 8주  dom & event basic

<html><head></head><body>!<div onclick='alert(1);'>click</div><div id="main">click</div>……………!<script> var eleMain = document.getElementById('main'); eleMain.onclick = function() {alert(1);}</script></body></html>

그래서����������� ������������������  DOM����������� ������������������  이����������� ������������������  완성되기����������� ������������������  직전인����������� ������������������  부분으로����������� ������������������  옮기기

Page 57: 8주  dom & event basic

이벤트����������� ������������������  핸들러����������� ������������������  함수를����������� ������������������  분리하고,

function alertTest() { alert(1); }!var eleMain = document.getElementById('main');eleMain.onclick = alertTest;

var eleMain = document.getElementById(‘main');eleMain.onclick = function() {alert(1);}

Page 58: 8주  dom & event basic

하지만����������� ������������������  이렇게����������� ������������������  하면,����������� ������������������  ����������� ������������������  

여러����������� ������������������  개의����������� ������������������  event����������� ������������������  Handler를����������� ������������������  등록할����������� ������������������  수����������� ������������������  없다..

//����������� ������������������  실행����������� ������������������  안됨

function clickTest1() { alert(1);}!function clickTest2() { alert(2);}!document.getElementById('divEle').onclick = clickTest1;document.getElementById('divEle').onclick = clickTest2;

Page 59: 8주  dom & event basic

최종적으로����������� ������������������  우리가����������� ������������������  사용할����������� ������������������  방법

document.addEventListener(이벤트 , 핸들러 , false)

Page 60: 8주  dom & event basic

addEventListener����������� ������������������  사용법

document.addEventListener(‘click’ , function(){alert(1)} , false)

function alertTest() { alert(1); }!document.addEventListener(‘click’ , alertTest , false)

Page 61: 8주  dom & event basic

숙제3

자신의����������� ������������������  프로젝트에����������� ������������������  ����������� ������������������  

addEventListener를����������� ������������������  활용해서����������� ������������������  onload����������� ������������������  시점에����������� ������������������  ����������� ������������������  

header����������� ������������������  영역을����������� ������������������  마우스클릭할����������� ������������������  때����������� ������������������  콘솔창에����������� ������������������  ‘header영역입니다’����������� ������������������  

라는����������� ������������������  메시지가����������� ������������������  출력되게����������� ������������������  해보자.����������� ������������������  

!

!

hint.����������� ������������������  window.addEventListener(‘load’����������� ������������������  ,����������� ������������������  function()����������� ������������������  {����������� ������������������  

����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ....... ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  },false);

Page 62: 8주  dom & event basic

Event는����������� ������������������  특정이유로����������� ������������������  인해서����������� ������������������  해제할����������� ������������������  수도����������� ������������������  있다

등록����������� ������������������  

element.onclick = alertTest;document.addEventListener(‘click’ , handlerFunction , false)

해제����������� ������������������  

element.onclick = null;document.removeEventListener(‘click’ , handlerFunction , false)

Page 63: 8주  dom & event basic

E v e n t ����������� ������������������   타 입

Page 64: 8주  dom & event basic

Event가..����������� ������������������  

click����������� ������������������  뿐이더냐?

https://developer.mozilla.org/en-US/docs/Web/Reference/Events

Page 65: 8주  dom & event basic

load����������� ������������������  ����������� ������������������  resize����������� ������������������  !click����������� ������������������  dbclick����������� ������������������  mousedown,����������� ������������������  mouseup,����������� ������������������  ����������� ������������������  mouseover,����������� ������������������  mousemove,����������� ������������������  mouseout����������� ������������������  !keydown����������� ������������������  keyup����������� ������������������  keypress

!

!

일반����������� ������������������  UI����������� ������������������  Event����������� ������������������  

!

!

마우스����������� ������������������  

!

!

!

키보드

그����������� ������������������  중����������� ������������������  자주����������� ������������������  사용되는����������� ������������������  것들은,����������� ������������������  

Page 66: 8주  dom & event basic

shiftKey����������� ������������������  ����������� ������������������  ����������� ������������������  

ctrlKey����������� ������������������  

altKey����������� ������������������  

metaKey

shiftKey를����������� ������������������  누르고����������� ������������������  마우스����������� ������������������  클릭을����������� ������������������  해보자.����������� ������������������  

Page 67: 8주  dom & event basic

event����������� ������������������  어디에����������� ������������������  눌러졌는가����������� ������������������  ?����������� ������������������  

e.offsetX,����������� ������������������  e.offsetY

이벤트����������� ������������������  발생����������� ������������������  element����������� ������������������  

의����������� ������������������  좌/우축����������� ������������������  기준으로����������� ������������������  정보가����������� ������������������  나옴

Page 68: 8주  dom & event basic

event����������� ������������������  어디에����������� ������������������  눌러졌는가����������� ������������������  ?����������� ������������������  

그밖에도..����������� ������������������  

!

clientX,����������� ������������������  clientY����������� ������������������  

pageX,����������� ������������������  pageY����������� ������������������  

screenX,����������� ������������������  screenY

Page 69: 8주  dom & event basic
Page 70: 8주  dom & event basic

clientY

Page 71: 8주  dom & event basic

screenYpageY

clientY

Page 72: 8주  dom & event basic

keyCode����������� ������������������  keydown,����������� ������������������  keyup,����������� ������������������  keypress����������� ������������������  이벤트에서����������� ������������������  발생

http://unixpapa.com/js/key.html

Page 73: 8주  dom & event basic

mousedown,����������� ������������������  mouseup,����������� ������������������  mouseclick����������� ������������������  이벤트를����������� ������������������  모두����������� ������������������  등록해보자.����������� ������������������  

무엇부터����������� ������������������  실행되는가?����������� ������������������  ����������� ������������������  ����������� ������������������  

!

!

문자를����������� ������������������  입력할����������� ������������������  수����������� ������������������  있는����������� ������������������  input����������� ������������������  박스����������� ������������������  하나����������� ������������������  만들고,����������� ������������������  ����������� ������������������  

keydown����������� ������������������  이벤트����������� ������������������  핸들러����������� ������������������  입력해서����������� ������������������  keycode를����������� ������������������  출력해보자.����������� ������������������  

console.log(String.fromCharCode(e.keyCode));

Page 74: 8주  dom & event basic

E v e n t ����������� ������������������   객 체 활 용

Page 75: 8주  dom & event basic

사용자가����������� ������������������  어떤����������� ������������������  걸����������� ������������������  click했을때,����������� ������������������  

뭐가����������� ������������������  클릭됐는지?����������� ������������������  어디가����������� ������������������  클릭됐는지?����������� ������������������  는����������� ������������������  어떻게����������� ������������������  알����������� ������������������  수����������� ������������������  있지?����������� ������������������  

Page 76: 8주  dom & event basic

다행이도����������� ������������������  ����������� ������������������  

우리는����������� ������������������  event����������� ������������������  객체를����������� ������������������  활용할����������� ������������������  수����������� ������������������  있음.

event����������� ������������������  객체����������� ������������������  ?

Page 77: 8주  dom & event basic

����������� ������������������  그렇다����������� ������������������  !!����������� ������������������  

����������� ������������������  Event����������� ������������������  는����������� ������������������  객체였고����������� ������������������  그����������� ������������������  안에����������� ������������������  꽤����������� ������������������  많은����������� ������������������  속성이����������� ������������������  존재한다����������� ������������������  

Page 78: 8주  dom & event basic

document.addEventListener(‘click’ , function(){} , false)

document.addEventListener(‘click’ , function(e){} , false)

document.addEventListener(‘click’ , function(ev){debugger;} , false)

인자로����������� ������������������  매개변수를����������� ������������������  아무거나����������� ������������������  선언하면����������� ������������������  event객체가����������� ������������������  들어감����������� ������������������  (매개변수����������� ������������������  이름은����������� ������������������  ‘e’가����������� ������������������  아니여도����������� ������������������  됨)

Page 79: 8주  dom & event basic
Page 80: 8주  dom & event basic

document.addEventListener(‘click’ , function(e){console.log(e.target);}, false)

e.

document.addEventListener(‘click’ , function(e){console.log(e.target , e.type , e.clientX);}, false)

Page 81: 8주  dom & event basic
Page 82: 8주  dom & event basic

document.addEventListener(‘click’ , function(e){console.log(e.target.tagName);}, false)

e.target

document.addEventListener(‘click’ , function(e){console.log(e.target.className);e.target.style.backgroudColor = ‘red’;}, false)

Page 83: 8주  dom & event basic

function otherFunction() { console.log(“other Function Called”); }!!document.addEventListener(‘click’ , function(e){

otherFunction();}, false)

물론,����������� ������������������  ����������� ������������������  

event����������� ������������������  handler����������� ������������������  안에서는����������� ������������������  다른����������� ������������������  함수를����������� ������������������  호출할����������� ������������������  수도����������� ������������������  있다.����������� ������������������  그외에����������� ������������������  javascript����������� ������������������  로����������� ������������������  할����������� ������������������  수����������� ������������������  있는����������� ������������������  걸����������� ������������������  다����������� ������������������  할����������� ������������������  수����������� ������������������  있다.

Page 84: 8주  dom & event basic

미션

자신의����������� ������������������  프로젝트에����������� ������������������  click����������� ������������������  이벤트를����������� ������������������  등록하고����������� ������������������  특정����������� ������������������  layer의����������� ������������������  css����������� ������������������  style����������� ������������������  중����������� ������������������  display속성이,����������� ������������������  

block이면����������� ������������������  ‘none’으로����������� ������������������  변경하고,����������� ������������������  

block이����������� ������������������  아니면����������� ������������������  ‘block’으로����������� ������������������  변경하도록����������� ������������������  해보자.����������� ������������������  

!

참고.����������� ������������������  display속성은����������� ������������������  default가����������� ������������������  block이다.����������� ������������������  

css����������� ������������������  속성값을����������� ������������������  얻기����������� ������������������  위해서����������� ������������������  getComputedStyle����������� ������������������  메소드를����������� ������������������  활용한다.

oStyleInfo = document.defaultView.getComputedStyle(e.target);

Page 85: 8주  dom & event basic

http://6opinions.blogspot.kr

s t y l e ����������� ������������������   조 작

Page 86: 8주  dom & event basic

element에는����������� ������������������  style����������� ������������������  속성이����������� ������������������  있을����������� ������������������  수����������� ������������������  있다����������� ������������������  !

style속성을����������� ������������������  얻고����������� ������������������  변경할����������� ������������������  수����������� ������������������  있어야����������� ������������������  한다.����������� ������������������  !

����������� ������������������  

Page 87: 8주  dom & event basic

inline태그의����������� ������������������  style속성을����������� ������������������  얻고,����������� ������������������  설정하는����������� ������������������  방법

element.style.backgroundColor;

element.style.backgroundColor = ‘#fff’;

Page 88: 8주  dom & event basic

계산된����������� ������������������  style����������� ������������������  속성을����������� ������������������  얻는����������� ������������������  방법document.defaultView.getComputedStyle(element)

var element = document.getElementById(‘divId’);var styleInfo = document.defaultView.getComputedStyle(element);console.log(styleInfo.color);!styleInfo.color = ‘red’ //(X) 값을 할당할 수는 없다. (읽기만 가능함)!!//자바스크립트로 스타일 설정이 필요하면 이렇게 함.element.style.color = ‘red’;

Page 89: 8주  dom & event basic

End ;-D