향후 요소 바인딩 이벤트에는 바인딩을 사용할 수 없습니다.
1. 대신 라이브를 사용할 수 있지만 공식 문서에 따르면 1.7부터는 라이브 및 위임을 권장하지 않습니다. 1.9 라이브에서는 제거됩니다.
2. 대신 on을 사용하는 것이 좋습니다(참고: 버전 1.7 이상에서만 지원됨). 사용법: on(events,[selector],[data],fn)
//$(function(){})
$(document).on("click", "#testDiv", function(){
에 배치된 경우에만 유효합니다. //여기서 $(this)는 $(document)가 아닌 $( "#testDiv")를 나타냅니다.
})
3. 일치하는 요소(예: click ) 일회성 이벤트 처리 함수를 바인딩할 때 on 대신 .one()을 사용하면 됩니다. 모든 [selectors]에서 한 번만 실행되는 것이 아니라 이러한 [selects]에서도 한 번만 실행됩니다. 미래 요소에 유효합니다.
4. 이벤트에 바인딩해야 하는 div에 추가, 삭제, 수정 버튼이 3개 있는 경우 다음과 같이 작성합니다.
$('#btn-add').click(function(){})
$( '#btn-del').click (function(){});
$('#btn-edit').click(function(){})
단점 이렇게 쓰면 세 가지 구조적 연결 사이의 차이를 볼 수 없으며 이벤트가 터질 이유가 없습니다.
jQuery 이벤트 바인딩에 대한 CoffeeDeveloper의 권장 사항을 살펴보겠습니다.
$("#btnContainer").coffee({
클릭: {
"#btn-add": function(){ //뭔가를 하세요 },
"#btn-del": function(){ //뭔가를 하세요 },
"#btn-edit": function(){ //뭔가를 하세요 }
} ,
mouseenter:{
"#btn-abc": function(){ //do Something },
}
})
이렇게 작성하면, 훨씬 나아 보이지 않나요?(.coffee()는 사용자 정의 함수입니다. 이 함수를 직접 작성할 수 있나요?) 하지만 바인딩된 함수가 상대적으로 길면 코드가 여전히 좀 지저분하게 느껴집니다.
$('#btnContainer')
.on ('클릭','# btn-add', function(){})
.on('click','#btn-del', function(){})
.on('클릭' ,'#btn-edit' ,function(){});
이러한 작성 방법은 위에서 언급한 두 가지 단점도 피하고 덜 지저분해 보입니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
