[WEB UI BASIC] JavaScript 4탄

1. JavaScript

2. 4탄 [WEB

4. BASIC] 본

5. 자료는

6. NHN

7. NEXT

8. 윤지수

9. 교수님의

10. 자료를

11. 바탕으로

12. 제작했습니다. NHN NEXT 우재우

13. Previously JavaScript… 특정 Element를 잡아와서 Event를 걸 수 있다!

14. 오늘은 Event를 더 자세히 봅시당~!

15. addEventListener(event, callback, useCapture);

16. addEventListener() Item1과

17. Item2에

18. 이벤트를

19. 걸고

20. 싶으면

21. 앞에서

22. 배운대로... item1.addEventListener(‘click’,

23. function,

24. false); item2.addEventListener(‘click’,

25. function,

26. false);

27. 그런데 만약 Item이 100개라면?!?!

28. 이렇게 하면 되죵 ^^ item1.addEventListener(‘click’,

29. function,

30. false);

31. item2.addEventListener(‘click’,

32. function,

33. false);

35. function,

36. false);

38. function,

39. false);

41. function,

42. false);

44. function,

45. false);

47. function,

48. false);

50. function,

51. false);

53. function,

54. false);

55. …⋯

57. function,

58. false);

60. function,

61. false);

62. 와~!!! 코딩 많이 한 것 같아서 좋네요 :)

63. 사실 이렇게 하면 폭망입니다 ㅋㅋㅋ 이벤트 핸들러가 많을 수록 페이지 성능이 떨어져요ㅠ

64. 이벤트 위임(Event Delegation) 부모

65. Element에

66. 이벤트

67. 리스너를

68. 걸어주는

69. 것이

70. 바로

71. 이벤트

72. 위임(Event

73. Delegation)입니다. wrap.addEventListener(‘click’,

74. function,

75. false);

76. 그리고, target!!! addEventListener()의

77. 콜백함수는

78. 기본적으로

79. event

80. 정보를

81. parameter로

82. 가집니다.

83. 그리고

84. event에는

85. target이라는

86. 속성이

87. 있는데,

88. event.target 이라고

89. 쓰면

90. event가

91. 발생한

92. element가

93. 무엇인지

94. 알

95. 수

96. 있습니다. wrap.addEventListener(‘click’,

97. hello,

98. false);

99. function

100. hello(event)

101. {

102. console.log(event.target);

103. } wrap.addEventListener(‘click’,

104. function(event)

105. {

106. console.log(event.target);

107. },

108. false); 익명함수로

109. 바로

110. 쓸

111. 때는

112. addEventListener(event, callback, useCapture); 이 녀석을 알아봅시다!

113. hello3.addEventListener(‘click’,

114. function); hello1.addEventListener(‘click’,

115. function); hello2.addEventListener(‘click’,

116. function); 여기를

117. 클릭하면

118. 어떤

119. 순서로

120. 이벤트가

121. 작동할까요?

122. 캡쳐링(Capturing) / 버블링(Bubbling) true / false

123. Capturing VS Bubbling 캡쳐링과

124. 버블링은

125. 이벤트가

126. 전파되는

127. 순서에

128. 대한

129. 설정입니다.

130. 두

131. 가지의

132. 차이점은

133. 전파되는

134. 방향일

135. 뿐입니다.

137. 버블링은

138. 이벤트가

139. 전파되는

140. 순서에

141. 대한

143. 두

144. 가지의

145. 차이점은

146. 전파되는

147. 방향일

148. 뿐입니다. Capturing

150. 버블링은

151. 이벤트가

152. 전파되는

153. 순서에

154. 대한

156. 두

157. 가지의

158. 차이점은

159. 전파되는

160. 방향일

161. 뿐입니다. Bubbling

162. 이렇게 하고 클릭해보세요! function

163. hello(event)

164. {

165. console.log(this.id);

166. }

167. hello1.addEventListener('click',

168. hello,

169. false);

171. hello,

172. false);

174. hello,

175. false); 여기서

176. this는

177. 이벤트를

178. 발생시킨

179. 녀석을

180. 말합니다.

181. 이번에는 true로 바꾸고! function

182. hello(event)

183. {

184. console.log(this.id);

185. }

187. hello,

188. true);

190. hello,

191. true);

193. hello,

194. true); 여기서

195. this는

196. 이벤트를

197. 발생시킨

198. 녀석을

199. 말합니다.

200. 지금은 이해가 잘 안 될 수도 있으니 그냥 이런게 있다더라 정도만 해둡시다 ㅋㅋㅋ

201. 이제 이벤트는 이쯤하고 지난 시간 실습 문제를 같이 해보고 마치죠

202. [실습] 버튼을

203. 클릭하면

204. 1부터

205. 45

206. 사이의

207. 랜덤한

208. 숫자가

209. 적힌

210. 상자가

211. 중복

212. 없이

213. 7개까지

214. 추가되는

215. 프로그램

216. 짜기 추

217. 가 예) 32 23 1 17 14 41 5 이때까지

218. 배운거

219. 다

220. 써야

221. 짤

222. 수

223. 있을걸요?

224. 후훗

[WEB UI BASIC] JavaScript 4탄

Recommended

Recommended

More Related Content

More from Jae Woo Woo

More from Jae Woo Woo (12)

[WEB UI BASIC] JavaScript 4탄