728x90 웹개발자5 jquery 루프 외부에 추가 루프 외부에 추가 DOM을 건드리면 비용이 발생합니다. DOM에 많은 요소를 추가하는 경우 한 번에 하나씩이 아니라 한 번에 모두 추가하는 것이 좋습니다. 이는 루프 내에서 요소를 추가할 때 흔히 발생하는 문제입니다. $.each( myArray, function( i, item ) { var newListItem = "" + item + ""; $( "#ballers" ).append( newListItem ); }); 일반적인 기술 중 하나는 문서 조각을 활용하는 것입니다. 루프를 반복할 때마다 DOM 요소가 아닌 조각에 요소를 추가합니다. 루프 후에 조각을 DOM 요소에 추가하기만 하면 됩니다. var frag = document.createDocumentFragment(); $.each( myAr.. 2023. 5. 23. 이벤트 위임의 이해 이벤트 위임을 사용하면 단일 이벤트 리스너를 부모 요소에 연결할 수 있으며, 해당 하위 항목이 현재 존재하는지 또는 미래에 추가되는지 여부에 관계없이 선택자와 일치하는 모든 하위 항목에 대해 실행됩니다. 링크예 나머지 단원에서는 다음 HTML 구조를 참조합니다. Item #1 Item #2 Item #3 Item #4 그룹 의 앵커를 #list클릭하면 해당 텍스트를 콘솔에 기록하려고 합니다. 일반적으로 다음 메서드를 사용하여 각 앵커의 클릭 이벤트에 직접 바인딩할 수 있습니다 . // Attach a directly bound event handler $( "#list a" ).on( "click", function( event ) { event.preventDefault(); console.log( $.. 2023. 5. 22. 다중 클릭 이벤트 jquery 다중 클릭 이벤트 이 multiclick특수 이벤트는 자신을 표준 클릭 이벤트에 매핑하지만 핸들 후크를 사용하여 이벤트를 모니터링하고 사용자가 이벤트 바인딩 중에 지정된 횟수의 배수로 요소를 클릭할 때만 전달합니다. 후크는 현재 클릭 수를 데이터 개체에 저장하므로 서로 다른 요소의 다중 클릭 핸들러가 서로 간섭하지 않습니다. 핸들러를 호출하기 전에 이벤트 유형을 원래 "다중 클릭" 유형으로 변경하고 반환하기 전에 매핑된 "클릭" 유형으로 복원합니다. jQuery.event.special.multiclick = { delegateType: "click", bindType: "click", handle: function( event ) { var handleObj = event.handleObj.. 2023. 5. 20. $(document).ready() 문서가 "준비"될 때까지 페이지를 안전하게 조작할 수 없습니다. jQuery는 이 준비 상태를 감지합니다. 내부에 포함된 코드는 $( document ).ready()페이지 DOM(문서 개체 모델)이 JavaScript 코드를 실행할 준비가 된 후에만 실행됩니다. // A $( document ).ready() block. $( document ).ready(function() { console.log( "ready!" ); }); 내부에 포함된 코드는 $( window ).on( "load", function() { ... })DOM뿐만 아니라 전체 페이지(이미지 또는 iframe)가 준비되면 실행됩니다. 숙련된 개발자는 $()때때로 $( document ).ready(). jQuery에 익숙하지 않은.. 2023. 5. 18. 이전 1 2 다음 728x90
