| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | ||||||
| 2 | 3 | 4 | 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 | 13 | 14 | 15 |
| 16 | 17 | 18 | 19 | 20 | 21 | 22 |
| 23 | 24 | 25 | 26 | 27 | 28 |
- absolute
- 밀리초
- vw
- setTimeout
- z-index
- 이벤트 버블링
- togle
- css selector
- Position
- EventListner
- hover
- input
- val()
- navbar
- CSS
- float : left
- css animation
- margin
- animate
- transform
- scss
- display:none
- 레이아웃
- Carousel
- TRANSITION
- position : fixed
- JQuery
- form
- bootstrap
- sass
- Today
- Total
목록이벤트 버블링 (2)
Simple Is Best
16. [jQuery] 이벤트 버블링을 활용한 tab기능 제작
안녕하세요 이번 포스팅에서는 이벤트 버블링을 활용하여 이벤트 리스너를 줄이는 방법에 대해서 알아보도록 하겠습니다. 포스팅 14에서는 Tab 기능을 구현하는 방법 포스팅 15에서는 이벤트 버블링을 참고하면 좋을 것 같습니다. 포스팅 14에서 Tab 기능을 구현 할 때에는 .tab-button 에 3개의 이벤트 리스너를 달았었습니다. 하지만 이렇게 이벤트 리스너를 달게 될 경우에는 메모리를 많이 잡아먹기 때문에 좋은 방법은 아닙니다. 따라서, 이번 포스팅에서는 지난 포스팅 15포스팅에서 배운 이벤트 버블링을 활용하여 1개의 이벤트 리스너를 달아서 동일하게 기능을 구현하는 방법에 대해서 알아보도록 하겠습니다. 총 2가지 방법이 존재하는데 [tab 열기] 함수는 이전 포스팅을 참고해주시면 감사하겠습니다. HTM..
15. [jQuery] 이벤트 버블링 및 이벤트 메소드
안녕하세요 이번 포스팅에서는 이벤트 버블링 및 여러가지 이벤트 메소드에 대해서 학습해보도록 하겠습니다. 이벤트 메소드 이벤트 리스너를 달았을 때 파라미터로 e 혹은 event를 주어서 할 수 있는 동작들 입니다. 예시를 위해서 폼 HTML 을 가져왔습니다. HTML Sign in Email Address Password Submit Cancel ▷ e.target : user 가 실제로 클릭한 요소를 알려주는 메소드 $('.black-background').click(function(e){ console.log(e.target); // 실제 user가 클릭한 요소를 html 태그로 알려준다. }) User가 white-background를 클릭하면 e.target은 white-background 에 해당..