functionは$(function(){が不要か

Question

<button onclick="functionName();">実行</button>

<script>
$(function(){
  $('button').click(function(){
    alert('hoge');
  });
};

function functionName(){
  alert('hoge');
}
</script>

functionName（）は何処に置いてもonclickで実行されますが、画面表示から速攻でonclickすると処理できないケースなどあるのでしょうか？

Comments

[m.ts10806]

回答した後に気づいたのですが
メソッドなのでfunction を冒頭につけておかないとエラーになりますよ。　> functionName(){

[x_x]

質問内容が編集されて$(function(){についての文言がなくなりましたが、不要になったということなのでしょうか？
見出しと合わなくなってしまいますし、すでについた回答とも不整合を起こしています。

[miyabi_pudding]

しかもくっつきの
functionName()じゃなくなってるし。
それはちょっとずるいのでは？質問者さん。
そこは、指摘があったので、修正しましたなど、一言追加しましょう。

Answer 1

呼び出されて初めて実行されるからです。

すごーーーく厳密にいうと、<button onclick="functionName();">実行</button>が読み込まれてからfunctionName(){が読み込まれるまでの間にボタンがクリックされれば未定義エラーになるはずです。

Comments

[m.ts10806]

気になった
> HTML→CSS→JS→画像の順番で読み込みされるはず

これは、HTMLに書いた順番に読み込まれるはず、です。
読み込み＝実行というわけでもないですね。

Answer 2

混同されているのでは。

buttonをクリックした際の挙動でclickメソッドを使う場合は「要素がきちんと読み込まれてから」処理するために「$(function(){...});」を使用しますが、

「要素がきちんと読み込まれてから」とは、ハンドラ|リスナを定義する対象要素の話です。ここで言うとbutton要素のことです。

「onclick」でfunctionを実行する場合はそれが不要なのはなぜでしょうか？

そういうわけで、「onclick」でハンドラを定義する場合、その属性を持っている要素が存在することは自明ですから、必ず「要素がきちんと読み込まれてから」処理されることになります。

画面表示から速攻でonclickすると処理できないケースなどあるのでしょうか？

たとえば、↓これはエラーになります。

<button onclick="functionName();">実行</button>
<script>
$('button').click();
</script>
<script>
function functionName(){
  alert('hoge');
}
</script>

しかし、これは関数定義と実行のタイミングの問題であって、「要素がきちんと読み込まれてから」という話とは関係ありません。

質問の変更にあわせて追記

functionName（）は何処に置いてもonclickで実行されますが、画面表示から速攻でonclickすると処理できないケースなどあるのでしょうか？

上記のとおり、ありえます。
さらに言えば、イベントとかDOMとか、その辺のわずらわしい話を取っ払って、↓このように書いてもエラーになります。

<script>
  functionName();
</script>
<script>
  function functionName(){
    alert('hoge');
  }
</script>

JavaScript はこのような依存関係を記述することを苦手（というか放棄）しています。
ただ、最近のJavaScriptには便利なものがありますので、こちらをご利用になるといいでしょう。
import - JavaScript | MDN

Comments

[miyabi_pudding]

script要素またぐパターンを忘れていた・・・。
質問者さん>あと、
<script>
functionName();
</script>
<script src="hoge.js"></script>
hoge.jsの中身：function functionName(){}
も同様にエラーになるはずですよ。

[Lhankor_Mhy]

> miyabi_takatsukさん
補足ありがとうございます。

ついでに言えば、

$(function(){
$('button').click(function(){
……

のようにロードイベントで関数を定義しても、その前にクリックしてしまえば同様にエラーになりますね。

[x_x]

それは何も起こらないだけでは？

[Lhankor_Mhy]

あ、そうですね。
こっちが混同してしまった。

$(function(){
function functionName(){
……

のつもりでした。

Answer 3

そのコード動きますか？
functionキーワードと、メソッド名の間には半角スペースが必要です。

さて、回答ですが、functionキーワードにて関数を定義した場合は、
定義前の行にて実行をしても、しっかりと実行されます。
そして、クリックイベント追加自体が、
$(function(){});の中に記載されているため、
速攻で押そうが何しようが、そもそも、読み込みが完了してから初めてクリックイベント自体が追加されるため、読み込み前に押しても、反応しない、が正しい挙動です。
（そもそも、まだクリックイベントが追加されてないタイミングだから）
なので、functionキーワードでの定義であれば、どこに書いても基本的には大丈夫です。

ただ、下記の場合は、定義が先でないと動きません。

var Name = function(){
  // 処理
};

function定義と、変数定義、これの違いに関しては、なんでかと言うと、申し訳ございません、私自身も今調べてるところです。

そして、

HTML→CSS→JS→画像

これどこで得た知識ですか？
JSの方がCSSより先に読み込ませてたら、当然JSの方が先に読み込み開始しますが。
正しくは、書いた順に、読み込まれる、です。
たとえ、async属性をつけても、読み込みしてる間に次の読み込みも開始できるってだけで、
書いた順に読み込みが開始されるのは変わりません。

Comments

[退会済みユーザー]

書いた順に読み込まれるということは、最下層にfunctionを定義した場合にタイミングによっては未定義エラーにならないでしょうか。
グローバルの場合は何処に記述しても未定義エラーにならないということでしょうか
例えば、var window.Name = function(){の場合など

[miyabi_pudding]

そうですね、var定義の場合は、関数呼び出しが先にあれば、未定義エラーになります。
function定義の場合はエラーになりません。
というか、自分でやって試した方が早いのでは・・・・。

Answer 4

コールバックの仕様というだけ
必ずしも無名関数は必須ではない

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function(){
  $('#func2').click(function(){
    functionName();
  });
  $('#func3').click(functionName);
});

function functionName(){
  alert('hoge');
}
</script>
<button onclick="functionName();" id="func1">1</button>
<button id="func2">2</button>
<button id="func3">3</button>