Upload
-
View
390
Download
1
Embed Size (px)
Citation preview
DOM����������� ������������������ &����������� ������������������ Event����������� ������������������ BASIC
8주
목표
HTML����������� ������������������ 을����������� ������������������ 동적으로����������� ������������������ 조작할����������� ������������������ 수����������� ������������������ 있다
U I ����������� ������������������ 개 발 에 서 의 ����������� ������������������
D O M ����������� ������������������ & ����������� ������������������ E v e n t
어느����������� ������������������ 영역에서,����������� ������������������
키보드����������� ������������������ 입력을����������� ������������������ 하면,����������� ������������������ ����������� ������������������
어떤����������� ������������������ 일이����������� ������������������ 일어난다.
어느����������� ������������������ 영역에서,����������� ������������������
키보드����������� ������������������ 입력을����������� ������������������ 하면,����������� ������������������ ����������� ������������������
어떤����������� ������������������ 일이����������� ������������������ 일어난다.
어느����������� ������������������ 영역에서,����������� ������������������
키보드����������� ������������������ 입력을����������� ������������������ 하면,����������� ������������������ ����������� ������������������
어떤����������� ������������������ 일이����������� ������������������ 일어난다.
DOM����������� ������������������ API로����������� ������������������ 찾기
어느����������� ������������������ 영역에서,����������� ������������������
키보드����������� ������������������ 입력을����������� ������������������ 하면,����������� ������������������ ����������� ������������������
어떤����������� ������������������ 일이����������� ������������������ 일어난다.
어느����������� ������������������ 영역에서,����������� ������������������
키보드����������� ������������������ 입력을����������� ������������������ 하면,����������� ������������������ ����������� ������������������
어떤����������� ������������������ 일이����������� ������������������ 일어난다.
이벤트����������� ������������������ 등록
어느����������� ������������������ 영역에서,����������� ������������������
키보드����������� ������������������ 입력을����������� ������������������ 하면,����������� ������������������ ����������� ������������������
어떤����������� ������������������ 일이����������� ������������������ 일어난다.
어느����������� ������������������ 영역에서,����������� ������������������
키보드����������� ������������������ 입력을����������� ������������������ 하면,����������� ������������������ ����������� ������������������
어떤����������� ������������������ 일이����������� ������������������ 일어난다. 이벤트����������� ������������������ 핸들러����������� ������������������ 실행
어느����������� ������������������ 영역에서,����������� ������������������
키보드����������� ������������������ 입력을����������� ������������������ 하면,����������� ������������������ ����������� ������������������
어떤����������� ������������������ 일이����������� ������������������ 일어난다. 이벤트����������� ������������������ 핸들러����������� ������������������ 실행
이벤트����������� ������������������ 등록
DOM����������� ������������������ API로����������� ������������������ 찾기
D O M 은 ����������� ������������������ 무 엇 인 가 ? ����������� ������������������
DOM(Document����������� ������������������ Object����������� ������������������ Model)은����������� ������������������ ,����������� ������������������ !
HTML을����������� ������������������ 위한����������� ������������������ API이며,����������� ������������������ HTML을����������� ������������������ 탐색할����������� ������������������ 수����������� ������������������ 있고,����������� ������������������ HTML구조를����������� ������������������ 바꿀����������� ������������������ 수도����������� ������������������ 있다.����������� ������������������ !
����������� ������������������
<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의����������� ������������������ 계층����������� ������������������ 구조로����������� ������������������ 표현����������� ������������������ 가능����������� ������������������ ����������� ������������������
����������� ������������������ 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>
����������� ������������������ 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
각자의����������� ������������������ 프로젝트에서����������� ������������������ 살펴보기����������� ������������������ 개발자도구����������� ������������������ -����������� ������������������ Elements����������� ������������������ 탭����������� ������������������ 선택����������� ������������������ -����������� ������������������ 맨����������� ������������������ 하단에����������� ������������������ 계층살펴보기����������� ������������������
Node����������� ������������������ 에는����������� ������������������ 속성이����������� ������������������ 존재함.����������� ������������������ ����������� ������������������
!
nodeType����������� ������������������ ����������� ������������������
nodeName����������� ������������������ ����������� ������������������
nodeValue����������� ������������������
nodeType은����������� ������������������ 숫자로����������� ������������������ 표현가능.����������� ������������������
html����������� ������������������ 작업중에는����������� ������������������ 1번����������� ������������������ element와����������� ������������������ 3번����������� ������������������ text노드만����������� ������������������ 참고함.����������� ������������������
!
!
Element����������� ������������������ ����������� ������������������ :����������� ������������������ 1����������� ������������������
Attribute����������� ������������������ ����������� ������������������ :����������� ������������������ 2����������� ������������������
TEXT����������� ������������������ ����������� ������������������ ����������� ������������������ :����������� ������������������ 3...����������� ������������������
각자의����������� ������������������ 프로젝트에서����������� ������������������ 살펴보기����������� ������������������ 개발자도구����������� ������������������ 우측의����������� ������������������ properties����������� ������������������ 항목
다른����������� ������������������ 부분도����������� ������������������ 살펴보자.����������� ������������������ ����������� ������������������ 꽤����������� ������������������ 다양한����������� ������������������ 속성들이����������� ������������������ 많다.����������� ������������������
Node����������� ������������������ 에는����������� ������������������ 자식노드를����������� ������������������ 모두����������� ������������������ 담고����������� ������������������ 있는����������� ������������������ childNodes가����������� ������������������ 있다.����������� ������������������
이것은����������� ������������������ NodeList����������� ������������������ Type이며����������� ������������������ 배열과����������� ������������������ 유사하지만����������� ������������������ 배열이����������� ������������������ 아니다.����������� ������������������
!
!
childNodes;����������� ������������������
childNodes.length;����������� ������������������
childNodes[0];����������� ������������������
각자의����������� ������������������ 프로젝트에서����������� ������������������ 살펴보기����������� ������������������ body태그의����������� ������������������ 이름은?����������� ������������������ ,����������� ������������������ ����������� ������������������ ����������� ������������������ Node의����������� ������������������ type����������� ������������������ 은?����������� ������������������ ����������� ������������������ ,����������� ������������������ ����������� ������������������ ����������� ������������������ 자식����������� ������������������ 노드의����������� ������������������ 갯수는?����������� ������������������ ����������� ������������������
!이번에는����������� ������������������ Console탭에서����������� ������������������ 하기.
document.body.nodeName;
document.body.nodeType;
document.body.childNodes;
document.body.childNodes.length;
D O M ����������� ������������������ 탐 색 ����������� ������������������
원하는����������� ������������������ 영역����������� ������������������ 쉽게����������� ������������������ 찾는����������� ������������������ 방법은?
원하는����������� ������������������ 영역을����������� ������������������ 보자.
<div id="image_promotion" class="cmn_promotion_image" style=“display:none”>!
<div id="image_promotion" class="cmn_promotion_image" style=“display:none”>!
원하는����������� ������������������ 영역을����������� ������������������ 보자.
<div id="image_promotion" class="cmn_promotion_image" style=“display:none”>!
우리가����������� ������������������ 활용할����������� ������������������ 수����������� ������������������ 있는����������� ������������������ 정보들����������� ������������������ !
tag(nodename),����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ id,����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ class
document.getElementById(‘wrap’)ID로����������� ������������������ 찾기����������� ������������������ (성능이����������� ������������������ 좋다.����������� ������������������ 다시말해����������� ������������������ 빠르게����������� ������������������ 찾는����������� ������������������ 좋은����������� ������������������ 방법)
document.getElementById(‘wrap’)ID로����������� ������������������ 찾기����������� ������������������ (성능이����������� ������������������ 좋다.����������� ������������������ 다시말해����������� ������������������ 빠르게����������� ������������������ 찾는����������� ������������������ 좋은����������� ������������������ 방법)
document.getElementsByTagName(‘div’)tag로����������� ������������������ 찾기
document.getElementById(‘wrap’)ID로����������� ������������������ 찾기����������� ������������������ (성능이����������� ������������������ 좋다.����������� ������������������ 다시말해����������� ������������������ 빠르게����������� ������������������ 찾는����������� ������������������ 좋은����������� ������������������ 방법)
document.getElementsByTagName(‘div’)tag로����������� ������������������ 찾기
document.getElementsByClassName(‘on’)className����������� ������������������ 으로����������� ������������������ 찾기
document.getElementById(‘wrap’)document.getElementsByTagName(‘div’)document.getElementsByClassName(‘on’)
return����������� ������������������ type����������� ������������������ ����������� ������������������ ?
document.getElementById(‘wrap’)
document.getElementsByTagName(‘div’)document.getElementsByClassName(‘on’)return����������� ������������������ type����������� ������������������ :����������� ������������������ nodeList
return����������� ������������������ type����������� ������������������ :����������� ������������������ ����������� ������������������ HTMLElement
숙제1����������� ������������������
본인����������� ������������������ 프로젝트에서����������� ������������������ ����������� ������������������
document내에����������� ������������������ 모든����������� ������������������ ‘li’태그를����������� ������������������ 찾아서����������� ������������������ class이름을����������� ������������������ 출력하는����������� ������������������ 함수를����������� ������������������ 만들자.����������� ������������������
!����������� ������������������ 힌트����������� ������������������ :����������� ������������������ attribute(속성)에����������� ������������������ 접근하는����������� ������������������ 방법.����������� ������������������
element.id����������� ������������������ 및����������� ������������������ element.className����������� ������������������ 을����������� ������������������ 활용해서����������� ������������������ 접근����������� ������������������ 가능
D O M ����������� ������������������ 탐 색 ����������� ������������������
css����������� ������������������ selector
DOM을����������� ������������������ 탐색하는����������� ������������������ 또����������� ������������������ 다른����������� ������������������ 방법,����������� ������������������
CSS����������� ������������������ Selector����������� ������������������ 를����������� ������������������ 활용한����������� ������������������ 막강한����������� ������������������ 방법
id,tagname으로만����������� ������������������ DOM을����������� ������������������ 탐색하였지만,����������� ������������������
CSS����������� ������������������ Selector를����������� ������������������ 기반으로����������� ������������������ 찾는����������� ������������������ 것이����������� ������������������ 알려지면서����������� ������������������ 웹표준으로����������� ������������������ 반영����������� ������������������ 되었음.
CSS����������� ������������������ Selector
document.querySelector(Selector 문법);
document.querySelectorAll(Selector 문법);
일치하는����������� ������������������ 첫번째����������� ������������������ element
일치하는����������� ������������������ 모든����������� ������������������ element
CSS����������� ������������������ Selector����������� ������������������ 문법
http://www.w3.org/TR/CSS2/selector.html
http://www.w3schools.com/cssref/css_selectors.asp
id검색이����������� ������������������ 비교적����������� ������������������ 빠름으로,����������� ������������������ ����������� ������������������
이렇게����������� ������������������ 사용하는����������� ������������������ 것이����������� ������������������ 이상적
document.getElementById(‘wrap’).querySelector(‘ul>li’);
숙제2����������� ������������������
querySelectorAll을����������� ������������������ 활용해서����������� ������������������ ����������� ������������������
class를����������� ������������������ 가지고����������� ������������������ 있지����������� ������������������ 않은����������� ������������������ ����������� ������������������
모든����������� ������������������ element의����������� ������������������ 갯수를����������� ������������������ 출력하는����������� ������������������ 함수를����������� ������������������ 만들어보자.����������� ������������������
!
navigating����������� ������������������ ����������� ������������������
DOM����������� ������������������ Nodes
이미지 : http://www.w3schools.com/dom/dom_nodes_navigate.asp
element만����������� ������������������ 찾아주는����������� ������������������ 속성도����������� ������������������ 있음����������� ������������������
����������� ������������������ firstElementChild����������� ������������������
����������� ������������������ lastElementChild����������� ������������������
����������� ������������������ nextElementSibling����������� ������������������
����������� ������������������ previousElementSibling����������� ������������������
E v e n t 란 ����������� ������������������ 무 엇 인 가 ?
동적인����������� ������������������ 웹은����������� ������������������ 사용자와����������� ������������������ 상호작용이����������� ������������������ 잘����������� ������������������ 돼야����������� ������������������ 함����������� ������������������
상호작용은����������� ������������������ 어떤����������� ������������������ 이벤트(Event)에����������� ������������������ 의해서����������� ������������������ 발생
이벤트(Event)����������� ������������������
!
마우스로����������� ������������������ 어떤����������� ������������������ 걸����������� ������������������ 눌렀다.����������� ������������������
화면을����������� ������������������ 이동하려고����������� ������������������ 마우스를����������� ������������������ 움직인다.����������� ������������������
뭔가����������� ������������������ 입력하려고����������� ������������������ 키보드를����������� ������������������ 누른다.����������� ������������������
....
Event가����������� ������������������ 발생하면����������� ������������������ 예약해둔����������� ������������������ 것이����������� ������������������ 실행����������� ������������������ 됨.����������� ������������������ !
event����������� ������������������ handler����������� ������������������ 또는����������� ������������������ event����������� ������������������ listener����������� ������������������ 라고����������� ������������������ 함
event는����������� ������������������ 사용자의����������� ������������������ 조작과정에서����������� ������������������ 다양한����������� ������������������ 형태로����������� ������������������ 발생����������� ������������������ !
브라우저����������� ������������������ 화면이����������� ������������������ 다����������� ������������������ 보여지고����������� ������������������ 나서(로딩후)����������� ������������������
마우스가����������� ������������������ 클릭,이동����������� ������������������ 될����������� ������������������ 때,����������� ������������������
키보드를����������� ������������������ 눌렀을����������� ������������������ 때����������� ������������������
어떤����������� ������������������ 값을����������� ������������������ 입력����������� ������������������ 할����������� ������������������ 때,����������� ������������������
손가락으로����������� ������������������ 터치����������� ������������������ 할����������� ������������������ 때,����������� ������������������
휴대폰을����������� ������������������ 가로모드로����������� ������������������ 변경����������� ������������������ 할����������� ������������������ 때,
event가����������� ������������������ 발생하면����������� ������������������ 다양한����������� ������������������ event����������� ������������������ 정보를����������� ������������������ 알����������� ������������������ 수����������� ������������������ 있음����������� ������������������ !
눌려진����������� ������������������ 위치가����������� ������������������ 어디인지����������� ������������������ ?����������� ������������������
어떤����������� ������������������ element����������� ������������������ 인지?����������� ������������������ ����������� ������������������
어떤����������� ������������������ 글자가����������� ������������������ 쓰여졌는지����������� ������������������ ?����������� ������������������
어떤����������� ������������������ 버튼을����������� ������������������ 눌렀는지����������� ������������������ ?
E v e n t ����������� ������������������ 설 정
크게,����������� ������������������ !
HTML에����������� ������������������ 직접����������� ������������������ 만들거나,����������� ������������������
Javascript로����������� ������������������ 접근해서����������� ������������������ 만들거냐의����������� ������������������ 차이.
<div onclick='alert(1);'>click</div>
HTML에����������� ������������������ 직접����������� ������������������ 만들거나,
HTML에����������� ������������������ 직접����������� ������������������ 만들거나,
<script> function clickTest() { alert('click'); }</script>
<div onclick='clickTest();'>click</div>
����������� ������������������ Javascript
����������� ������������������ HTML
HTML에����������� ������������������ 직접����������� ������������������ 만들거나,
<div onclick='clickTest();'>click</div>
html����������� ������������������ 코드����������� ������������������ 안에����������� ������������������ Javascript����������� ������������������ 라니...분리하는����������� ������������������ 게����������� ������������������ 좋다.����������� ������������������
(구조,스타일,동작의����������� ������������������ 분리)����������� ������������������
따라서����������� ������������������ HTML에����������� ������������������ Event를����������� ������������������ 등록하는����������� ������������������ 건����������� ������������������ 좋지����������� ������������������ 않다.
Javascript로����������� ������������������ 접근해서����������� ������������������ 만들거나.
var eleMain = document.getElementById('main');eleMain.onclick = function() {alert(1);}
����������� ������������������ Javascript
����������� ������������������ HTML
<div id="main">click</div>
<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로����������� ������������������ 접근해서����������� ������������������ 만드는데����������� ������������������ 문제...
HTML맨����������� ������������������ 마지막����������� ������������������ 부분에����������� ������������������ 추가하거나,����������� ������������������
브라우저가����������� ������������������ 완성됐다고����������� ������������������ 알려주는����������� ������������������ 정보를����������� ������������������ 활용����������� ������������������ 하면����������� ������������������ 됨
가장����������� ������������������ 적절한����������� ������������������ Javascript����������� ������������������ 코드의����������� ������������������ 위치는����������� ������������������ 어디인가요?
<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����������� ������������������ 이����������� ������������������ 완성되기����������� ������������������ 직전인����������� ������������������ 부분으로����������� ������������������ 옮기기
이벤트����������� ������������������ 핸들러����������� ������������������ 함수를����������� ������������������ 분리하고,
function alertTest() { alert(1); }!var eleMain = document.getElementById('main');eleMain.onclick = alertTest;
var eleMain = document.getElementById(‘main');eleMain.onclick = function() {alert(1);}
하지만����������� ������������������ 이렇게����������� ������������������ 하면,����������� ������������������ ����������� ������������������
여러����������� ������������������ 개의����������� ������������������ event����������� ������������������ Handler를����������� ������������������ 등록할����������� ������������������ 수����������� ������������������ 없다..
//����������� ������������������ 실행����������� ������������������ 안됨
function clickTest1() { alert(1);}!function clickTest2() { alert(2);}!document.getElementById('divEle').onclick = clickTest1;document.getElementById('divEle').onclick = clickTest2;
최종적으로����������� ������������������ 우리가����������� ������������������ 사용할����������� ������������������ 방법
document.addEventListener(이벤트 , 핸들러 , false)
addEventListener����������� ������������������ 사용법
document.addEventListener(‘click’ , function(){alert(1)} , false)
function alertTest() { alert(1); }!document.addEventListener(‘click’ , alertTest , false)
숙제3
자신의����������� ������������������ 프로젝트에����������� ������������������ ����������� ������������������
addEventListener를����������� ������������������ 활용해서����������� ������������������ onload����������� ������������������ 시점에����������� ������������������ ����������� ������������������
header����������� ������������������ 영역을����������� ������������������ 마우스클릭할����������� ������������������ 때����������� ������������������ 콘솔창에����������� ������������������ ‘header영역입니다’����������� ������������������
라는����������� ������������������ 메시지가����������� ������������������ 출력되게����������� ������������������ 해보자.����������� ������������������
!
!
hint.����������� ������������������ window.addEventListener(‘load’����������� ������������������ ,����������� ������������������ function()����������� ������������������ {����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ....... ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ },false);
Event는����������� ������������������ 특정이유로����������� ������������������ 인해서����������� ������������������ 해제할����������� ������������������ 수도����������� ������������������ 있다
등록����������� ������������������
element.onclick = alertTest;document.addEventListener(‘click’ , handlerFunction , false)
해제����������� ������������������
element.onclick = null;document.removeEventListener(‘click’ , handlerFunction , false)
E v e n t ����������� ������������������ 타 입
Event가..����������� ������������������
click����������� ������������������ 뿐이더냐?
https://developer.mozilla.org/en-US/docs/Web/Reference/Events
load����������� ������������������ ����������� ������������������ resize����������� ������������������ !click����������� ������������������ dbclick����������� ������������������ mousedown,����������� ������������������ mouseup,����������� ������������������ ����������� ������������������ mouseover,����������� ������������������ mousemove,����������� ������������������ mouseout����������� ������������������ !keydown����������� ������������������ keyup����������� ������������������ keypress
!
!
일반����������� ������������������ UI����������� ������������������ Event����������� ������������������
!
!
마우스����������� ������������������
!
!
!
키보드
그����������� ������������������ 중����������� ������������������ 자주����������� ������������������ 사용되는����������� ������������������ 것들은,����������� ������������������
shiftKey����������� ������������������ ����������� ������������������ ����������� ������������������
ctrlKey����������� ������������������
altKey����������� ������������������
metaKey
shiftKey를����������� ������������������ 누르고����������� ������������������ 마우스����������� ������������������ 클릭을����������� ������������������ 해보자.����������� ������������������
event����������� ������������������ 어디에����������� ������������������ 눌러졌는가����������� ������������������ ?����������� ������������������
e.offsetX,����������� ������������������ e.offsetY
이벤트����������� ������������������ 발생����������� ������������������ element����������� ������������������
의����������� ������������������ 좌/우축����������� ������������������ 기준으로����������� ������������������ 정보가����������� ������������������ 나옴
event����������� ������������������ 어디에����������� ������������������ 눌러졌는가����������� ������������������ ?����������� ������������������
그밖에도..����������� ������������������
!
clientX,����������� ������������������ clientY����������� ������������������
pageX,����������� ������������������ pageY����������� ������������������
screenX,����������� ������������������ screenY
clientY
screenYpageY
clientY
keyCode����������� ������������������ keydown,����������� ������������������ keyup,����������� ������������������ keypress����������� ������������������ 이벤트에서����������� ������������������ 발생
http://unixpapa.com/js/key.html
mousedown,����������� ������������������ mouseup,����������� ������������������ mouseclick����������� ������������������ 이벤트를����������� ������������������ 모두����������� ������������������ 등록해보자.����������� ������������������
무엇부터����������� ������������������ 실행되는가?����������� ������������������ ����������� ������������������ ����������� ������������������
!
!
문자를����������� ������������������ 입력할����������� ������������������ 수����������� ������������������ 있는����������� ������������������ input����������� ������������������ 박스����������� ������������������ 하나����������� ������������������ 만들고,����������� ������������������ ����������� ������������������
keydown����������� ������������������ 이벤트����������� ������������������ 핸들러����������� ������������������ 입력해서����������� ������������������ keycode를����������� ������������������ 출력해보자.����������� ������������������
console.log(String.fromCharCode(e.keyCode));
E v e n t ����������� ������������������ 객 체 활 용
사용자가����������� ������������������ 어떤����������� ������������������ 걸����������� ������������������ click했을때,����������� ������������������
뭐가����������� ������������������ 클릭됐는지?����������� ������������������ 어디가����������� ������������������ 클릭됐는지?����������� ������������������ 는����������� ������������������ 어떻게����������� ������������������ 알����������� ������������������ 수����������� ������������������ 있지?����������� ������������������
다행이도����������� ������������������ ����������� ������������������
우리는����������� ������������������ event����������� ������������������ 객체를����������� ������������������ 활용할����������� ������������������ 수����������� ������������������ 있음.
event����������� ������������������ 객체����������� ������������������ ?
����������� ������������������ 그렇다����������� ������������������ !!����������� ������������������
����������� ������������������ Event����������� ������������������ 는����������� ������������������ 객체였고����������� ������������������ 그����������� ������������������ 안에����������� ������������������ 꽤����������� ������������������ 많은����������� ������������������ 속성이����������� ������������������ 존재한다����������� ������������������
document.addEventListener(‘click’ , function(){} , false)
document.addEventListener(‘click’ , function(e){} , false)
document.addEventListener(‘click’ , function(ev){debugger;} , false)
인자로����������� ������������������ 매개변수를����������� ������������������ 아무거나����������� ������������������ 선언하면����������� ������������������ event객체가����������� ������������������ 들어감����������� ������������������ (매개변수����������� ������������������ 이름은����������� ������������������ ‘e’가����������� ������������������ 아니여도����������� ������������������ 됨)
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)
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)
function otherFunction() { console.log(“other Function Called”); }!!document.addEventListener(‘click’ , function(e){
otherFunction();}, false)
물론,����������� ������������������ ����������� ������������������
event����������� ������������������ handler����������� ������������������ 안에서는����������� ������������������ 다른����������� ������������������ 함수를����������� ������������������ 호출할����������� ������������������ 수도����������� ������������������ 있다.����������� ������������������ 그외에����������� ������������������ javascript����������� ������������������ 로����������� ������������������ 할����������� ������������������ 수����������� ������������������ 있는����������� ������������������ 걸����������� ������������������ 다����������� ������������������ 할����������� ������������������ 수����������� ������������������ 있다.
미션
자신의����������� ������������������ 프로젝트에����������� ������������������ click����������� ������������������ 이벤트를����������� ������������������ 등록하고����������� ������������������ 특정����������� ������������������ layer의����������� ������������������ css����������� ������������������ style����������� ������������������ 중����������� ������������������ display속성이,����������� ������������������
block이면����������� ������������������ ‘none’으로����������� ������������������ 변경하고,����������� ������������������
block이����������� ������������������ 아니면����������� ������������������ ‘block’으로����������� ������������������ 변경하도록����������� ������������������ 해보자.����������� ������������������
!
참고.����������� ������������������ display속성은����������� ������������������ default가����������� ������������������ block이다.����������� ������������������
css����������� ������������������ 속성값을����������� ������������������ 얻기����������� ������������������ 위해서����������� ������������������ getComputedStyle����������� ������������������ 메소드를����������� ������������������ 활용한다.
oStyleInfo = document.defaultView.getComputedStyle(e.target);
http://6opinions.blogspot.kr
s t y l e ����������� ������������������ 조 작
element에는����������� ������������������ style����������� ������������������ 속성이����������� ������������������ 있을����������� ������������������ 수����������� ������������������ 있다����������� ������������������ !
style속성을����������� ������������������ 얻고����������� ������������������ 변경할����������� ������������������ 수����������� ������������������ 있어야����������� ������������������ 한다.����������� ������������������ !
����������� ������������������
inline태그의����������� ������������������ style속성을����������� ������������������ 얻고,����������� ������������������ 설정하는����������� ������������������ 방법
element.style.backgroundColor;
element.style.backgroundColor = ‘#fff’;
계산된����������� ������������������ 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’;
End ;-D