イベントにまつわる言葉について
まず、初めに「イベント」という言葉と、それにまつわる言葉について理解しておく必要がありますので一応のおさらいをしておきます。
- event
- 読み: イベント
意味: 出来事、行事
- listener
- 読み: リスナー
意味: 聞き手、聴取者
- handler
- 読み: ハンドラー
意味: 扱い手、調教師
- bind
- 読み: バインド
意味: 紐づける、結びつける、関連付ける
- attach
- 読み: アタッチ
意味: 接続、取り付ける
イベントの概要
イベントとは一般的な意味として「出来事」とか「行事」といった意味をもった言葉ですが、プログラミングでも同じような意味の解釈で良いと思います。 例えば、webページ上にある要素をマウスでクリックすると「クリックイベント」が発生します。また、ページの読込みが終わったら「ロードイベント」が発生します。 つまり、「クリックの出来事」、「読込み完了の出来事」というとプログラミングにおけるイベントも一般的な言葉の意味で違和感なく通じますね。
イベントリスナーとは
リスナーとは一般的な意味として「聞き手」とか「聴取者」といった意味をもった言葉です。 これはプログラミングでいうと少し意味が違うかなと思いますが、しかし、間違いでもありません。
まず、プログラミングにおける、リスナーについて、解釈上の答えから言ってしまうと以下のようになります。 いくつかの言葉のパターンで記述してみますのでニュアンスをつかんでいただけると良いのですが。
- 英国風 : 「リスナー」 とは 「イベント」 に 「ハンドラー」 を 「バインド」 するためのものです。
- 日本風 : 「聴取者」 とは 「行事」 に 「扱い(振る舞い)」 を 「紐づけ」 するためのものです。
- 具体的 : 「イベントリスナー」 とは 「イベント」 に 「関数」 を 「関連付け」 するためのものです。
上記の言葉でも まだ伝わりにくい気がしましたので、もう一つ、プログラムの実行側からの言葉にすると、次のように言っていると解釈できます。
「私はプログラミングした 貴方の指示を聞いて 、イベントに関数の実行を関連付けます。」
ということで、「イベントリスナーはイベントに関数処理の実行を紐づけるためのもの」だということです。
イベントハンドラーとは
ハンドラーとは一般的な意味として「扱い手」とか「調教師」といった意味をもった言葉です。 これはプログラミングでいうと少し伝わりにくいような気がしますが、しかし、ニュアンスとしては分かるところです。
例えば、これを「ハンドラー」ではなく「ハンドリング」【handling】という言葉に変えて意味を考えてみてください。 ハンドリングとは、「取り扱い」、「処理」、「操作」、「対処」、「対応」などの意味をもつ言葉です。これだと十分に意味が分かります。
前のセクションでも書いていますが、つまり、ハンドラーとは具体的にいうと「関数」【function】のことを指しています。 つまり、イベントが発生したときに実行されるプロセシングのことだと解釈できます。
言葉による解釈の色々
世の中には言葉による解釈の違いで、イベントリスナーとイベントハンドラーについて色々な説明がなされています。
例えば、HTMLタグの「属性」からイベントを登録するものをイベントハンドラーと呼び、 javascriptの「addEventListener」メソッドからイベントを登録するものをイベントリスナーと呼ぶことが1つの解釈になっているようです。
このような解釈の仕方も私としては好きであり、イベントを処理するということの理解においては効率的な考え方だと思います。 そもそも、プログラミングにおいて、英語圏ではない人にとっては言葉の壁というのは大きく理解の妨げになります。 なので、初めのうちはニュアンスで理解することが多くなるのも事実だと思いますから、あまり細かなことに集中するよりは、とにかく書いたコードがどのように実行されるかを知ることの方が重要だと私は考えます。
しかし、構文からコードの書き方を読むときには少し理解しにくい場合があるのも事実です。 ということで、次のセクションでは少しだけ、構文形式での理解について書いてみようと思います。
なお、このページでの説明には私の考えた独自の「言葉」や「表現」が含まれていますので、 これを真とするのではなく、他の方法での学習や理解も合わせてお願いいたします。
構文形式でみるイベント登録の色々
ここでは、イベント登録についての構文的な話をします。 とりあえず、よく使うであろう「クリック」イベントの登録を題材にして話をすすめていこうと思いますのでよろしくお願いします。
それでは次のコードと実際のサンプルを見てください。 なお、HTML と script のコードは別々にしていますが、HTML コードの中に script のコードが入っていると理解してください。
サンプルコード: HTML
<body>
<button onclick="myFunction()">クリック A</button>
<script>...</script>
</body>
サンプルコード: script
<script>
function myFunction(){
window.alert("クリック A");
}
</script>
上記のHTMLサンプルの02行目は button要素 の onclick属性 を使って myFunction() という関数をバインドした例です。 私はこの属性を使った方法を「属性リスナー」と表現しています。 これを構文形式にすると以下の様になります。
構文形式: HTML
<Element Listener="Handler()">クリック</Element>
いかがでしょうか。構文形式で見るとリスナーとハンドラーの関係性が少し見てとれると思います。 続いて以下に javascript の addEventListener を使ってイベントに関数をバインドする例を掲載します。
サンプルコード: HTML
<body>
<button id="idButton">クリック B</button>
<script>...</script>
</body>
サンプルコード: script
<script>
let elmButton = document.getElementById("idButton");
elmButton.addEventListener(
"click", function(){
window.alert("クリック B");
}
);
</script>
それでは以下に javascriptサンプルの 03 行目～ 07 行目を構文形式で書いてみます。
構文形式: javascript
Element.addEventListener(Listener, Handler(){processing});
javascript のコードも書いたので、ついでに jQuery のコードでも書いておきましょう。 jQuery のコード では 以下のようになります。
サンプルコード: HTML
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<p><button id="idBtnC">クリック C</button></p>
<p><button id="idBtnD">クリック D</button></p>
<script>...</script>
</body>
サンプルコード: script (jQuery)
<script>
$("#idBtnC").click(function(){
window.alert("クリック C");
});
$("#idBtnD").on("click", function(){
window.alert("クリック D");
});
</script>
それでは、以下 jQuery を構文形式で表したものです。 ここでは click メソッドと on メソッドのコードを同時に書き出しています。
構文形式: jQuery
$(Selector).Listener(Handler(){processing});
$(Selector).on(Listener, Handler(){processing});
以上でイベントにハンドラーをバインドするサンプルは終りにしますが、コードを見ていただいてニュアンスは伝わったでしょうか。 ここでの構文形式というのは、構文とは違うと思いますが、リスナーとハンドラーがコードの中でどの位置に当てはまっているかを知ることは、 イベント処理の理解に役立ちます。そういう意味で、構文形式という方法をとりました。
このサンプルコードが言葉の壁によってイベント関連の理解にくるしんでいる方の助けになれば幸いです。
リスナーとハンドラーの構文形式コード 【まとめ】
前のセクションでは、長々とコードを掲載しましたので HTMLの属性リスナー、 javascript の addEventListener メソッド と jQuery の リスナー系メソッドの構文形式コードをひとまとめにしたものを以下に掲載しておきます。
<Element Listener="Handler()">クリック</Element>
Element.addEventListener(Listener, Handler(){processing});
$(Selector).Listener(Handler(){processing});
$(Selector).on(Listener, Handler(){processing});
参考: イベントの種類とリスナー
ここでは、全てではありませんが、イベント種類にマッチさせるためのリスナーを表にしました。 参考になれば幸いです。
| 属性リスナー | イベント |
|---|---|
| onAbort | 画像の読み込みを中断した時 |
| onBlur | ページやフォーム要素からフォーカスが外れた時 |
| onChange | フォーム要素の選択、入力内容が変更された時 |
| onClick | 要素やリンクをクリックした時 |
| onDblClick | 要素をダブルクリックした時 |
| onError | 画像の読み込み中にエラーが発生した時 |
| onFocus | ページやフォーム要素にフォーカスが当たった時 |
| onKeyDown | キーを押した時 |
| onKeyPress | キーを押してる時 |
| onKeyUp | 押していたキーをあげた時 |
| onMouseDown | マウスでクリックした時 |
| onMouseMove | カーソルがターゲット内を動いている時 |
| onMouseOut | カーソルがターゲットの外に出た時 |
| onMouseOver | カーソルがターゲット上に侵入した時 |
| onMouseUp | クリックしたマウスを上げた時 |
| onReset | フォームがリセットされた時 |
| onSelect | テキストが選択された時 |
| onSelectStart | ページ内の要素が選択されようとした時 |
| onSubmit | フォームを送信しようとした時 |
| onLoad | ページや画像の読み込みが完了した時 |
| onUnload | ウィンドウを閉じた時、他のページに切り替えた時、ページ更新した時 |
| onDragDrop | マウスでドラッグ＆ドロップした時 |
| イベントリスナー | イベント |
| abort | リソースの読み込みが中止された時。 |
| animationstart | CSSアニメーションが開始した時。 |
| animationend | CSSアニメーションが終了した時。 |
| animationiteration | CSSアニメーションが繰り返された時。 |
| afterprint | プリントダイアログを閉じた時。 |
| beforeprint | プリントダイアログを開いた時。 |
| beforeunload | ウィンドウ、文書、およびそのリソースがアンロードされる前。 |
| blur | 要素がフォーカスを失った時 |
| click | クリック時 |
| close | WebSocket 接続が閉じられた時。 |
| copy | 選択範囲がクリップボードにコピーされた時。 |
| cut | 選択範囲が切り取られてクリップボードにコピーされた時。 |
| cached | マニフェストにリストされているリソースがダウンロードされ、アプリケーションがキャッシュされる時。 |
| DOMContentLoaded | DOMツリーの構築が完了した時。(画像などの読込みを待たないでタグ構築が完了した時) |
| drag | 要素もしくは選択文字列がドラッグされている間。 |
| dragend | ドラッグ操作が終わったとき。（マウスボタンが放された時、またはESCキーが押されたとき） |
| dragenter | 要素もしくは選択文字列がドラッグされて、有効なドロップ対象に入ったとき。 |
| dragstart | ユーザが、要素もしくは選択文字列をドラッグし始めたとき。 |
| dragleave | 要素もしくは選択文字列がドラッグされて、有効なドロップ対象からはずれたとき。 |
| dragover | 要素もしくは選択文字列が、有効なドロップ対象の上をドラッグされている間。 |
| drop | 要素が有効なドロップ対象にドロップされたとき。 |
| error | リソースをロードできなかった時。 |
| focus | 要素がフォーカスされた時 (バブリングなし)。 |
| load | ページの読み込みが全て完了した時。(DOMContentLoadedの方が適切である場合があるので注意) |
| keydown | 任意のキーが押された時。 |
| keypress | Shift、Fn、CapsLockを除く任意のキーが押された状態にある時 |
| keyup | 任意のキーが押された状態から解放される時。 |
| message | WebSocket 経由でメッセージを受信した時。 |
| mousedown | マウスのボタンが押下された時 |
| mouseup | マウスのボタンを離した時 |
| mouseover | カーソルがターゲット上に侵入した時 |
| mousemove | カーソルがターゲット内を動いている時 |
| mouseout | カーソルがターゲットの外に出た時 |
| resize | ブラウザのウィンドウ等のサイズが変更された時 |
| scroll | スクロールされた時 |
| submit | サブミットボタンが押された時。 |
| offline | ブラウザーがネットワークにアクセスできなかった時。 |
| online | ブラウザーがネットワークにアクセスした時。 |
| open | WebSocket 接続が確立された時。 |
| pageshow | セッション履歴のエントリが移動されている時。 |
| pagehide | セッション履歴のエントリが横断されている時。 |
| paste | クリップボードからアイテムが貼り付けられた時。 |
| popstate | セッション履歴エントリが（場合によっては）ナビゲートされている時。 |
| reset | リセットボタンが押された時。 |
| transitionstart | CSSトランジションが実際に始まった時。 |
| transitioncancel | CSSトランジションがキャンセルされた時。 |
| transitionend | CSSトランジションが終了した時。 |
| transitionrun | CSSトランジションが実行し始めた時。 |
| unload | 文書または依存するリソースがアンロードされた時。 |
| タッチパネル用 | イベント |
| touchstart | タッチが開始された時 |
| touchmove | 指を画面上で動かす時 |
| touchend | 指を画面から離した時 |