효율적인 웹 프론트 엔드 프로그램을 만드는 방법은 프론트 엔드 개발을 할 때마다 무의식적으로 고려할 문제입니다. 몇 년 전, Yahoo의 멋진 프론트 엔드 엔지니어들은 웹 프론트 엔드의 성능 향상에 관한 책을 출판하여 전체 웹 개발 기술 산업에서 센세이션을 일으켜 신비한 웹 프론트 엔드 최적화 질문을 거리의 양배추를 만들었으며 웹 프론트 엔드 최적화는 모두 Novices와 Big Giants가 모두 대답 할 수있는 간단한 질문이되었습니다. 전체 산업이 충격적인 비밀에 대한 해답을 알면 기존 최적화 기술은 더 이상 개발 한 웹 사이트에 대한 질적 도약을 생산할 수 없습니다. 웹 사이트의 성능을 발휘하기 위해서는 다른 사람들의 웹 사이트보다 더 잘 발전하기 위해서는 더 깊이 생각하고 더 나은 기술을 예약해야합니다.
JavaScript의 이벤트 시스템은 내가 생각하는 첫 번째 획기적인 지점입니다. JavaScript 이벤트 시스템 인 이유는 무엇입니까? 우리는 웹 프론트 엔드에 HTML, CSS 및 JavaScript의 세 가지 기술이 포함되어 있음을 알고 있습니다. 스타일, 클래스, ID 및 HTML 태그와 같은 HTML과 CSS가 어떻게 결합되는지는 분명합니다. 이야기 할 것이 없지만 JavaScript가 HTML과 CSS 사이의 중간으로 들어가서 세 가지를 통합하게하는 방법은 무엇입니까? 마지막으로, 나는이 진입 지점이 JavaScript의 이벤트 시스템이라는 것을 알았습니다. 우리가 쓰는 JavaScript 코드의 길거나 복잡한 JavaScript 코드에 관계없이 이벤트 시스템을 통해 HTML 및 CSS에 궁극적으로 반영됩니다. 따라서 이벤트 시스템이 세 가지의 통합의 진입 점이기 때문에, 특히 오늘날의 복잡한 웹 페이지에서 페이지에 필연적으로 많은 이벤트 작업이있을 것이라고 생각했습니다. 이러한 이벤트가 없으면 우리가 신중하게 쓴 JavaScript 코드는 도서관에서만 사용할 수 있으며 영웅은 쓸모가 없습니다. 페이지에 많은 수의 이벤트 기능이 있으므로 이벤트 기능을 작성할 때 효율성에 영향을 미치는 문제가 있습니까? 내가 연구 한 대답은 그것이 실제 효율성 문제이며 심각한 효율성 문제라는 것입니다.
내 대답을 명확히하기 위해 JavaScript의 이벤트 시스템을 자세히 설명하고 싶습니다.
이벤트 시스템은 JavaScript, HTML 및 CSS의 융합의 진입 점입니다. 이 점은 Java의 주요 기능과 같습니다. 모든 마법이 여기에서 시작됩니다. 그렇다면 브라우저는이 항목을 어떻게 완료합니까? 나는 세 가지 방법을 연구했습니다.
방법 1 : HTML 이벤트 처리
HTML 이벤트 처리는 이벤트 기능을 HTML 태그에 직접 작성하는 것입니다. 이 쓰기 방법은 HTML 태그와 밀접하게 결합되므로 HTML 이벤트 처리라고합니다. 예를 들어 다음 코드 :
코드 사본은 다음과 같습니다.
<입력 유형 = "button"id = "btn"name = "btn"onclick = "alert ( 'click me!')"/>
클릭 이벤트 기능이 복잡한 경우 이와 같은 코드를 작성하면 불편을 겪게됩니다. 따라서 우리는 종종 기능을 외부에 쓰고 ONCLICK ONCLICK 기능 이름을 직접 호출합니다.
코드 사본은 다음과 같습니다.
<입력 유형 = "button"id = "btn"name = "btn"onclick = "btnclk ()"/>
함수 btnclk () {
경고 ( "클릭하십시오!");
}
위의 글쓰기 방법은 매우 아름다운 글쓰기 방법이므로 많은 사람들이 무의식적으로 그것을 사용할 것이지만, 많은 사람들이 후자의 글쓰기 방법이 이전의 작문 방법만큼 강력하지 않다는 것을 알지 못할 수도 있습니다. 이는 프론트 엔드 최적화의 원칙에 따라 JavaScript 코드가 종종 페이지 하단에 위치하기 때문에 얼마 전까지 만해도 비 차단 로딩 스크립트 기술을 연구 할 때 발생하는 문제이기도합니다. 페이지가 스크립트로 차단되면 HTML 태그에 참조 된 기능이 아직 실행되지 않았을 수 있습니다. 현재 페이지 버튼을 클릭하면 결과가 "XXX 함수는 정의되지 않은 오류"가보고됩니다. JavaScript에서는 이러한 오류는 시도 앤 캐치에 의해 잡히게됩니다. 따라서 코드를보다 강력하게 만들려면 다음과 같은 재 작성이 있습니다.
코드 사본은 다음과 같습니다.
<input type = "button"id = "btn"name = "btn"onclick = "try {btnclk ();} catch (e) {}"/>
위의 코드를 보는 것은 역겨운 사람이 설명 할 수있는 것이 아닙니다.
방법 2 : DOM0 레벨 이벤트 처리
DOM0 레벨 이벤트 처리는 오늘날 모든 브라우저에서 지원하는 이벤트 처리입니다. 호환성 문제가 없습니다. 그러한 문장을 보면 웹 프론트 엔드를하는 모든 사람이 흥분하게 만듭니다. DOM0 이벤트 처리의 규칙은 다음과 같습니다. 각 DOM 요소는 자체 이벤트 처리 속성이 있으며 다음 코드와 같은 함수를 할당 할 수 있습니다.
코드 사본은 다음과 같습니다.
var btndom = document.getElementById ( "btn");
btndom.onclick = function () {
경고 ( "클릭하십시오!");
}
DOM0 레벨 이벤트에 의해 처리 된 이벤트 속성은 "on+이벤트 이름"형식으로 정의되며 전체 속성은 소문자로 표시됩니다. DOM 요소는 JavaScript 코드의 JavaScript 객체라는 것을 알고 있으므로 JavaScript 객체의 관점에서 다음 코드와 같은 DOM0- 레벨 이벤트 처리를 이해하기가 매우 쉽습니다.
코드 사본은 다음과 같습니다.
btndom.onclick = null;
버튼 클릭 이벤트가 취소됩니다.
다음 코드를 살펴 보겠습니다.
코드 사본은 다음과 같습니다.
btndom.onclick = function () {
경고 ( "클릭하십시오!");
}
btndom.onclick = function () {
Alert ( "Me1111을 클릭하십시오!");
}
다음 함수는 첫 번째 함수를 덮어 씁니다.
방법 3 : DOM2 이벤트 처리 및 IE 이벤트 처리
DOM2 이벤트 처리는 표준화 된 이벤트 처리 솔루션이지만 IE 브라우저는 일련의 함수 세트를 개발했으며 기능은 DOM2 이벤트 처리와 유사하지만 코드는 그와 다릅니다.
방법 3을 설명하기 전에 몇 가지 개념을 추가해야합니다. 그렇지 않으면 방법 3의 의미를 설명 할 수 없습니다.
첫 번째 개념은 이벤트 흐름입니다
Page Development에서, 우리는 종종이 상황에 직면합니다. 페이지의 작업 간격은 JavaScript의 문서로 표시 될 수 있습니다. 페이지에 div가 있습니다. DIV는 문서 요소를 오버레이하는 것과 같습니다. Div에는 버튼 요소가 있습니다. 버튼 요소는 DIV를 오버레이하고 문서를 오버레이하는 것과 같습니다. 따라서 문제는이 버튼을 클릭하면이 클릭 동작이 실제로 버튼에서 발생하지 않을 것입니다. DIV와 문서는 클릭 작업에 사용됩니다. Logic에 따르면,이 세 가지 요소는 클릭 이벤트를 유발할 수 있습니다. 이벤트 스트림은 위 시나리오의 개념을 설명합니다. 이벤트 스트림은 페이지에서받은 이벤트 순서를 의미합니다.
두 번째 개념 : 이벤트 버블 및 이벤트 캡처
이벤트 버블은 Microsoft가 이벤트 흐름 문제를 해결하기 위해 제안한 솔루션이며, 이벤트 캡처는 Netscape에서 제안한 이벤트 흐름 솔루션입니다. 그들의 원칙은 다음과 같습니다.
버블 링 이벤트는 DIV로 시작하고, 신체와 마지막으로 문서로 시작하고, 이벤트 캡처가 뒤집어지고, 먼저 문서, 신체, 그리고 마지막으로 대상 요소 DIV. 대조적으로, Microsoft의 솔루션은 더 인간적이고 사람들의 운영 습관과 일치하며 Netscape의 솔루션은 매우 어색합니다. 이것이 브라우저 전쟁의 결과입니다. Netscape는 느리게 진행되며 사용자가 사용하는 코드를 희생하여 이벤트 흐름 문제를 해결합니다.
Microsoft는 일반적으로 업계에서 IE 이벤트 처리로 알려진 버블 이벤트와 함께 새로운 이벤트 시스템을 설계했습니다. IE 이벤트 처리 방법은 다음 코드와 같습니다.
코드 사본은 다음과 같습니다.
var btndom = document.getElementById ( "btn");
btndom.attachevent ( "onclick", function () {
경고 ( "클릭하십시오!");
});
IE 하에서 DOM 요소의 첨부 파일 이벤트 방법을 통해 이벤트를 추가하십시오. DOM0 이벤트 처리와 비교하여 이벤트 추가 방법은 속성에서 메소드로 변경되었으므로 이벤트를 추가 할 때 매개 변수를 메소드로 전달해야합니다. AttachmentEvent 메소드는 두 개의 매개 변수를 수신합니다. 첫 번째 매개 변수는 이벤트 유형입니다. 이벤트 유형의 이름 지정은 DOM0 이벤트 처리에서 이벤트 명명과 동일합니다. 두 번째 매개 변수는 이벤트 기능입니다. 이 방법을 사용하는 장점은 다음과 같이 동일한 요소에 클릭 이벤트를 추가하는 경우입니다.
코드 사본은 다음과 같습니다.
btndom.attachevent ( "onclick", function () {
경고 ( "클릭하십시오!");
});
btndom.attachevent ( "onclick", function () {
경고 ( "나를 클릭하십시오!");
});
실행하면 두 대화 상자 모두 정상적으로 나타나서 DOM 요소에 여러 개의 다른 클릭 이벤트를 추가 할 수 있습니다. 이벤트를 원하지 않으면 어떻게해야합니까? 우리는 무엇을해야합니까? 이벤트 삭제를위한 분리 방법을 제공합니다. 매개 변수 목록은 첨부 베팅과 동일합니다. 특정 클릭 이벤트를 삭제하려면 다음 코드와 같이 ADD 이벤트와 동일한 매개 변수를 전달하십시오.
코드 사본은 다음과 같습니다.
btndom.detachevent ( "onclick", function () {
경고 ( "나를 클릭하십시오!");
});
그것을 실행할 때, 결과는 매우 심각하고 우리는 혼란스러워합니다. 두 번째 클릭은 삭제되지 않았습니다. 무슨 일이야? 앞에서 이벤트를 삭제하려면 이벤트 추가와 같은 매개 변수를 전달해야한다고 언급했습니다. 그러나 JavaScript의 익명 함수에서 두 익명 함수의 코드가 정확히 동일하더라도 JavaScript는 다른 변수를 사용하여 내부적으로 저장합니다. 결과적으로, 우리가 보는 현상은 클릭 이벤트를 삭제할 수 없으므로 코드는 다음과 같이 작성해야합니다.
코드 사본은 다음과 같습니다.
var ftn = function () {
경고 ( "나를 클릭하십시오!");
};
btndom.attachevent ( "onclick", ftn);
btndom.detachevent ( "onclick", ftn);
이러한 방식으로 삭제 된 메소드가 추가되고 메소드가 동일한 객체를 가리므로 이벤트가 성공적으로 삭제되었습니다. 여기의 시나리오는 우리가 작전을 독립적으로 정의 해야하는 이벤트를 작성해야하며 익명 기능을 습관으로 사용하지 않아야한다는 좋은 습관이 필요하다는 것을 알려줍니다.
다음은 DOM2 이벤트 처리이며, 그 원리는 다음 그림에 나와 있습니다.
DOM2는 표준화 된 이벤트입니다. DOM2 이벤트를 사용하면 이벤트 전달은 캡처 방법, 즉 문서에서 그리고 신체로 시작됩니다. DIV는 중개 지점입니다. 이벤트가 중개 지점에 도달하면 이벤트는 대상 단계에 있습니다. 이벤트가 대상 단계에 들어가면 이벤트가 기포와 처리하기 시작하고 마지막으로 이벤트가 문서에서 끝납니다. (이 기사에서 문서화를 지적하고 있지만 실제 상황은 일부 브라우저가 이벤트를 캡처하고 창에서 버블을 끝내기 시작한다는 것입니다. 그러나 개발 중에 브라우저 자체가 어떻게 설정되어 있더라도 문서에주의를 기울일 수 있으므로 여기에 문서를 사용하는 것이 더욱 발전 지향적이라고 생각합니다). 사람들은 거품의 일부로 대상 단계를 기포의 일부로 분류하는 데 사용됩니다. 주로 거품 이벤트가 개발에 더 널리 사용되기 때문입니다.
DOM2 이벤트 처리는 매우 어렵습니다. 각 이벤트가 트리거되면 모든 요소가 두 번 횡단됩니다. IE 이벤트와 비교할 때, 성능은 IE 이벤트보다 훨씬 나쁩니다. 나는 단지 버블 링이므로 한 번만 횡단하면됩니다. 그러나 트래버스가 적다는 것이 IE 이벤트 시스템이 더 효율적이라는 것을 의미하지는 않습니다. 동시에 두 가지 이벤트 시스템을 지원하면 개발 및 설계의 관점에서 개발에 더 큰 유연성을 제공합니다. 이러한 관점에서, DOM2 사건은 여전히 매우 바람직하다. DOM2 이벤트 코드는 다음과 같습니다.
코드 사본은 다음과 같습니다.
var btndom = document.getElementById ( "btn");
btndom.addeventListener ( "클릭", function () {
경고 ( "클릭하십시오!");
},거짓);
var ftn = function () {
경고 ( "나를 클릭하십시오!");
};
btndom.addeventListener ( "클릭", ftn, false);
DOM2 이벤트 처리에 이벤트를 추가하면 addeventListener를 사용하여 IE 이벤트 처리보다 하나 더 매개 변수를 수신합니다. 처음 두 가지는 IE 이벤트 처리 방법의 두 매개 변수와 동일합니다. 유일한 차이점은 첫 번째 매개 변수에서 접두사가 제거되고 세 번째 매개 변수는 부울 값이라는 것입니다. 값이 참이면 값이 값으로 캡처 모드에서 처리됩니다. 이벤트는 거품으로 처리됩니다. 세 번째 매개 변수를 사용하면 DOM2 이벤트 처리에서 이벤트 요소를 두 번 실행 해야하는 이유를 이해할 수 있습니다. 목적은 두 이벤트 모델과 호환되는 것입니다. 그러나 여기서 우리가 포착 또는 거품을 선택하든 두 개의 횡단은 영원히 수행 될 것입니다. 하나의 이벤트 처리 방법을 선택하면 다른 이벤트 처리 프로세스에서는 이벤트 처리 기능이 트리거되지 않습니다. 이것은 중립 기어로 자동차를 공전시키는 원리와 동일합니다. DOM2 이벤트 방법의 설계를 통해 DOM2 이벤트는 런타임에서 두 가지 이벤트 처리 방법 중 하나만 실행할 수 있음을 알고 있습니다. 두 이벤트 스트림 시스템이 동시에 자극하는 것은 불가능합니다. 따라서 요소가 두 번 가로 지르지 만 이벤트 함수는 두 번 유발할 수 없습니다. 이벤트 함수를 말하는 두 번이나 유발되지 않음을 의미합니다. 실제로 다음 코드와 같은 두 이벤트 스트림 모델이 동시에 실행되는 상황을 시뮬레이션 할 수 있습니다.
코드 사본은 다음과 같습니다.
btndom.addeventListener ( "클릭", ftn, true);
btndom.addeventListener ( "클릭", ftn, false);
그러나 이러한 글쓰기 방식은 다중 이벤트 처리이며 버튼을 두 번 클릭하는 것과 같습니다.
DOM2는 또한 이벤트를 삭제하는 함수를 제공합니다. 이 기능은 다음과 같이 작성된 removeEventListener입니다.
코드 사본은 다음과 같습니다.
btndom.removeeventListener ( "클릭", ftn, false);
IE 이벤트에 대해서도 마찬가지입니다. 즉, 매개 변수는 이벤트를 정의하는 매개 변수와 일치해야합니다. 그러나 removeEventListener를 사용할 때는 세 번째 매개 변수가 전달되지 않습니다. 기본값은 세 번째 매개 변수가 전달되지 않으면 기본값이 거품이므로 버블 이벤트를 삭제하는 것입니다. 예를 들어:
코드 사본은 다음과 같습니다.
btndom.addeventListener ( "클릭", ftn, true);
btndom.removeeventListener ( "클릭", ftn);
실행하고 이벤트가 성공적으로 삭제되지 않았 음을 찾으십시오.
마지막으로, IE9 이상을 포함하여 IE9에서 DOM2 이벤트 처리가 잘 지원되고 아래의 IE8은 DOM2 이벤트를 지원하지 않는다고 말하고 싶습니다.
다음과 같이 아래의 세 가지 이벤트 방법을 비교해 봅시다.
비교 1 : 한쪽의 한 방법과 다른 두 방법의 비교
방법 1을 작성하는 방법은 HTML과 JavaScript를 결합하는 것입니다. 당신은 나와 당신이 있습니다. HTML 및 JavaScript의 혼합 개발을 달성하기 위해이 방법을 심화시킵니다. 소프트웨어 용어에서는 코드 커플 링입니다. 코드 커플 링은 좋지 않으며 매우 나쁩니다. 이것은 신인 프로그래머의 수준이므로 방법이 완전히 패배하면 다른 두 가지 방법이 이길 것입니다.
비교 2 : 방법 2 및 방법 3
두 사람은 같은 방식으로 작성되었습니다. 때로는 누가 더 나은지 더 나쁘게 말하기가 어렵습니다. 위의 내용을 살펴보면 모드 2와 모드 3의 가장 큰 차이점은 DOM 요소에 단 하나의 이벤트 만 있고 모드 3은 DOM 요소의 이벤트가 여러 이벤트 처리 기능을 갖도록 허용 할 수 있다는 것입니다. DOM2 이벤트 처리에서 모드 3을 사용하면 이벤트 흐름 방법을 정확하게 제어 할 수 있습니다. 따라서 모드 3의 기능은 모드 2보다 강력하므로 모드 3과 비교할 때 약간 더 좋습니다.
다음은이 기사의 초점입니다. 이벤트 시스템의 성능 문제. 성능 문제를 해결하려면 초점을 찾아야합니다. 여기서는 두 가지 초점 포인트의 이벤트 시스템의 성능 문제에 대해 생각할 것입니다.
우선, 트래버스의 수. 이벤트 스트림을 캡처하든 버블 링 이벤트 스트림을 캡처하든, 요소를 가로 지르지 만 상단 창이나 문서에서 시작하는 모든 트래버스가됩니다. 페이지의 DOM 요소에 깊은 부모-자식 관계가있는 경우, 당신이 횡단하는 요소가 많을수록 DOM2 이벤트 처리와 같이 더 유해할수록 순회가 커질 수 있습니다. 이 이벤트 스트림의 횡단 문제를 해결하는 방법은 무엇입니까? 내 대답은 아니오입니다. 여기에 일부 친구들은 질문이있을 수 있습니다. 어떻게 더 이상 없습니까? 이벤트 시스템에는 이벤트 객체가 있으며 이벤트입니다. 이 객체에는 버블 링 또는 캡처 이벤트를 방지하는 방법이 있습니다. 왜 아무도 없다고 말합니까? 이 친구의 질문은 의미가 있지만,이 방법을 사용하여 횡단을 줄이려면 코드가 아버지와 아들 요소와 할아버지 요소 관계의 관계를 다룰 것입니다. 페이지 요소가 많이 중첩되면이 작업을 완료 할 수없는 작업이므로 대답은 Traversal 문제를 변경할 수 없으며 적응할 수 있다는 것입니다.
트래버스를 줄이면 이벤트 시스템의 성능 문제를 해결할 수 없으므로 이제 메모리 소비 만 고려할 수 있습니다. 나는 종종 사람들이 C#이 매우 유용하다고 말하지만 웹 프론트 엔드 개발에 더 좋습니다. C# IDE의 페이지로 버튼을 직접 드래그 할 수 있습니다. 버튼이 페이지에 도달하면 JavaScript 코드가 자동으로 버튼에 이벤트를 추가합니다. 물론 내부의 이벤트 기능은 빈 기능입니다. 그래서 우리는이 방법으로 페이지에 100 개의 버튼을 놓을 수 있다고 생각합니다. 단일 코드가 작동하지 않으면 100 개의 버튼 이벤트 처리가있어 매우 편리합니다. 마지막으로 버튼 중 하나에 특정 버튼 이벤트를 추가하여 페이지를 실행합니다. 이 페이지가 효율적입니까? JavaScript에서는 각 기능이 객체이며 각 객체는 메모리를 소비 하므로이 쓸모없는 99 이벤트 기능 코드는 많은 귀중한 브라우저 메모리를 소비해야합니다. 물론, 우리는 실제 개발 환경에서는이 작업을 수행하지 않지만 오늘날 Ajax 인기 및 단일 페이지 개발 시대에는 미쳤고 인기가 높습니다. 웹 페이지에는 많은 이벤트가 있습니다. 즉, 각 이벤트에는 이벤트 기능이 있지만 모든 작업에는 하나의 이벤트 만 트리거됩니다. 현재 다른 사건은 누워있는 동안 자고 있으며, 이는 역할을하지 않고 컴퓨터 메모리를 소비합니다.
우리는이 상황을 바꿀 수있는 해결책이 필요하며 실제로 그러한 해결책이 실제로 있습니다. 이 계획을 명확하게 설명하기 위해 배경 지식을 먼저 추가하고 싶습니다. DOM2 이벤트 처리에 대한 논의에서 대상 객체의 개념을 언급했습니다. DOM2 이벤트 처리 방법을 제쳐두고 캡처 이벤트 처리 및 버블 이벤트 처리에는 대상 객체의 개념이 있습니다. 대상 객체는 이벤트의 특정 작동의 DOM 요소입니다. 예를 들어, 클릭 버튼 작업의 버튼은 대상 객체입니다. 어떤 이벤트 처리 방법에 관계없이, 이벤트 함수에는 이벤트 객체가 포함됩니다. 이벤트 객체에는 속성 대상이 있고 대상은 항상 대상 객체를 가리키며 이벤트 객체는 다른 속성 인 CurrentTarget을 가지고 있으며, 이는 캡처 또는 버블 이벤트로 흐르는 DOM 요소를 가리 킵니다. 위의 설명에서, 우리는 그것이 캡처 이벤트인지 버블 이벤트인지 여부에 관계없이 이벤트 흐름이 문서로 흘러 나옵니다. 문서에 클릭 이벤트가 추가되고 페이지의 버튼이 클릭 이벤트가 추가되지 않으면 버튼을 클릭하면 문서의 클릭 이벤트가 트리거됩니다. 문서 클릭 이벤트가 트리거되면 이벤트 대상의 대상은 문서가 아닌 버튼이므로 다음과 같은 코드를 쓸 수 있다는 세부 사항이 있습니다.
코드 사본은 다음과 같습니다.
<입력 유형 = "버튼"id = "btn"name = "btn"value = "button"/>
<a href = "#"id = "aa"> aa </a>
document.addeventListener ( "Click", function (evt) {
var target = evt.target;
스위치 (target.id) {
사례 "BTN":
경고 ( "버튼");
부서지다;
"AA"사례 :
경고 ( "a");
부서지다;
}
},거짓);
그것을 실행하면, 우리는 효과가 버튼을 별도로 쓴 이벤트와 동일하다는 것을 알았습니다. 그러나 그 이점은 자명합니다. 하나의 함수는 전체 페이지의 이벤트 기능을 처리하고 이벤트 기능은 유휴 상태가 아니므로 완벽합니다. 이 계획에는 전문적인 이름이 있습니다 : 이벤트 대표단. JQuery의 대표 방법은이 원칙에 따라 수행됩니다. 실제로, 이벤트 대표단의 효율성은 이벤트 기능의 감소에 반영 될뿐만 아니라 DOM 트래버스 작업을 줄입니다. 예를 들어, 위의 예에서는 문서에 함수를 추가합니다. 이 문서는 페이지의 최상위 객체이며 읽기의 효율성은 매우 높습니다. 특정 객체 이벤트와 관련하여 DOM 작업을 사용하지 않고 이벤트 객체의 대상 속성을 사용합니다. 이 모든 것은 한 문장으로만 요약 될 수 있습니다. 정말 빠르며, 빠른 이유는 없습니다.
이벤트 대표단은 또한 우리에게 훌륭한 부산물을 가져올 수 있습니다. jQuery를 사용한 친구는 라이브 방법을 사용해야했습니다. 라이브 방법의 기능은 페이지 요소에 이벤트 작업을 추가 할 수 있다는 것입니다. 이 요소가 현재 페이지에 존재하지 않더라도 이벤트를 추가 할 수 있습니다. 이벤트 대표단 메커니즘을 이해 한 후에는 라이브 원리를 이해하기 쉽습니다. 실제로 JQuery의 Live는 이벤트 대표단을 통해 이루어지며 Live는 이벤트를 추가하는 효율적인 방법입니다.
이벤트 대표단을 이해 한 후에는 jQuery의 바인드 방법이 비효율적 인 방법임을 알 수 있습니다. 원래 이벤트 정의 방법을 사용하기 때문에 바인드를주의해서 사용해야합니다. 실제로 JQuery 개발자들 도이 문제를 발견했습니다. jQuery의 새로운 버전에는 ON 메소드가 있습니다. ON 메소드에는 바인드, 라이브 및 대표 방법의 모든 기능이 포함되어 있습니다. 따라서이 기사를 읽은 친구들은 이벤트를 추가하고 이벤트를 추가하기 위해 기능을 사용하는 이전 방법을 포기해야합니다.
이벤트 대표단은 또 다른 장점이 있습니다. 위의 기사에서 이벤트 대표단의 예에서 문서에 이벤트를 추가했습니다. 여기서 나는 비교하고 싶습니다. jQuery에서는 다음과 같이 DOM 요소 이벤트의 정의를 준비된 방법에 넣는 데 사용됩니다.
코드 사본은 다음과 같습니다.
$ (document) .ready (function () {
xxx.bind ( "클릭", function () {});
});
페이지 DOM 문서가로드 된 후 준비된 기능이 실행됩니다. Onload 기능보다 먼저 실행됩니다. 이것은 미리 많은 이점이 있습니다. 이점 중 하나는 성능을 향상시키는 것입니다. jQuery와 같은 이벤트의 정의는 또한 표준 관행입니다. 나는 일부 친구들이 준비된 외부의 특정 이벤트를 묶어야한다고 생각하고 마지막으로 버튼이 유효하지 않다는 것을 알게됩니다. 이 잘못된 시나리오는 때때로 잠시 시간이 걸리며 잠시 후에는 괜찮을 것입니다. 따라서 우리는 종종이 문제의 원리를 무시하고 준비된 기능에서 이벤트를 바인딩하지 않습니다. 이 작업은 실제로 DOM이로드되기 전에 이벤트를 바인딩하는 것이며,이 기간 동안 실제로 이벤트를 바인딩합니다. , 일부 요소는 페이지에 구성되지 않았으므로 이벤트 바인딩이 유효하지 않을 것입니다. 따라서 이벤트를 정의 할 준비가 된 이유는 페이지의 모든 요소가로드 된 후 DOM 요소의 이벤트를 정의하도록로드되도록하기 때문입니다. 그러나 이벤트 대의원을 사용할 때는 문제를 피할 수 있습니다. 예를 들어, 문서에 이벤트를 바인딩하면 문서가 전체 페이지를 나타내므로이를로드하는 것이 가장 빠른시기입니다. 따라서 문서에서 이벤트 대의원을 달성하기가 어렵고 브라우저가 "XXX 기능을 정의하지 않은"보고하기가 어렵습니다. 이 기능을 요약하기 위해 : 이벤트 대의원 코드는 모든 페이지로드 단계에서 실행할 수 있으며, 이는 개발자에게 웹 페이지 성능을 향상 시키거나 웹 페이지 효과를 향상시키는 데 더 큰 자유를 제공합니다.
좋아,이 기사는 작성되었습니다. 안녕히 주무세요.