イベント処理

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

概要

簡単なもの ここをクリック

少し複雑なもの ここをクリック

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

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

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

addEventListener(t, h, c) メソッドは、 ノードにイベントハンドラ h を追加するメソッドである。ここで t は文字列で表わされるイベント種別、 h は関数オブジェクト、c は真偽値である。

イベント種類を表す文字列には次がある。

load

ウィンドウのロード

click

マウスのクリック

mousemove

マウスの移動

input

<input>, <select>, <textarea> の各要素の値 (value) の変更

次は、イベント 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 手習い ＞ イベントの処理