イベント処理

オライリーの JavaScript 第6版を図書館から借りて、いろいろ調べている。 17 章のイベント処理は知らないので、少し調べてみた。

概要

簡単なもの

少し複雑なもの

簡単なもののスクリプトは次の通りだ:


	<button onclick="alert('ありがとう');">ここをクリック</button>

簡単なものとして紹介した方法は、インラインイベントハンドラーと呼ばれる。

少し複雑なもののスクリプトは次の通りだ:

<button id="miabutono">ここをクリック</button>
  <script>
		let b = document.getElementById("miabutono");
		b.onclick = function() { alert("クリックありがとう"); };
		b.addEventListener("click", function() { alert("またありがとう"); }, false);
  </script>

少し複雑なもののスクリプトでは、2 種類のイベントハンドラー登録方法を使っている。まず、b.onclick で始まる行では、ボタン要素 b の onclick プロパティにハンドラー関数を割り当てる方法を取っている。これはイベントハンドラープロパティを使う方法である。

もう一つの登録方法は、次の b.addEventListner で始まる行の通り、イベントハンドラーの登録に addEventListener() を使用する方法である。 addEventListener(t, h, c) メソッドは、ノードにイベントハンドラ h を追加するメソッドである。ここで t は文字列で表わされるイベント種別、 h は関数オブジェクト、c は真偽値である。

イベント種類を表す文字列として代表的なものに次がある。

load: ウィンドウのロード。onload 属性に対応。
click: マウスのクリック。button などの onclick 属性に対応。
mousemove: マウスの移動。onmousemove 属性に対応
input: <input>, <select>, <textarea> の各要素の値 (value) の変更
change: <input>, <select>, <textarea> の各要素の値 (value) の変更の確定。ただし、イベントは要素の値 (value) が変更されるたびに発生するとは限らず、「確定」の定義は変更される要素の種類やユーザーが要素を操作する方法によって異なる。 HTMLElement: change イベント（developer.mozilla.org）参照。

イベントリスナーの機構と非推奨のイベントリスナー

イベント入門（developer.mozilla.org）によれば、イベントリスナーの機構について、次の３種類が説明されている。

addEventListener を使う方法
イベントハンドラープロパティを使う方法
インラインイベントハンドラーを使う方法

インラインイベントハンドラーとは、たとえば、次の形のものである。

ここの onclick がインラインイベントハンドラー（HTML のイベントハンドラー属性）である。onclick の他には、 onload, onchange, onmouseover, onmouseout, onkeydown, oninput, onsubmit などがある。

上記ページでは、3. のインラインイベントハンドラーを使う方法は非推奨としている。理由は次のとおりである。

HTML と JavaScript を混在させるのはよい考えではないから
複数のオブジェクト（ボタンなど）に同一の（あるいは統一した）挙動をさせたいときに、オブジェクトごとに属性を追加しなければならず、メンテナンスが悪夢となるから
セキュリティ面によりインライン JavaScript を許可していないサーバーがあるから

次は、イベント input の使用例である。入力欄にテキストを入力すると同時に、入力した文字列がその下に同時に表示される。
https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/input_event
を参考にした。

HTML

<input placeholder="入力してください" name="name"/>
<p id="valoroj"></p>

JavaScript

const enigo = document.querySelector('input');
const jxurnalo = document.getElementById('valoroj');

enigo.addEventListener('input', renovigiValoro);

function renovigiValoro(e) {
	jxurnalo.textContent = e.target.value;
}

JavaScript の黎明期ではおそらく oninput を使用したであろうが、上記の理由で addEventListener を使うのが適切である。

変数名にエスペラントを使っているのは、 JavaScript の言語仕様として規定されている英単語との区別をしたかったからだ。 Document.querySelector() は、指定されたセレクターの中で、最初に一致する要素を示すオブジェクトを返す。セレクターとは、class="xxx" や id="xxx" などで指定されるものを表す。 https://developer.mozilla.org/ja/docs/Web/API/Document/querySelector

ロシア語文法

addEventListner と onload

Window: load イベント(developer.mozilla.org) によれば、下記の 2 つは同じであるという。

window.addEventListener('load', (event) => {
    console.log('ページが完全に読み込まれました');
});

window.onload = (event) => {
    console.log('ページが完全に読み込まれました');
};