【脱jQuery】JavaScriptだけでイベント処理を行う

ページ読み込み完了時に処理を実行する

jQuery

$(document).ready(eventHandler);
// または
$(document).ready(() => {
  // 処理
);

JavaScript

document.addEventListener('DOMContentLoaded', eventHandler);
// または
document.addEventListener('DOMContentLoaded', () =>{
  // 処理
);

scriptタグにasync属性をつけた場合

<script src="hoge.js" async属性></script>のようにscriptタグにasync属性を付けると、ブラウザはJavaScriptの読み込み(ダウンロード)を待たずにレンダリングを行う。そのため、DOMContentLoadedイベントハンドラの登録が行われる前にレンダリングが完了してしまう可能性がある。
そのような場合は、document.readyStateの値がloadingかどうかをチェックするとよい。

if (document.readyState === 'loading') {
  // レンダリングが完了していない場合
  document.addEventListener('DOMContentLoaded', eventHandler);
} else {
  // レンダリングが完了している場合
  eventHandler();
}

jQueryのonメソッドをJavaScriptだけで記述する

jQuery

$('#hoge').on('click', eventHandler);

JavaScript

document.getElementById('hoge').addEventListener('click', eventHandler);

後から追加された要素でもイベントハンドラが実行されるようにする(2020/4/16追記)


【新しい記事】

【古い記事】

コメントを残す

メールアドレスが公開されることはありません。