DNET_JavaScriptEvents

JavaScriptのイベント処理

• 戻る

概要

イベント処理は

• イベントリスナーにイベントハンドラ（delegate）を設定する。
• jQueryでも記述できる。

初期処理

load

loadイベントは以下のように記述できる。

• window.onloadを使う。

  window.onload = function() {
    // ・・・処理・・・
  };

• addEventListenerを使う。

  window.addEventListener("load", function() {
    // ・・・処理・・・
  }, false);

ready

jQueryのreadyメソッドを使用する。

$(document).ready(function () {
  // ・・・処理・・・
});

• 参考
  • ready(fn) - jQuery 日本語リファレンス
    http://semooh.jp/jquery/api/events/ready/fn/

比較

• loadは、画像などのリソースのロードが済んだ時点、
  タグがロードされていないと処理できない初期処理はコチラで処理する。

• readyはDOMロード後なのでonLoadより早いタイミングで動き出す。

• 参考

  • $(document).ready() と $(window).load() の違い | こととこネット
    http://blog.cototoco.net/work/201308/window-onload-%E3%81%A8jqurydocument-ready-%E3%81%AE%E9%81%95%E3%81%84/

参考

JavaScript

• イベントリファレンス - Web 技術のリファレンス | MDN
  https://developer.mozilla.org/ja/docs/Web/Reference/Events
• EventTarget.addEventListener - Web API インターフェイス | MDN
  https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener

jQuery

• Events - jQuery 日本語リファレンス
  http://semooh.jp/jquery/api/events/
• jQuery： イベントに応じて処理を実行するには？（イベントメソッド） - Build Insider
  http://www.buildinsider.net/web/jqueryref/015

移行メモ

• PukiWiki のページ内アンカ（#xxxxxxxx）は GitHub Wiki では再現できないため、 同一ページ内のアンカは見出しから生成されるアンカに張り替えた。

---

Tags: 移行, JavaScript, イベント処理, addEventListener, onload, jQuery, ready