JavaScript 스크립팅 언어의 실행을 트리거해야합니다. 일반적인 접근법은 웹 페이지에 여러 기능을 직접 작성하는 것입니다. 그 중 일부는 코드가로드 될 때 브라우저에서 처리하거나 다음과 유사한 코드를 사용하여 기능과 관련된 기능의 구현을 트리거합니다.
<div id =”링크”onclick =”fun ()”> </div>
위의 코드는 마우스가 링크로 ID가있는 요소를 클릭하면 OnClick 이벤트가 트리거되고 JavaScript를 사용하여 정의 된 재미있는 기능이 실행된다는 것을 의미합니다. 트리거 작업이 HTML 구조에 직접 작성되고 내용과 동작이 분리되지 않으므로 향후 2 차 개발 또는 수정에 불편 함을 유발할 수 있기 때문에이 접근법은 확실히 불합리합니다.
이벤트 처리가 해당 요소에 바인딩되면 해당 요소가로드 된 후에 만 작업을 수행 할 수 있습니다. 처리 된 스크립트가 헤드 영역에 배치되면 브라우저가 오류를보고합니다. 다음 HTML 요소가 아직로드되지 않았기 때문에 헤드의 처리 스크립트가 처리되었습니다.
JavaScript 코드를 실행하는 좋은 방법은 동작 내용을 분리하고 페이지로드 후 처리하는 것입니다. 따라서 JavaScript 코드를 처리 할 때는 리스너 및 창 객체의로드 이벤트를 사용해야합니다.
경청자
청취자의 실제 기능은 동작을 내용과 분리하는 것입니다. 과거에는 JavaScript 관련 기능을 트리거하기 위해 일부 트리거링 이벤트가 필요했습니다. 이제 우리는이 요소의 이벤트를 듣기 위해 JavaScript의 요소에 대한 리스너를 직접 사용합니다. 이 요소가 트리거 되고이 이벤트의 해당 처리 기능이 리스너에 정의되면이 기능이 처리됩니다.
W3C의 표준 방법을 addeventListener라고하며 IE9, Chrome, Firefox 및 Opera에서 지원합니다. 작문 방법은 다음과 같습니다.
window.addeventListener ( 'load', function, false);
IE 초기의 첨부 형 방법은 비슷한 영향을 미칩니다.
window.attachevent ( 'onload', function);
리스너를 사용하는 방법도 매우 간단합니다. 먼저 페이지에서 요소를 얻은 다음이 요소의 리스너를 사용하여 청취 이벤트 및 해당 이벤트 처리 기능을 정의하는 것입니다. 예를 들어 위 :
document.getElementById ( 'link'). addeventListener ( 'click', fun, false);
모니터 사용에 대한 자세한 내용은 기사 끝의 보충 정보를 참조하십시오.
Window.onload 이벤트
온로드 이벤트는 전체 페이지가 완전히로드 된 경우에만 트리거됩니다. JavaScript 코드를 Onload 이벤트에 작성하면 HTML 요소가로드 된 후 브라우저가 JavaScript 코드를 처리 할 수 있습니다. 기본 글쓰기 :
Window.onload = function () {// code}이러한 방식 으로이 기능의 코드는로드 후 처리됩니다. 그러나이 방법에는 단점이 있으며,이 기능은이 기능에만 사용할 수 있습니다. 여러 Window.onload 이벤트는 페이지에 나타날 수 없습니다. 여러 온로드 이벤트가 발생하면 후속 컨텐츠가 이전 컨텐츠를 덮어 씁니다.
그런 다음이 작업을 수행하고 Window.onload 이벤트에로드 해야하는 모든 기능 이름을 작성한 다음 외부 기능을 정의 할 수 있습니다.
Window.onload = function () {func1 (); func2 (); } function func1 () {…} function func2 () {…}이것은 괜찮지 만로드 할 모든 기능 이름을 작성해야하기 때문에 매우 불편하며 수정하는 것이 매우 번거 롭습니다. 물론 해결책이 있어야합니다. JQuery는 매우 강력한 멀티 스크립트 로딩 방법을 제공하므로 기본 JavaScript를위한 솔루션이 있어야합니다.
Window.onload는 여러 기능을 동시에 처리합니다
처리 기능을 작성하고 코드를 먼저 살펴 봐야합니다.
함수 addloadListener (fn) {if (typeof window.adeventListener! = 'undefined') {window.adeventListener ( 'load', fn, false); } else if (typeof document.adeventListener! = 'undefined') {document.addeventListener ( 'load', fn, false); } else if (typeof window.attachevent! = 'undefined') {window.attachevent ( 'onload', fn); } else {var oldfn = window.onload; if (typeof window.onload! = 'function') {window.onload = fn; } else {window.onload = function () {Oldfn (); fn (); }; }}}이 사용자 정의 addloadlistener 함수를 구문 분석하여 함수 이름을 매개 변수로 전달하겠습니다. 먼저 브라우저가 관련 리스너를 지원하는지 여부를 결정합니다. 리스너를 지원하는 경우 리스너를 사용하여 Window Object의 Onload 이벤트를 듣고이 기능을 처리합니다. 이 코드는 IF 문을 사용하여 모든 브라우저의 청취 이벤트를 판단하며 크로스 브라우저 호환입니다.
이 코드를 JavaScript 코드 세그먼트의 맨 위에 놓은 다음 아래 관련 기능을 정의한 다음 다음 문을 사용하여 JavaScript 기능을로드합니다.
addloadListener (func); function func () {…}이러한 방식으로 페이지를로드 한 후에는 모든 JavaScript 기능을 처리해야합니다. AddloadListener 기능을 직접 사용할 수 있으며 여러 기능을 사용할 수 있습니다. 일반적으로, 예상치 못한 상황을 피하기 위해 Onload 이벤트를 사용하여 모든 JavaScript를로드하는 것이 가장 좋습니다.