js 의 전 귀속 과 후 귀속 상세 설명

그 주요 의 미 는 내 가 사용 한 적 이 있 는 지 없 는 지 를 보 는 것 이다.즉,돔 트 리 의 일부 요 소 는 아직 만 들 지 않 았 을 때 이 유형의 요소 가 태 어 나 자마자 가 져 야 할 사건 을 지정 하 는 것 이다.실제 개발 과정 에서 전 귀속 과 후 귀속 이 자주 언급 된다.말 그대로 전 바 인 딩―태 어 나 지 않 았 을 때 어떤 사건 을 바 인 딩 했 고,후 바 인 딩―태 어 난 후에 야 바 인 딩 할 수 있 는 어떤 사건.다음은 간단 한 예 를 통 해 여러분 이 참고 할 수 있 도록 논술 하고 각 방법 을 비교 합 니 다.페이지 요소:

<div id="main"> 
<a href="#">aaaaaaaaaaaaaaaaaaaaaa</a><br /> 
<a href="#">bbbbbbbbbbbbbbbbbbbb</a><br /> 
<a href="#">ccccccccccccccccccccccccc</a><br /> 
<a href="#">dddddddddddddddddddd</a><br /> 
<a href="#">eeeeeeeeeeeeeeeeeeeeee</a><br /> 
<a href="#">fffffffffffffffffffffffffffffffff</a><br /> 
<a href="#">gggggggggggggggggggg</a><br /> 
<a href="#">hhhhhhhhhhhhhhhhhhhh</a> 
</div> 
<input type="button" value="  a  " id="btnCreate" />

페이지 의 js:

<script src="201102/Scripts/jquery-1.5.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(function () { 
//   ，                 ！！！ 
//1.    
// $("#main > a ").click(function () { 
// alert($(this).html()); 
// }); 
//2.    
// $("#main > a").bind("click", function () { 
// alert($(this).text()); 
// }); 
//3.   , 
// $("#main > a").bind({ 
// click: function () { alert($(this).text()); }, 
// mouseover: function () { $(this).css("background-color", "red") }, 
// mouseout: function () { $(this).css("background-color", "white") } 
// }); 
$("#btnCreate").bind({ 
click: function () { $("<br /><a href='#'>       </a>").appendTo("#main"); } 
}); 

//4.   ，                 
// $("#main").delegate("a", "click", function () { 
// alert($(this).text()); 
// }); 
//5.   ,live       documentdelegate            ，  delegate    live    
$("#main a").live("click", function () { 
alert($(this).text()); 
}); 
}); 
</script>