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년 전
좋은 정보감사합니다.
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 6330 |
 gilynh |
12년 전 | 1801 | |
| 6329 |
내가짱니네가짱
|
12년 전 | 1227 | |
| 6328 |
AMDbest
|
12년 전 | 492 | |
| 6327 | 12년 전 | 1705 | ||
| 6326 | 12년 전 | 1336 | ||
| 6325 | 12년 전 | 7623 | ||
| 6324 |
AMDbest
|
12년 전 | 2205 | |
| 6323 |
 KIMys |
12년 전 | 1977 | |
| 6322 | 12년 전 | 2037 | ||
| 6321 | 12년 전 | 2487 | ||
| 6320 |
senseme
|
12년 전 | 592 | |
| 6319 | 12년 전 | 3735 | ||
| 6318 | 12년 전 | 1382 | ||
| 6317 |
kiplayer
|
12년 전 | 6418 | |
| 6316 | 12년 전 | 1018 | ||
| 6315 | 12년 전 | 975 | ||
| 6314 |
상엽나르도
|
12년 전 | 1286 | |
| 6313 |
검은고양이1983
|
12년 전 | 655 | |
| 6312 | 12년 전 | 3117 | ||
| 6311 | 12년 전 | 1414 | ||
| 6310 |
testers
|
12년 전 | 1484 | |
| 6309 | 12년 전 | 988 | ||
| 6308 | 12년 전 | 2603 | ||
| 6307 | 12년 전 | 1655 | ||
| 6306 | 12년 전 | 438 | ||
| 6305 | 12년 전 | 3501 | ||
| 6304 | 12년 전 | 998 | ||
| 6303 | 12년 전 | 824 | ||
| 6302 | 12년 전 | 1191 | ||
| 6301 | 12년 전 | 5570 | ||
| 6300 |
 ideaman |
12년 전 | 1197 | |
| 6299 |
AMDbest
|
12년 전 | 2807 | |
| 6298 |
AMDbest
|
12년 전 | 2250 | |
| 6297 |
프리랜서개발자
|
12년 전 | 476 | |
| 6296 | 12년 전 | 2936 | ||
| 6295 |
SUPERMANs
|
12년 전 | 1386 | |
| 6294 | 12년 전 | 1293 | ||
| 6293 | 12년 전 | 1346 | ||
| 6292 |
오늘도망했다
|
12년 전 | 3272 | |
| 6291 |
senseme
|
12년 전 | 2032 | |
| 6290 |
senseme
|
12년 전 | 3689 | |
| 6289 |
senseme
|
12년 전 | 8580 | |
| 6288 |
senseme
|
12년 전 | 4173 | |
| 6287 |
senseme
|
12년 전 | 3745 | |
| 6286 |
senseme
|
12년 전 | 1365 | |
| 6285 |
senseme
|
12년 전 | 1438 | |
| 6284 |
프로프리랜서
|
12년 전 | 3160 | |
| 6283 |
프로프리랜서
|
12년 전 | 3992 | |
| 6282 |
프로프리랜서
|
12년 전 | 4396 | |
| 6281 |
프로프리랜서
|
12년 전 | 1606 | |
| 6280 | 12년 전 | 1290 | ||
| 6279 |
AMDbest
|
12년 전 | 880 | |
| 6278 | 12년 전 | 982 | ||
| 6277 |
senseme
|
12년 전 | 2719 | |
| 6276 |
senseme
|
12년 전 | 2735 | |
| 6275 |
senseme
|
12년 전 | 1261 | |
| 6274 |
 raineye |
12년 전 | 2806 | |
| 6273 | 12년 전 | 1279 | ||
| 6272 | 12년 전 | 8462 | ||
| 6271 |
senseme
|
12년 전 | 1513 | |
| 6270 |
senseme
|
12년 전 | 3772 | |
| 6269 |
senseme
|
12년 전 | 6381 | |
| 6268 |
senseme
|
12년 전 | 1565 | |
| 6267 | 12년 전 | 2843 | ||
| 6266 | 12년 전 | 580 | ||
| 6265 | 12년 전 | 1302 | ||
| 6264 | 12년 전 | 1159 | ||
| 6263 |
senseme
|
12년 전 | 1319 | |
| 6262 |
senseme
|
12년 전 | 3314 | |
| 6261 |
senseme
|
12년 전 | 1089 | |
| 6260 |
senseme
|
12년 전 | 1830 | |
| 6259 |
senseme
|
12년 전 | 1260 | |
| 6258 |
senseme
|
12년 전 | 919 | |
| 6257 | 12년 전 | 1408 | ||
| 6256 | 12년 전 | 2102 | ||
| 6255 |
senseme
|
12년 전 | 1383 | |
| 6254 |
senseme
|
12년 전 | 1269 | |
| 6253 |
senseme
|
12년 전 | 1789 | |
| 6252 |
kiplayer
|
12년 전 | 14780 | |
| 6251 | 12년 전 | 1073 | ||
| 6250 | 12년 전 | 870 | ||
| 6249 | 12년 전 | 2728 | ||
| 6248 |
senseme
|
12년 전 | 8966 | |
| 6247 | 12년 전 | 1291 | ||
| 6246 |
프로프리랜서
|
12년 전 | 1170 | |
| 6245 |
프로프리랜서
|
12년 전 | 1628 | |
| 6244 |
프로프리랜서
|
12년 전 | 1130 | |
| 6243 |
프로프리랜서
|
12년 전 | 1261 | |
| 6242 |
프로프리랜서
|
12년 전 | 3552 | |
| 6241 |
프로프리랜서
|
12년 전 | 1457 | |
| 6240 |
프로프리랜서
|
12년 전 | 2126 | |
| 6239 |
softhead
|
12년 전 | 1144 | |
| 6238 |
senseme
|
12년 전 | 1311 | |
| 6237 |
senseme
|
12년 전 | 3028 | |
| 6236 | 12년 전 | 876 | ||
| 6235 | 12년 전 | 1343 | ||
| 6234 | 12년 전 | 1605 | ||
| 6233 | 12년 전 | 2035 | ||
| 6232 | 12년 전 | 2140 | ||
| 6231 | 12년 전 | 2566 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기