[jQuery] 재밌는 제이쿼리 3
제이쿼리 이벤트에
.bind(), .live(), .delegate() 대신 .on() 의 사용을 권고하며
.live() .die()는 jQuery 1.9 부터 빠졌습니다.
습관을 on 으로 하면 좋겠지요?
그렇다면 제이쿼리 3 번째 문제 입니다.
아래 점선내용에 on 을 사용 하여 마우스오버, 마우스아웃, 클릭 <-- 이 3가지를 on 에서 처리 되도록 하면 됩니다.
오버시 : 배경색이 red
아웃시 : 배경색이 흰색
클릭시 : 배경색이 노랑색
-----------------------------------
<span id="temp">베타테스터</span>
-----------------------------------
화이팅!!
댓글 2개
11년 전
$('#temp').on({
mouseenter : function() {
$(this).css({'background-color':'red'});
},
mouseleave : function() {
$(this).css({'background-color':''});
},
click : function() {
$(this).css({'background-color':'yellow'});
}
});
mouseenter : function() {
$(this).css({'background-color':'red'});
},
mouseleave : function() {
$(this).css({'background-color':''});
},
click : function() {
$(this).css({'background-color':'yellow'});
}
});
11년 전
추가
$('#temp').on('mouseenter mouseleave click', function(event){
var bgc = '';
var types = event.type;
if(types == 'mouseenter') bgc = 'red';
else if(types == 'mouseleave') bgc = 'white';
else if(types == 'click') bgc = 'yellow';
$(this).css('background-color', bgc);
});
$('#temp').on('mouseenter mouseleave click', function(event){
var bgc = '';
var types = event.type;
if(types == 'mouseenter') bgc = 'red';
else if(types == 'mouseleave') bgc = 'white';
else if(types == 'click') bgc = 'yellow';
$(this).css('background-color', bgc);
});
게시판 목록
퀴즈게시판
답을 맞히시면, 문제를 내신 회원님이 채택을 해드립니다.
채택은 '좋아요'와 같습니다.
채택은 '좋아요'와 같습니다.
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 696 |
 all777 |
7년 전 | 3019 | |
| 695 |
루돌프사슴코
|
7년 전 | 2743 | |
| 694 |
루돌프사슴코
|
7년 전 | 2198 | |
| 693 |
루돌프사슴코
|
7년 전 | 1919 | |
| 692 |
루돌프사슴코
|
7년 전 | 3257 | |
| 691 |
루돌프사슴코
|
7년 전 | 1568 | |
| 690 |
루돌프사슴코
|
7년 전 | 1626 | |
| 689 |
루돌프사슴코
|
7년 전 | 1457 | |
| 688 |
루돌프사슴코
|
7년 전 | 2444 | |
| 687 |
루돌프사슴코
|
7년 전 | 2277 | |
| 686 | 7년 전 | 3382 | ||
| 685 |
루돌프사슴코
|
7년 전 | 3682 | |
| 684 |
루돌프사슴코
|
7년 전 | 2362 | |
| 683 |
루돌프사슴코
|
7년 전 | 10928 | |
| 682 |
루돌프사슴코
|
7년 전 | 1466 | |
| 681 |
루돌프사슴코
|
7년 전 | 2818 | |
| 680 | 7년 전 | 6894 | ||
| 679 |
루돌프사슴코
|
7년 전 | 3574 | |
| 678 |
루돌프사슴코
|
7년 전 | 2838 | |
| 677 |
루돌프사슴코
|
7년 전 | 6589 | |
| 676 |
루돌프사슴코
|
7년 전 | 2603 | |
| 675 |
루돌프사슴코
|
7년 전 | 11071 | |
| 674 |
루돌프사슴코
|
7년 전 | 1645 | |
| 673 |
루돌프사슴코
|
7년 전 | 3380 | |
| 672 |
루돌프사슴코
|
7년 전 | 2806 | |
| 671 |
루돌프사슴코
|
7년 전 | 2531 | |
| 670 | 7년 전 | 1708 | ||
| 669 | 7년 전 | 1776 | ||
| 668 | 7년 전 | 1957 | ||
| 667 |
루돌프사슴코
|
7년 전 | 3176 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기