changeイベントの発火が意図しない挙動になる。

前提・実現したいこと

まず、changeイベントはコントロールのフォーカスが外れた時に発火するという認識なのですが、
合っていますか？
https://qiita.com/maruyam-a/items/cf0168f91d934b449a07

しかし、下記コードを実行すると入力の度にchangeイベントのアラートが表示され、
コントロールからフォーカスが外れてもchangeイベントが発火しません。
ご教示お願い致します。

該当のソースコード

html
1	<input id="input1"></input>

jQuery
1	$('#input1').on({
2		"keypress": function(e){
3						//Enterキーが押されたとき。
4						if(e.which==13){
5							alert("Enterキーが押されました。");
6						}				
7					},
8		"input": function(e){
9					alert("入力の度に発火："+$('#input1').val());
10				},
11		"change": function(e){
12					alert("フォーカスが外れました。");
13				}
14	});

追記。

console.logに出力を変えましたが、まだ意図しない挙動になります。

・文字を入力した後にEnterキーを押すと、フォーカスが外れたというログが出る。
続けてEnterキーを押すと、フォーカスが外れたというログはもう出ない。
・文字を入力した後にフォーカスを外さないと、フォーカスが外れたというログが出ない。
文字を入力しないでフォーカスを何度も変更(他のコントロールとフォーカスを往復)しても
フォーカスが外れたというログが出ない。

補足情報（FW/ツールのバージョンなど）

Google Chrome

行動規範の内容に同意します

回答2件

認識は合っていますが、今回のコードの場合はinputでalert出すたびにフォーカスアウトするので入力のたびに発火しますよ。

投稿2018/08/24 10:14

yukihisa

総合スコア672

tkshp

2018/08/27 01:34 編集

返信が遅くなり申し訳ありません。ご回答ありがとうございます。 alertでフォーカスが変わっていたのですね。まだ分からないことがありまして、追記しました。宜しくお願い致します。

yukihisa

2018/08/27 01:50 編集

・文字を入力した後にEnterキーを押すと、フォーカスが外れたというログが出る。続けてEnterキーを押すと、フォーカスが外れたというログはもう出ない。 ⇒　Enterキー押下のkeypressイベントでフォーカスが（略　　”change”イベントなので変更なしでフォーカスを外しても何も起こらない。・文字を入力した後にフォーカスを外さないと、フォーカスが外れたというログが出ない。文字を入力しないでフォーカスを何度も変更(他のコントロールとフォーカスを往復)してもフォーカスが外れたというログが出ない。 ⇒　”change”イベントなので（略純粋にフォーカスアウトのイベントを取りたいなら onChange ではなく onBlur を使用しましょう。

tkshp

2018/08/27 01:52

ご回答ありがとうございます。 changeイベントの仕様を勘違いしてました。ご教示いただきありがとうございます。

yukihisa

2018/08/27 02:02

こちらも「changeイベントは（テキスト変更後に）コントロールのフォーカスが外れた時に発火する」と知っているためにカッコ内を省略されていると思い込んでいたのですれ違いが生じていましたね、申し訳ない。イベントの種類に関してはある程度英語の直訳でわかりますので、change（変更）なのにフォーカスアウトのイベント？とか思ったら検索した方がよかですね。

tkshp

2018/08/27 02:42

ご回答ありがとうございます。なるほど、英語である程度想定できるということですね。

行動規範の内容に同意します

ベストアンサー

alertは制御をもっていくのでconsole.logで開発環境でみてください

投稿2018/08/24 10:11

yambejp

総合スコア114883

tkshp

2018/08/27 01:34 編集

yambejp

2018/08/27 01:40 編集

質問の意図がわかりませんが IMEの未確定を確定させる場合をのぞきエンターをおせばデータの確定なので changeイベントが発生するのは仕様です changeイベントに"フォーカスが外れました。"と書くことがおかしいだけでフォーカスをハズレたときに発生するのはblurです

tkshp

2018/08/27 01:51

ご回答ありがとうございます。 changeイベントがフォーカスが外れる度に発生するイベントだと勘違いしていました。 (こちら(https://qiita.com/saxxos/items/294b209fc6c7ecc07bd6)の記事で「changeイベントはテキストボックスからフォーカスが外れた時にしか発火しない。」と書かれていたので、勘違いしてました。) blurイベントだったのですね。検証して、意図したい通りの挙動になりました。

行動規範の内容に同意します

あなたの回答