그림을 그리기 전에 자바스크립트를 실행하는 방법 (DOMContentLoaded 이벤트 사용)
화면 그리기 전에 자바스크립트를 실행하는 방법
설명
화면이 보이지만 불러오는 중이어서 링크를 누르고 싶지 않은 경우도 있다.
이때 일반적으로 알려진'onload'이벤트에서'pointer-events:none'을 지정한다고 생각하지만 이렇게 하면 화면이 그리기 간격을 두고 실행되기 때문에 불러오는 과정에서 사용자가 작업을 하고 예상치 못한 행동을 할 수 있습니다.
그곳에서 이용되는 것은 다음과 같은 활동이다.
<이벤트>
DOMContentLoaded
이것은 "}"의 해석이 완료되었을 때 발생한 이벤트이기 때문에 "}"내의 이미지와 CSS, 자바스크립트를 불러오기 전에 발생합니다.
따라서 이 이벤트를 사용하면 화면을 그리기 전에 실행할 자바스크립트를 실행할 수 있습니다.
구체적인 이용 방법은 다음과 같다.
샘플 프로그램
지정한 불러올 때 사용하지 않는 프로그램을 추가하려면 누르십시오
샘플 프로그램window.addEventListener('DOMContentLoaded', function () {
//bodyタグを取得
var obj = document.querySelector("body");
//bodyタグにクリックイベントを無効化するstyleを追加
obj.setAttribute("style", "pointer-events: none;");
//コンソールへのログ出力
console.log("DOMContentLoadedイベントが実行されました。");
});
확인
정말로 onload 전에 실행되었는지 확인한 결과는 다음과 같다.
검증 프로그램<html lang="jp">
<header>
<meta charset="utf-8"/>
<script>
//onloadイベントとDOMContentLoadedの実行順について
window.addEventListener('load', function () {
var div = document.querySelector("div");
var p = document.createElement('p');
p.innerText = "loadイベントが実行されました。";
div.appendChild(p);
console.log("loadイベントが実行されました。");
});
window.onload=function () {
var div = document.querySelector("div");
var p = document.createElement('p');
p.innerText = "onloadイベントが実行されました。";
div.appendChild(p);
console.log("onloadイベントが実行されました。");
};
window.addEventListener('DOMContentLoaded', function () {
var div = document.querySelector("div");
var p = document.createElement('p');
p.innerText = "DOMContentLoadedイベントが実行されました。";
div.appendChild(p);
console.log("DOMContentLoadedイベントが実行されました。");
});
</script>
</header>
<body>
<div>これは、onloadイベントとDOMContentLoadedの実行順について検証するhtmlです。</div>
</body>
</html>
검증 결과
화면에는 "DomcontentLoaded 이벤트가 실행되었습니다."load 활동이 실행됨앞에 보이기 때문에 onload 앞에서 실행되었음을 알았습니다.
Reference
이 문제에 관하여(그림을 그리기 전에 자바스크립트를 실행하는 방법 (DOMContentLoaded 이벤트 사용)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/KOJI-YAMAMOTO/items/42bf39047d81c78a1a27
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
window.addEventListener('DOMContentLoaded', function () {
//bodyタグを取得
var obj = document.querySelector("body");
//bodyタグにクリックイベントを無効化するstyleを追加
obj.setAttribute("style", "pointer-events: none;");
//コンソールへのログ出力
console.log("DOMContentLoadedイベントが実行されました。");
});
<html lang="jp">
<header>
<meta charset="utf-8"/>
<script>
//onloadイベントとDOMContentLoadedの実行順について
window.addEventListener('load', function () {
var div = document.querySelector("div");
var p = document.createElement('p');
p.innerText = "loadイベントが実行されました。";
div.appendChild(p);
console.log("loadイベントが実行されました。");
});
window.onload=function () {
var div = document.querySelector("div");
var p = document.createElement('p');
p.innerText = "onloadイベントが実行されました。";
div.appendChild(p);
console.log("onloadイベントが実行されました。");
};
window.addEventListener('DOMContentLoaded', function () {
var div = document.querySelector("div");
var p = document.createElement('p');
p.innerText = "DOMContentLoadedイベントが実行されました。";
div.appendChild(p);
console.log("DOMContentLoadedイベントが実行されました。");
});
</script>
</header>
<body>
<div>これは、onloadイベントとDOMContentLoadedの実行順について検証するhtmlです。</div>
</body>
</html>
Reference
이 문제에 관하여(그림을 그리기 전에 자바스크립트를 실행하는 방법 (DOMContentLoaded 이벤트 사용)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/KOJI-YAMAMOTO/items/42bf39047d81c78a1a27텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
