JSは文字列だったりそうでなかった利することがよく

質問

EventListenerの名前は文字列でなく、イベントは文字列などJSは文字列だったりそうでなかった利することがよくありますが、どう区別すればよいのでしょうか？
btn.removeEventListener('click', listener, false);
}, false);

なぜイベントだけ文字列になっているのでしょうか？
規則性がないような気がします。

回答No.7

amanojaku1 · ベストアンサー

>文字列だったりそう出なかったりするのは
>技術的理由ではなく

技術的理由ではありません。
本来ならJavaScript側で下記のようにシンボル化すれば良いだけの事ですが、それすら手抜きしています。

const EventClick = "click";
const EventMouseover = "mouseover";
const EventMouseout = "mouseout";

>なんとなくだったんですね

なんとなくではなく、(これは あくまでも推測です)恐らくプログラマーのヒューマン・エラーを最小限にし納期を短くすると言う、開発者側の理由でしょう。

回答No.6

amanojaku1

>回答No.5　amanojaku1

どうしても、イベントの種類を直接 文字列で指定するのが気になるのなら、一旦 変数に代入してから使うと言う手もあります。

EventClick = "click";
EventMouseover = "mouseover";
EventMouseout = "mouseout";

↑こんな感じで定義しておいてイベントの種類に設定してあげれば良いでしょう(本来ならJavaScript側が用意すべきモノです)。
そうすれば下記のようにスッキリ指定できます。

BUTTON.addEventListener(EventClick, AAA, false);
BUTTON.addEventListener(EventMouseover, BBB, false);
BUTTON.addEventListener(EventMouseout, CCC, false);

ちなみに「true、false」は(シンボルですが)"定数"です、数値の「0」とか「1」とか、文字列の"click"とか"mouseover"とか"mouseout"とか"定数"と言うカテゴリーで括れば仲間と言えます。

回答No.5

amanojaku1

>イベントの種類は文字列で名前は文字列でない理由はあるのですか

ただの手抜きでしょう。
恐らくJavaScriptの(Event関連の)開発に高度なデバッガが使われてなかったと推測されます。

例えば下記のようにイベントの種類を数値で定義した場合、内部的に(デバッガで見ると)イベントの種類に「1」とか「2」とか「3」とか、ただの数字が変数などに代入され、開発しているプログラマーにとっては なんのイベントの種類分かりにくい訳です。
勿論、そんな事は仕様書に書いておけば言い訳ですが、それでもプログラマーのヒューマン・エラーは発生してしまいがちになるでしょう。

EventClick = 1;
EventMouseover = 2;
EventMouseout = 3;

(これは あくまで推測です)内部的にもイベントの種類を文字列にしてしまえば変数などに「"click"、"mouseover"、"mouseout"」が代入されて分かりやすいでしょう。
端的に言えば納期があまりない状態での、ヤッツケ仕事だったのだろうと推測されます。
そんな事でJavaScriptの言語仕様を決めてしまって良いのかい、とツッコミたい所ですが、そんな体裁よりも、実質的な利を取ったのだろうと思われます。

補足

文字列だったりそう出なかったりするのは
技術的理由ではなくなんとなくだったんですね

回答No.4

amanojaku1

>回答No.3　amanojaku1

簡単に言うと「addEventListener」は、どんな「イベントの種類」で、なんの「関数」を起動させるべきかを「登録」するモノです。
これ自体はイベントではありません、あくまでもイベント起動用の「登録情報」です。

補足

イベントの種類は文字列で名前は文字列でない理由はあるのですか

回答No.3

amanojaku1

>「関数」、「論理型」はこれ自体が文字列型でないので、文字列ではなく
>イベントは文字列型なのですね?

１番目の引数は「イベントの種類」です、それを文字列で指定しています。
具体的に何が起動するのでしょうか？、２番目の引数に指定された関数が起動します。

例えば下記のようにした場合

BUTTON.addEventListener("click", AAA, false);
BUTTON.addEventListener("mouseover", BBB, false);
BUTTON.addEventListener("mouseout", CCC, false);

マウス・カーソルがBUTTONの上に来ると「イベントの種類」が"mouseover"で登録されているBBB関数が起動します。
BUTTONがクリックされると「イベントの種類」が"click"で登録されているAAA関数が起動します。
マウス・カーソルがBUTTONの外に行くと「イベントの種類」が"mouseout"で登録されているCCC関数が起動します。

回答No.2

amanojaku1

addEventListener( イベントの種類(文字列) , イベントの処理(関数) , イベントの伝播形式(論理型) )
１番目の引数には、追加するイベントの種類(文字列)を指定
２番目の引数は、関数を指定するか、直接関数を記述
３番目の引数はイベントの伝播形式(論理型)を指定

と言うように役割が違うので指定する型が違います。
3つとも違うことに注意して下さい、１番目の引数は「文字列」、２番目の引数は「関数」、３番目の引数は「論理型」です。

イベントの種類(文字列)は下記のようになります。
例えば「addEventListener( "mouseover", イベントの処理 , イベントの伝播形式 )」のようにイベントの種類(文字列)を"mouseover"にするとカーソルがターゲット内に侵入してきたときにイベントが起動します。

addEventListener type一覧と各ブラウザ対応
http://qiita.com/mrpero/items/156968e3512d42fffc5e

>マウス関連
>click：ボタンをクリックしたときに発火
>mousemove：カーソルがターゲット内に移動したときに発火
>mouseover：カーソルがターゲット内に侵入してきたときに発火
>mousedown：ボタンを押下したときに発火
>mouseup：ボタンを離したときに発火
>mouseout：カーソルがターゲット外に出たときに発火
>
>キーボード関連
>keypress：キーを押して離したときに発火
>keydown：キー押下時に発火
>keyup：キーを離したときに発火
>
>DOM関連
>DOMFocusIn：ターゲットがフォーカスを受け取ったとき発火
>DOMFocusOut：ターゲットがフォーカスを失ったとき発火
>DOMActivate：ターゲットがアクティブになったとき発火
>
>INPUT関連
>select：テキストフィールドで文字が選択されたときに発火
>change：コントロールの値が変化した後に発火
>submit：submitボタンが押されたときに発火
>reset：resetボタンが押されたときに発火
>focus：コントロールがフォーカスを受け取ったときに発火
>blur：コントロールがフォーカスを失ったときに発火
>
>その他
>load：読み込みが完了したときに発火
>scroll：コントロール付属のスクロールバー位置が変更されたときに発火
>resize：コントロールのサイズが変更されたときに発火

補足

「関数」、「論理型」はこれ自体が文字列型でないので、文字列ではなく

イベントは文字列型なのですね?

回答No.1

Gotthold

> どう区別すればよいのでしょうか？
リファレンスマニュアルを適宜参照します。

removeEventListener であれば↓
EventTarget.removeEventListener - Web API インターフェイス | MDN
https://developer.mozilla.org/ja/docs/Web/API/EventTarget/removeEventListener

> なぜイベントだけ文字列になっているのでしょうか？
> 規則性がないような気がします。
removeEventListenerの3つの引数はすべて意味が違いますから、引数の型が違っているのはそんなに変ではないような。
（例えば足し算をするfunctionの2つの引数の型が違っていれば、それはさすがに変だと思いますが。）

イベント種別は列挙型がある言語なら列挙型が良さそうですが、
JavaScriptには無いので文字列にしたのでしょうかね。

補足

むずかしくて、初心者には分からないのでもう少し初心者でもわかるようにお願いします