イベント処理

作成日 : 2013-04-04

最終更新日 :

オライリーの 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: ウィンドウのロード
click: マウスのクリック
mousemove: マウスの移動
input: <input>, <select>, <textarea> の各要素の値 (value) の変更

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

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

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

上記ページでは、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 の言語仕様として規定されている英単語との区別をしたかったからだ。 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('ページが完全に読み込まれました');
};

まりんきょ学問所＞ JavaScript 手習い＞イベントの処理

MARUYAMA Satosi