markdown 【Lifcycle】window.onload，jQueryの$（文件）.readyの比较

Posted 2021-05-06

# 【 Lifcycle 】
window.onload、jQueryの$(document).readyの比較

## 【 Difference 】

- タイミング
- 複数の処理を別々に与えられるか

# DOMツリーの構築が終わった時点
```js
// jQuery
$(document).on('ready', function);
$(document).ready(function); // document要素に対して
$().ready(function);         // 空の要素に対して
$(function);                 // 直接（つまり特定の要素に対してではなく）

// JS
document.addEventListener('DOMContentLoaded', function);
```
[jQuery 便利なonを使おう](https://qiita.com/shizuma/items/d561f37f864c3ebb5096)*362

> `addEventListener`での追加は 複数 行っても 全て実行 されます  
ただしJSだと、イベントがすでに発生してしまっているとコールバックは実行されない。  
いつも確実に実行するには、、以下リンク参照  
@link https://www.webprofessional.jp/jquery-document-ready-plain-javascript/

> image要素 $("img") に対してでも document要素 $(document) に対してでも、  
要素 がロードされたタイミング でなく、  
呼び出しは DOM全体のロード が 完了 した時点で 実行されます。  
!! jQuery 3.0では$(handler); 【 以外 】 の構文は推奨されていません。  
> 非効率的で、メソッドの反応について誤解を招きかねないから

## Loaded window, img, Xmlhttprequest

> The onload property of the GlobalEventHandlers mixin is an event handler for the load event of a Window, XMLHttpRequest, \<img> element, etc., which fires when the resource has loaded.

使用回数: 1回のみ

```js
window.onload = function() {
  console.log('onload 1');
}
```

こんな時は jQuery
$(window).load(handler);
  $.event.add(window,'load', handler);
$(window).on('load', handler);

@link https://rcmdnk.com/blog/2015/07/11/computer-javascript-jquery/

# EVENTs
```js
$(document).on('[EVENTs]', function(){.. } // ex
$(document).on('click', function(){.. }
$(document).on('pageinit', function(){.. } // [pageinit, pagecontainerchange,,] is jQMobile.! NEED jQuery.
```
## .onで複数のイベントを設定する
```js
$('.foo').on({
'mouseenter': function(){...},
'mouseleave': function(){...}
});
```
[jQuery 便利なonを使おう](https://qiita.com/shizuma/items/d561f37f864c3ebb5096)*362

jQuery Mobile のソースを確認すると、 jQuery UI から拡張していることが読み取れる.
Libary Image for jQuery Mobile/UI
@link http://normalian.hatenablog.com/entry/20111015/1318703685

# 【 Tips 】 
```js
//Main navigation
$.navigation = $('nav > ul.nav');

//Default colours
$.brandPrimary =  '#20a8d8';

//..

'use strict';

$(document).ready(function($){
  // Add class .active to current link
  $.navigation.find('a').each(function(){

  .. 
```
cool