언제 이벤트 핸들러에 $ (document) .ready (function()을 사용하지 말아야합니까?

저는 jquery와 javascript를 처음 사용하고 알고 싶었습니다. 왜 모든 이벤트에 .ready() 함수를 사용하고 싶지 않습니까? 핸들러?

전체 페이지가 렌더링되기 전에 사용자가 마우스 이벤트 나 키보드 이벤트에 입력을 보내는 경우 잠재적 인 문제가있을 수 없습니다? 난 당신이 실제로 $(document).ready() 핸들러를 사용한다고 생각

2012-01-28 user784637

두 번째 단락은 뒤로 가져옵니다. 그것이 정확히 document.ready가 일어나는 것을 방지합니다. – Sparky

두 번째 단락이 스크립트를 참조합니다. ** .ready()를 사용하지 않습니다. – user784637

그런 다음 질문의 형식을 확장하고 더 자세히 설명해야합니다. 제대로 구성된 페이지는 DOM이 완전히로드되기 전에 마우스 이벤트 나 입력을 실행할 수 없습니다. jQuery를 사용할 때 document.ready가이를 용이하게하는 데 중요합니다. – Sparky

DOM이로드 될 때 jQuery 문서 준비가 시작될 수 없다. 전체 페이지 (포함 된 이미지 등)가로드 될 때까지 기다리지 않습니다. 사용자가 코드가 실행되기 전에 뭔가를 시도하고 트리거하기 위해 제 시간에 반응 할 수있는 것은 매우 드뭅니다. 이 읽기 : http://api.jquery.com/ready/

특히, 첫 번째 단락 :

자바 스크립트가 페이지가 렌더링 될 때 코드를 실행에 대한로드 이벤트를 제공하지만,이 이벤트는 이미지가 등 모든 자산까지 트리거되지 않습니다 완전히 받았습니다. 대부분의 경우 스크립트는 DOM 계층이 완전히 으로 생성되는 즉시 실행될 수 있습니다. .ready()에 전달 된 핸들러는 DOM 준비가 완료된 후에 이 실행되도록 보장되므로 일반적으로 에 다른 모든 이벤트 핸들러를 연결하고 다른 jQuery 코드를 실행하는 가장 좋은 장소입니다.

따라서 $ (document) .ready (function() {}) 또는 이에 상응하는 $ (function() {})을 사용하는 것은 항상 좋은 습관입니다.

편집 : 사용자가 더 이상 문제를 일으키지 않게하려면 스크립트가 모두 사이트와 함께 호스팅되어야합니다. 예를 들어 jQuery에는 CDN을 사용할 수있는 옵션이 있습니다. CDN은 훌륭하지만 사용자가 어떤 이유로 든 CDN이 아닌 귀하의 사이트로 이동할 수 있다면 페이지가 쓸모없는 상태가 될 수 있습니다.

출처

2012-01-28 02:52:10 SoWeLie

"사용자가 코드를 실행하기 전에 시간을두고 반응하여 뭔가를 트리거 할 수있는 것은 극히 드뭅니다." - 실제로는 불가능합니다. 이미지 로딩은 $ (document) .ready가 아닌 $ (window) .load() 이벤트를 트리거하여 완료됩니다. 또한 jQuery에 CDN을 사용할지 여부는 아직 정해지지 않았으며 실제로 많은 사람들이 CDN을 사용하는 것을 선호합니다. http://encosia.com/3-reasons-why-you-should-let-google-host- jquery-for-you/ –

. 그 이유 HTML 또는 DOM이 아직 완전히로드되지 않은 상태에서 이벤트를 다른 요소에 바인딩하면 페이지에 아직 게시되지 않아서 실패 할 수 있습니다.

이벤트 처리기를 준비 함수에 넣지 말라고 누가 또는 누가 말했는지는 잘 모르겠지만 꽤 일반적인 사례라고 할 수 있습니다.

출처

2012-01-28 02:50:43 Sam152

그 이유는 .ready() 함수 안에 전체 코드를 래핑하는 것이 가장 좋습니다. 전체 페이지가 렌더링되기 전에 사용자가 마우스 이벤트 또는 키보드 이벤트에 입력을 보내는 경우

$(document).ready(function(){ 
    //all event handlers here 
});

이 잠재적 인 문제가 될 수 없습니다?

전체 페이지가 렌더링되기 전에 문제가 발생하지 않습니다. 문제는 jQuery가 아직로드되지 않은 상태에서 사용자가 jQuery 이벤트 핸들러를 통해 처리되는 것을 클릭하려고 할 때 발생합니다. 그래서, 당신의 질문에 답하십시오; 예, 거기에 잠재적 인 문제가있을 수 있습니다.

출처

2012-01-28 02:52:24

jQuery.js를''섹션에 포함 시키면 어떤 페이지가 렌더링되기 전에 완전히로드되고, 전혀로드되지 않도록하는 모든 문제를 방지 할 수 있습니다 (예 : JS 파일이 서버에없는 경우). – nnnnnn

다른 이벤트가 발생한 후에 이벤트를 사용하거나 Ajax를 통해 콘텐츠 및 기타 정보가로드되기 때문에 이벤트 처리기를 준비하고 싶지 않거나 연결할 수없는 상황이 있습니다. 대부분의 경우 준비 기능이 올바른 위치에 있습니다.

출처

2012-01-28 02:54:08

전체 페이지가 렌더링되기 전에 사용자가 마우스 이벤트 또는 키보드 이벤트에 입력을 보내면 잠재적 인 문제가 발생하지 않을 수 있습니까? 는 [이 단락] 당신이 즉, 해당 요소가 이미 구문 분석되어 있어야합니다 자바 스크립트에서 요소를 참조 할 경우,()

일반적으로 .ready 사용하지 스크립트를 참조되면, 추가 DOM 트리. 이는 jQuery를 사용하거나 사용하지 않고 이벤트 처리기를 연결하거나 CSS 설정을 변경하려는 경우에도 적용됩니다.

페이지 전체가 가 렌더링 될위한 .ready() 핸들러는 페이지가 되었다는 점에서 JS 조작을 위해 "준비"수를 기다립니다, 기다리지 않습니다 구문 분석 전체 DOM 트리가 건설되었습니다. 그 시점에서 렌더링이 여전히 발생하고있을 수 있으며, 예를 들어, 이미지 요소의 실제 내용은 부분적으로 만 다운로드 될 수 있습니다.

그러나만큼 당신이 페이지에 후 문제의 요소 (들)을 를 포함 된 스크립트 블록에 그렇게으로 (없이 또는) 전에 자바 스크립트 의 요소를 조작 .ready()을 시작할 수 왜냐하면 브라우저는 html 소스로부터 위에서 아래로 파싱을하기 때문입니다. 예 : 어떤 이유로 당신은 당신을 느낄 기능의 몇 가지 중요한 부분이있을 경우 위처럼 뭔가를 할 수 .ready() 전에

<input type="text" id="input1"> <script> // following will work, because "input1" already exists $("#input1").change(function() { /* do something */ }); // following will NOT work, because "input2" has not been parsed yet $("#input2").change(function() { /* do something */ }); </script> <input type="text" id="input2">

그래서 절대적으로 설정해야합니다.

.ready() 함수는 (.ready()과 같이) 모든 요소가 구문 분석 되었기 때문에 본문 맨 아래에 스크립트를 포함시키지 않아도됩니다.

do.ready()은 파일이 포함될 페이지의 위치를 알 수없는 경우 외부 JS 파일의 코드입니다. <head> 섹션에 포함되어 있으면 나머지 문서가 파싱되기 전에 실행되어 .ready()을 사용해야합니다.

출처

2012-01-28 03:12:08 nnnnnn

언제 이벤트 핸들러에 $ (document) .ready (function()을 사용하지 말아야합니까?

답변

관련 문제