jQuery 의 delegate 흉내내기
제이쿼리에서는 부모를 지정한 다음 이벤트 발생 시 그 하위 태그가 지정된 셀렉터와 일치하면 발생시키는 기능으로,
Ajax 등의 동적으로 바뀐 컨텐츠에도 대응이 가능하고 성능도 좋다고 알려져 있습니다.
그렇다면 이 스크립트의 원리는 무엇인가요?
간단합니다. 부모에게 이벤트를 줍니다. 그리고 이벤트 핸들러를 아래와 같이 만듭니다.
function clickEventDelegate(e){
var e = e || window.event; //이벤트 객체를 받아냅니다.
var target = e.target || e.srcElement; //이벤트가 발생시킨 원래 요소를 가져옵니다.
if(target.nodeName == 'LI'){ //발생시킨 요소가 <li> 태그이면
childEventHandler.call(target, e); //해당 이벤트를 실행합니다.
}
}
여기서 한가지 주의해야 할 점이 있습니다.
이벤트를 발생시킨 요소에 이벤트가 있을 때,
return false; 반환하거나, event.stopPropagation() 메소드 또는 event.cancelBubble = true; 를 실행하면
자식에서 부모에게 이벤트를 전달하지 않게 되기 때문에
부모에서 캡쳐하지 못합니다. 이는 제이쿼리라도 마찬가지입니다.
댓글 1개
CJack
11년 전
좋은 정보감사합니다.
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 6830 |
112211dd
|
11년 전 | 788 | |
| 6829 |
진짜다진짜가나타남
|
11년 전 | 1196 | |
| 6828 | 11년 전 | 818 | ||
| 6827 |
봉보로봉봉
|
11년 전 | 904 | |
| 6826 |
jinion
|
11년 전 | 818 | |
| 6825 | 11년 전 | 801 | ||
| 6824 |
yunkiri486
|
11년 전 | 716 | |
| 6823 |
2donggalbi
|
11년 전 | 850 | |
| 6822 | 11년 전 | 848 | ||
| 6821 | 11년 전 | 799 | ||
| 6820 | 11년 전 | 3102 | ||
| 6819 | 11년 전 | 1250 | ||
| 6818 | 11년 전 | 516 | ||
| 6817 |
 별을따는소년 |
11년 전 | 604 | |
| 6816 | 11년 전 | 2070 | ||
| 6815 | 11년 전 | 1211 | ||
| 6814 | 11년 전 | 861 | ||
| 6813 | 11년 전 | 602 | ||
| 6812 |
 Terrorboy |
11년 전 | 982 | |
| 6811 | 11년 전 | 577 | ||
| 6810 | 11년 전 | 1536 | ||
| 6809 |
낚시가좋아
|
11년 전 | 1047 | |
| 6808 | 11년 전 | 439 | ||
| 6807 | 11년 전 | 760 | ||
| 6806 |
Unhappy
|
11년 전 | 1771 | |
| 6805 | 11년 전 | 1602 | ||
| 6804 | 11년 전 | 1118 | ||
| 6803 | 11년 전 | 558 | ||
| 6802 |
asdfg
|
11년 전 | 1135 | |
| 6801 |
아트귀농인
|
11년 전 | 500 | |
| 6800 | 11년 전 | 2551 | ||
| 6799 | 11년 전 | 1352 | ||
| 6798 | 11년 전 | 1466 | ||
| 6797 | 11년 전 | 626 | ||
| 6796 |
purple63
|
11년 전 | 427 | |
| 6795 | 11년 전 | 2633 | ||
| 6794 |
커네드커네드
|
11년 전 | 957 | |
| 6793 | 11년 전 | 402 | ||
| 6792 | 11년 전 | 2498 | ||
| 6791 | 11년 전 | 515 | ||
| 6790 | 11년 전 | 2255 | ||
| 6789 |
리아빌리티
|
11년 전 | 3093 | |
| 6788 | 11년 전 | 1343 | ||
| 6787 | 11년 전 | 673 | ||
| 6786 | 11년 전 | 389 | ||
| 6785 | 11년 전 | 716 | ||
| 6784 |
Terrorboy |
11년 전 | 846 | |
| 6783 | 11년 전 | 579 | ||
| 6782 | 11년 전 | 3652 | ||
| 6781 |
리아빌리티
|
11년 전 | 482 | |
| 6780 | 11년 전 | 522 | ||
| 6779 | 11년 전 | 476 | ||
| 6778 | 11년 전 | 4683 | ||
| 6777 |
바보온달123
|
11년 전 | 610 | |
| 6776 | 11년 전 | 927 | ||
| 6775 | 11년 전 | 725 | ||
| 6774 |
DANet
|
11년 전 | 636 | |
| 6773 | 11년 전 | 1557 | ||
| 6772 | 11년 전 | 1354 | ||
| 6771 | 11년 전 | 613 | ||
| 6770 | 11년 전 | 1156 | ||
| 6769 | 11년 전 | 949 | ||
| 6768 | 11년 전 | 688 | ||
| 6767 | 11년 전 | 578 | ||
| 6766 | 11년 전 | 1259 | ||
| 6765 |
크림나이트
|
11년 전 | 994 | |
| 6764 | 11년 전 | 1537 | ||
| 6763 | 11년 전 | 2594 | ||
| 6762 | 11년 전 | 532 | ||
| 6761 |
Terrorboy |
11년 전 | 779 | |
| 6760 |
Terrorboy |
11년 전 | 709 | |
| 6759 | 11년 전 | 3343 | ||
| 6758 | 11년 전 | 1007 | ||
| 6757 | 11년 전 | 1266 | ||
| 6756 | 11년 전 | 889 | ||
| 6755 |
Terrorboy |
11년 전 | 568 | |
| 6754 |
Terrorboy |
11년 전 | 710 | |
| 6753 |
Terrorboy |
11년 전 | 1375 | |
| 6752 | 11년 전 | 600 | ||
| 6751 |
Terrorboy |
11년 전 | 649 | |
| 6750 |
Terrorboy |
11년 전 | 2014 | |
| 6749 | 11년 전 | 1209 | ||
| 6748 |
 HackYa |
11년 전 | 1113 | |
| 6747 | 11년 전 | 1159 | ||
| 6746 | 11년 전 | 831 | ||
| 6745 |
Terrorboy |
11년 전 | 907 | |
| 6744 | 11년 전 | 849 | ||
| 6743 | 11년 전 | 1277 | ||
| 6742 | 11년 전 | 535 | ||
| 6741 |
Abilityarch
|
11년 전 | 603 | |
| 6740 | 11년 전 | 642 | ||
| 6739 |
leewin20
|
11년 전 | 1232 | |
| 6738 | 11년 전 | 502 | ||
| 6737 | 11년 전 | 1215 | ||
| 6736 | 11년 전 | 1252 | ||
| 6735 | 11년 전 | 546 | ||
| 6734 | 11년 전 | 1279 | ||
| 6733 |
RipperTNT
|
11년 전 | 1837 | |
| 6732 |
Terrorboy |
11년 전 | 1335 | |
| 6731 |
Terrorboy |
11년 전 | 1387 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기