WEB UI 9주

1. Event

2. 고급

3. 목표
Event

4. 를

5. 효율적으로

6. 등록하는

7. 방법을

8. 안다.

9.
특정

10. DOM

11. 위치에

12. node를

13. 추가할

14. 수

15. 있다.

16.
Mobile

17. Web

18. 에서의

19. Event가

20. 무엇이

21. 있고

22. 어떻게

23. 사용하는지

24. 안다.

25. Event

26. delegation으로

28.
효율적으로

29. 이벤트

30. 관리하기

31. 이벤트를

32. 좀더

33. 효율적으로

34. 등록하는

35. 방법을

36. 배웁니다.

37. 두

38. 개의

39. 이벤트

40. 핸들러를

41. 만들고,

42.
P영역을

43. 클릭하면

44. 어떤

45. 핸들러가

46. 실행될까?
div
p
div.addEventListener(handlerDIV)!
p.addEventListener(handleP)

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

48. jsbin을

49. clone하고,

50.
P영역

51. 이벤트

52. 핸들러를

53. 제거해보자.
div
p
div.addEventListener(handlerDIV)!
p.addEventListener(,handleP,)

54. handlerDIV에서

55. e.target으로

56. 클릭

57. 영역

58. 정보를

59. 출력해보자.

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

61. e.currentTarget은

62. 무엇이

63. 출력될까?

64. 각각

65. 이벤트핸들러를

66. 등록하지

67. 만들지

68. 말고,

70.
감싸고

71. 있는

72. 부분에만

73. 이벤트

74. 핸들러를

75. 등록할

76. 수

77. 있지

78. 않을까?

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

80. 비슷한

81. 상황

82. 하나

83. 더.

84.
li

85. 태그를

86. 누를

87. 때

88. 마다

89. 그

90. 안에

91. text내용을

92. 출력하고

93. 싶다면?
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

94. 너무

95. 많은

96. 이벤트

97. 핸들러는

98. 브라우저의

99. 성능에

100. 좋지

101. 않음

102.
메모리사용

103. 증가,

104. 기억해야

105. 할

106. 이벤트

107. 핸들러의

108. 증가..
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);

109. 이와

110. 같이

111. 부모

112. 영역에

113. Event를

114. 등록해서

115. 사용하는

116. 것을

118.
이벤트

119. 위임(delegation)이라고

120. 한다.

122.
!
이를

123. 잘

124. 활용해서

125. 이벤트를

126. 등록하는

127. 것이

128. nice한

129. 방법임.

131. 이 벤 트

132. 버 블 링

133. div
p
body
하위

134. Element

135. 먼저

136. 실행되고

137. 나머지도

138. 모두

139. 실행

140.
!
body.addEventListener(,handler1,)!
div.addEventListener(,handler2,)!
p.addEventListener(,handler3,)
1.handler3

141.
2.handler2

142.
3.handler1

143. div
p
body
Event는

144. 상위

145. element로

146. 전파(propagation)된다

147.
!
bubbling

148. div
a
body
하지만,

149. addEventListener()를

150. 사용하여

151. 하위

152. element로

153. 전파되게

154. 할

155. 수도

156. 있다.
예제)

157. addEventListener(‘click’

158. ,

159. handler

160. ,

161. true);

162.
!
document

166. body

170. div

174. p
capturing

175. D O M

178.
다 양 하 게

179. 조 작 해 보 자

180. html을

182. 문자열로

183. 만들고,

184.
한

185. 방에

186. 넣는

187. 방법!
element.innerHTML = “li쇼핑/li”

188. 잉...??

189. innerHTML은

190. 자식을

191. 모두

192. ...교체해버린다..

193.
원하는

194. 위치에

195. 쉽게

196. 추가

197. 하려면

198. ?

199. 잉...??

200. innerHTML은

201. 자식을

202. 모두

203. ...교체해버린다..

204.
원하는

205. 위치에

206. 쉽게

207. 추가

208. 하려면

209. ?
element.insertAdjacentHTML(position, html);
https://developer.mozilla.org/en-US/docs/Web/API/element.insertAdjacentHTML

210. 그외

211. 꼭

212. 알아야

213. 할

214. DOM

215. API

216. document.createElement(‘div’);
document.createElement(‘li’);
element를

217. 새로

218. 만드는

219. 방법

220. document.createElement(‘div’);
document.createElement(‘li’);
element를

221. 새로

222. 만드는

223. 방법
baseElement.appendChild(targetNode);
element

224. 추가

225. document.createElement(‘div’);
document.createElement(‘li’);
element를

226. 새로

227. 만드는

228. 방법
baseElement.appendChild(targetNode);
element

229. 추가
baseElement.removeChild(targetNode);
element

230. 삭제.

231. div id= ‘wrap’
/div
div

232. 아래

233. p

234. 태그(id가

235. p1)를

236. 추가하자.

237. div id= ‘wrap’
/div
div

238. 아래

239. p

240. 태그(id가

241. p1)를

242. 추가하자.
아마도

243. 이런

244. 순서가

245. 될

246. 듯.

248.
1.

249. div

250. 를

251. 기억한다.

253.
2.

254. p

255. 를

256. 하나

257. 생성하고

258.
3.

259. p에

260. ‘p1’

261. 이라는

262. id

263. 속성을

264. 추가한다.

266.
3.

267. div자식으로

268. p

269. 를

270. 추가한다.

271. div id= ‘wrap’
/div
!
var wrapDiv = document.getElementById('wrap');
var divEle = document.createElement('p');
divEle.id = 'p1';
wrapDiv.appendChild(divEle);
!
div

272. 아래

273. p

274. 태그(id가

275. p1)를

276. 추가하자.

277. 특정

278. 지점에

279. node를

280. 추가하고

281. 싶다면?

283.
insertBefore

284. API를

285. 사용.

286.
!
!
text

287. node를

288. 추가하려면?

289.
textNode를

290. 추가하기

291. 위해서는

292. textContent를

293. 사용하는게

294. 좋다.

296.
물론

297. createTextNode로

298. textNode를

299. 자식으로

300. 추가

301. 할

302. 수도

303. 있다.

305. 숙제1
다음과

306. 같은

307. element

309. 가

310. 있다.

311.
div id= 'wrap'
ul
li뉴스/li
li카페/li
li블로그/li
li메일/li
/ul
/div
!
위

312. html에

313. 어떠한

314. id,class

315. 를

316. 부여하지

317. 않고

319.
블로그

320. 앞에

321. ‘쇼핑’을

322. 동적으로

323. 추가하라

326.
(insertBefore,

327. createElement

328. ,textContent

329. 를

330. 사용)
http://jsbin.com/abafid/1/edit

331. 모바일 웹 이벤트
전용우

332. 터치 이벤트의 이해

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

334. Mouse Event
mousedown mousemove
mouseup

335. Touch Event
touchstart touchmove
touchend

336. mouse와 touch의 차이
• touch는 mouseover이벤트가 없다.
• touch는 멀티 터치가 가능.

337. 터치 이벤트 객체의 이해

338. //touchmove,
touchend같음
ele.addEventListener(touchstart,function(e){
event.touches;
//TouchList
[Touch...]
event.changedTouches;
//TouchList
[Touch...]
event.targetTouches;
//TouchList
[Touch...]
});

339. 터치 이벤트 설명
• 모든 터치 이벤트에는 touches, changedTouches,
tagetTouches의 속성이 있다.
• 각 속성에은 [TouchList] 타입이다.
• TouchList는 [Touch]로 구성된 List이다.
• Touch는 아래와 같은 구조로 되어 있다.

340. Touch의 구조
속성 설명
identifier touch 포인트의 유일한 값
target touch한 엘리먼트
clientX(Y) 화면에서의 X,Y 좌표
pageX(Y) 페이지에서의 X,Y 좌표
screenX(Y) 디바이스 화면의 X,Y 좌표

341. 위치값의 이해
clientX(Y)
pageX(Y)
screenX(Y)

342. 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

343. 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

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

345. 기본적으로 알고 있어야 할 이슈
• iOS는 스크롤 이벤트에서 돔을 수정하면 바로 반영되지 않
는다.
• 안드로이드는 touchmove에서 스크롤되면 touchcancel
이벤트가 발생후 touch이벤트(move,end)가 발생 안한다
• touchmove에서 e.preventDefault()을 사용하면 scroll
을 막을 수 있다.
• android의 경우 touches와 targetTouches와 같다.

346. End
;-D