Javascript イベント操作
１．イベントとは
イベントは、ブラウザーのウィンドウの中で発火されます。そして、その中に属する特定の項目に紐付く傾向 にあります 。これは単一の要素、要素の集合、現在のタブでロードされた HTML 文書、ブラウザー画面全体といったものです。発生するイベントはたくさんの異なる種類があります。例えば下記のようなものです。
・ユーザーがある要素の上をマウスでクリックしたり、ある要素の上にカーソルを持ってくる
・ユーザーがキーボードのキーを押す
・ユーザーがブラウザー画面をリサイズしたり閉じたりする
・ウェブページのロードの完了
・フォームの送信
・ビデオが再生中、停止中、再生が終わった
・エラーの発生
MDN Event リファレンスを覗いてみれば、とてもたくさんの応答可能なイベントがあるのが判るでしょう。
と、ここまでがMDNの文章です。※イベントへの入門
簡単なイベントを書いてみよう
分かりやすい例を書いてみます。MDNでは<Body>タグ全体対象にした背景色の切り替えをサンプルにしてしまっているので、Wordpress でそれをやれっていうのがキツかった(笑)ため、部分的なものを作ってみました。
・HTML
<div id="changeColorArea">Change Color Area</div>
<button id="changeButton">Change color</button>・JavaScript
const btn = document.getElementById('changeButton');
const result = document.getElementById('changeColorArea');
function random(number) {
return Math.floor(Math.random() * (number+1));
}
// btn ボタンがクリックされたとき発生するイベント
btn.onclick = function() {
const rndCol = 'rgb('
+ random(255) + ','
+ random(255) + ','
+ random(255) + ')';
// 指定ID の <div>タグの色を変える行
result.style.backgroundColor = rndCol;
}・CSS
#changeColorArea {
width: 100%;
height: 100px;
border: 1px solid black;
margin-bottom: 10px;
display:flex;
align-items: center; /* 縦方向 中央 */
justify-content: center; /* 横方向 中央 */
font-size:40px;
}とりあえず一つ目のイベントは分かりやすく、馴染みのある onclick を使って確認してみました。
２．document とは
document コンストラクターと書かれていたり、ブラウザーに読み込まれたdocument オブジェクトを新たに生成してそのページの内容へのエントリーポイントを提供する、と書かれていたり、異常にややこしく書かれていますが……
つまるところ、これで覚えてればいいようです。
javascript の document オブジェクトは html ドキュメントを表現するオブジェクト です。
要するに、Javascript を使って、HTMLを操作するためにJavascriptを使うときは、
document を使ってHTML情報を取り出すという事が必要になる、という事になります。
Document Object Model と呼ばれ、略してDOMと呼ばれます。
HTMLはHTML文章と呼ばれることもあり、文章=Document。つまりHTML(XMLなども)オブジェクトとして扱い、それを操作するためのモデルです。その操作をすることを DOM API や DOM というように呼びます。
javascript から DOM を介して、HTMLの情報を取得・変更・イベントの登録など、JavaScript で 動的なページを作ることが可能になります。実装した方が理解は早いので、よく使いそうな機能の説明を記載していきます。
３．イベントに使うHTML要素の取得の方法
javaScriptからHTMLの部品を操作するためには、まずHTMLから要素を探し出して部品情報を取得する必要があります。その際のキーとなるのが、HTMLの各要素が持つidやname属性の値、要素に付与されたclass名です。これからご紹介するJavaScriptの特定メソッドの実行により、HTML上からキー値を検索して、HTMLの要素情報を取得することができます。
document.getElementById
HTML要素が持つid値をキーとして、HTML要素を取得することができます。
書式
document.getElementById("id値");テキストボックス内のテキストを取得する例
document.getElementById("sampleTbox").value;document.getElementsByName
HTML要素が持つname属性の値をキーとして、HTML要素を複数取得します。「Elements」と複数形でメソッド名を記載する点に気を付けてください。
書式
document.getElementsByName("name属性の値");テキストボックス内のテキストを取得する例
document.getElementsByName("tbox1")[0].value;document.getElementsByClassName
HTML要素が持つclass属性の値をキーとして、HTML要素を複数取得します。「Elements」と複数形でメソッド名を記載する点に気を付けてください。
書式
document.getElementsByClassName("class名");テキストボックス内のテキストを取得する例
document.getElementsByClassName("font-tbox")[0].value;document.querySelector
こちらはCSSのクラス定義時に指定するセレクタ記法を用いてHTML要素を一つだけ取得するためのメソッドです。jQueryをご存知の方は、jQueryと同じキー値の指定方式と考えてください。
書式
document.querySelector("CSSセレクタ記法による要素指定");テキストボックス内のテキストを取得する例
このメソッドは複数候補が見つかった場合、最初の1つだけ取得します。
// idをキーにして取得する場合
document.querySelector("#sampleTbox").value;
// class名をキーにして取得する場合
document.querySelector(".font-tbox").value;４．querySelector が便利で汎用的
HTML要素の取得を querySelector で代用できる
| getElementById(‘id’) | querySelector(‘#id’) |
| getElementsByClassName(‘class’) | querySelector(‘.class’) querySelectorAll(‘.class’) |
| getElementsByName(“name”) | querySelector(“タグ名[name=’name’]”) querySelectorAll(“タグ名[name=’name’]”) |
getElementsByName(“name”) が少しわかりにくかったので、サンプルを作りました。
<button class="testbtn" name="tbox01"> Button 1 </button>
<button class="testbtn" name="tbox02"> Button 2 </button>
<button class="testbtn" name="tbox03"> Button 3 </button> button {
width:100px;
height:60px;
font-size:15px;
}const btn1 = document.querySelector("button[name='tbox01']");
const btn2 = document.querySelector("button[name='tbox02']");
const btn3 = document.querySelector("button[name='tbox03']");
//let 変数名 = (引数1, 引数2, ...) => 戻り値; アロー関数省略
btn1.onclick = () => alert("tbox01");
btn2.onclick = () => alert("tbox02");
btn3.onclick = () => alert("tbox03");５．javascript イベントハンドラ一覧
イベントハンドラについては、どのタグに、どれが使えるか？という事が様々あるようで、数にするととても多い。そのため、何ができるか、できないか、を把握して、必要な時にリファレンスを見て使えればよいと思う。この流れの早いIT業界で、全て把握するよりも、可能かを知る事と、それを調査して実現できる速度が重要かと思います。
細かく書いていたのでこのページを真似させてもらいました。
JavaScriptのイベントハンドラ一覧
ココはサンプルが置いてあったので、見やすかった。HPもカッコいい。
JavaScriptの基本―イベントハンドラ
| イベントハンドラ | 説明 |
|---|---|
| onBlur | ページやフォーム要素からフォーカスが外れた時に発生 |
| onFocus | ページやフォーム要素にフォーカスが当たった時に発生 |
| onChange | フォーム要素の選択、入力内容が変更された時に発生 |
| onSelect | テキストが選択された時に発生 |
| onSelectStart | ページ内の要素が選択されようとした時に発生 ※IEのみ |
| onSubmit | フォームを送信しようとした時に発生 |
| onReset | フォームがリセットされた時に発生 |
| onAbort | 画像の読み込みを中断した時に発生 |
| onError | 画像の読み込み中にエラーが発生した時に発生 |
| onLoad | ページや画像の読み込みが完了した時に発生 |
| onUnload | ウィンドウを閉じた時、他のページに切り替えた時、ページをリロード（更新）した時に発生 |
| onClick | 要素やリンクをクリックした時に発生 |
| onDblClick | 要素をダブルクリックした時に発生 |
| onKeyUp | 押していたキーをあげた時に発生 |
| onKeyDown | キーを押した時に発生 |
| onKeyPress | キーを押してる時に発生 |
| onMouseOut | マウスが離れたした時に発生 |
| onMouseOver | マウス乗った時に発生 |
| onMouseUp | クリックしたマウスを上げた時に発生 |
| onMouseDown | マウスでクリックした時に発生 |
| onMouseMove | マウスを動かしている時に発生 |
| onDragDrop | マウスでドラッグ＆ドロップした時に発生 ※NN4のみ |
目次に戻る
トップに戻る