１０　イベント

（１） マウスボタン（click、dblclick、mousedown、mouseup、contextmenu）

マウスのボタンをクリックしたときに発生するイベントです。

記述例

<div id="d"></div>
<div id="b">click!</div>    <!-- ボタン -->
<script>
var prevTime = 0;
function dispEvent(event) {
  event.preventDefault();    // デフォルトの処理を行わない
  var time = event.timeStamp;
  if (time - prevTime >= 500) {  // 0.5秒以上たったら消す
    prevTime = time;
    document.getElementById("d").textContent = "";
  }
  document.getElementById("d").textContent += event.type + " ";
}
var b = document.getElementById("b");
b.addEventListener('click', dispEvent, false);
b.addEventListener('dblclick', dispEvent, false);
b.addEventListener('mousedown', dispEvent, false);
b.addEventListener('mouseup', dispEvent, false);
b.addEventListener('contextmenu', dispEvent, false);
</script>

1回だけのクリックの場合、mousedown → mouseup → click の順に、

ダブルクリックの場合、mousedown → mouseup → click → mousedown → mouseup → click → dblclick　の順に、

右クリックの場合、mousedown → mouseup → contextmenu　の順に発生します。

（２） マウス移動（mouseenter、mouseleave、mousemove、mouseover、mouseout）

マウスポインターが移動したときに発生するイベントです。

記述例

<div id="d"></div>
<div id="p"></div>    <!-- 黄色い四角 -->
<script>
var mousemoveCount = 0;
function clear() {
  mousemoveCount = 0;
  document.getElementById("d").textContent = "";
}
function dispEvent(event) {
  event.preventDefault();    // デフォルトの処理を行わない
  if (event.type == "mousemove") {
    if (++mousemoveCount > 1) {
      var s = document.getElementById("d").textContent;
      var n = s.lastIndexOf("(");
      document.getElementById("d").textContent = s.substring(0, n) + "(" + mousemoveCount + ") ";
    }
    else {
      document.getElementById("d").textContent += event.type + "(1) ";
    }
  }
  else {
    mousemoveCount = 0;
    document.getElementById("d").textContent += event.type + " ";
  }
}
document.body.addEventListener('mouseleave', clear, false);
var p = document.getElementById("p");
p.addEventListener('mouseenter', dispEvent, false);
p.addEventListener('mouseleave', dispEvent, false);
p.addEventListener('mousemove', dispEvent, false);
p.addEventListener('mouseover', dispEvent, false);
p.addEventListener('mouseout', dispEvent, false);
</script>

黄色い四角にマウスポインターを入れて、そのあとそこから抜けてください。

mouseover → mouseenter → mousemove → ... → mousemove → mouseout → mouseleave の順に発生します（ただし、mousemove は移動するたびに発生しますので発生回数を表示するようにしています）。

mouseover と mouseenter はともにマウスポインターが要素の上に載った（要素内に入った）場合に発生します。

mouseout と mouseleave はともにマウスポインターが要素の上からいなくなった（要素外に出た）場合に発生します。

これらの違いは、mouseover と mouseout は、イベントが発生した要素だけでなくその外側の要素にもイベントが発生するのに対して、mouseenter と mouseleave は、イベントが発生した要素の外側にはイベントが発生しないことにあります。

記述例

スタイルシート
<style>
  span.outer {
    color:orange;
  }
  span.inner {
    color:green;
  }
</style>
  
ボディ
<div id="d"></div>
<div id="p">    <!-- 外側のオレンジ色の四角 -->
外側
<div id="c">内側</div>    <!-- 内側の緑色の四角 -->
</div>
<script>
function dispEvent(event, style) {
  event.preventDefault();    // デフォルトの処理を行わない
  document.getElementById("d").innerHTML += "<span class= '" + style + "'>" + event.type + "</span> ";
}
document.body.addEventListener('mouseleave', function() {document.getElementById("d").innerHTML = "";}, false);
var p = document.getElementById("p");
p.addEventListener('mouseenter', function(event) {dispEvent(event, "outer");}, false);
p.addEventListener('mouseleave', function(event) {dispEvent(event, "outer");}, false);
p.addEventListener('mouseover', function(event) {dispEvent(event, "outer");}, false);
p.addEventListener('mouseout', function(event) {dispEvent(event, "outer");}, false);
var c = document.getElementById("c");
c.addEventListener('mouseenter', function(event) {dispEvent(event, "inner");}, false);
c.addEventListener('mouseleave', function(event) {dispEvent(event, "inner");}, false);
c.addEventListener('mouseover', function(event) {dispEvent(event, "inner");}, false);
c.addEventListener('mouseout', function(event) {dispEvent(event, "inner");}, false);
</script>

したがって、外側から内側にマウスポインターを移動させたときは、mouseout → mouseover → mouseover → mouseenter の順に発生します。つまり、外側から内側に移動したときに一度外側から出るので外側に mouseout、そして内側に入るので内側に mouseover と mouseenter が発生します。ただし、mouseover は外側にもイベントが発生するので上記のようになるわけです。

また、内側から外側にマウスポインターを移動させたときは、mouseout → mouseout → mouseleave → mouseover の順に発生します。この場合は、内側から出るので内側に mouseout と mouseleave が発生します。この内 mouseout は外側にもイベントが発生します。そして、外側の上にマウスポインターが移動するので、外側に mouseover が発生するわけです。

（３） マウスホイール（mousewheel）

マウスホイールが動かされたときに発生するイベントです。

記述例

<div id="d"></div>
<div id="p"></div>    <!-- 黄色い四角 -->
<script>
var mousemoveCount = 0;
function clear() {
  mousewheelCount = 0;
  document.getElementById("d").textContent = "";
}
function dispEvent(event) {
  event.preventDefault();    // デフォルトの処理を行わない
  if (++mousemoveCount > 1) {
    var s = document.getElementById("d").textContent;
    var n = s.lastIndexOf("(");
    document.getElementById("d").textContent = s.substring(0, n) + "(" + mousewheelCount + ") ";
  }
  else {
    document.getElementById("d").textContent += event.type + "(1) ";
  }
}
var p = document.getElementById("p");
p.addEventListener('mousewheel', dispEvent, false);
p.addEventListener('mouseleave', clear, false);    // 表示を消す
</script>

黄色い四角内で、マウスホイールを回転させると mousewheel イベントが発生し、mousewheel とイベントの発生回数が表示されます。なお、この例ではマウスポインターを黄色い四角から出すとイベント名を消すようにしています。

１０．３．２　　キーボード・イベント

キーボードまたは類似のユーザーアクションによって起動されるイベントです。

記述例

<span id="d1"></span> <span id="d2"></span> <span id="d3"></span><br>
<input id="t" type="text">

<script>
var n = 1;
function clear() {
  n = 1;
  document.getElementById("d1").textContent="";
  document.getElementById("d2").textContent="";
  document.getElementById("d3").textContent="";
}
function dispEvent(event) {
  if (event.type == "keydown")
    clear();
  document.getElementById("d" + n++).textContent=event.type;
}
var t = document.getElementById("t");
t.addEventListener('blur', clear, false);
t.addEventListener('keydown', dispEvent, false);
t.addEventListener('keypress', dispEvent, false);
t.addEventListener('keyup', dispEvent, false);
</script>

下の入力欄で何かキーを押してください。押したときに keydown が発生し、文字キーの場合はそれに続いて keypress が発生します。そして、キーを離すと keyup が発生します。

古い は、[Backspace]や[Insert]などの文字ではないキーでも keypress が発生します。他のブラウザでは発生しません。

（１） ページ切り替え（load、beforeunload、unload）

load イベントはページ読み込み後に発生します。

beforeunload イベントは現在のページから他のページへ移る前に発生します。

unload イベントは現在のページから他のページへ移ろうとした際に beforeunload イベントの後に発生します。

記述例（iframeを持つ親ドキュメント）

<div id="d"></div>

記述例（iframe内の子ドキュメント）

<div class="switch" onclick="go();">go</div>
<script>
function go() {
  window.addEventListener('beforeunload', function() {parent.document.getElementById("d").textContent+="beforeunload ";}, false);
  window.addEventListener('unload', function() {parent.document.getElementById("d").textContent+="unload ";}, false);
  location.href='another.htm'
}
window.addEventListener('load', function() {parent.document.getElementById("d").textContent="load ";}, false);
</script>

load イベント発生ときに load と表示します。このページが読み込まれたときには load イベントがすでに発生していますので、load という文字も表示されています。

[ go ] ボタンをクリックすると別ページに移動します。別のページに移るときに beforeunload イベントが発生します。beforeunload イベント発生ときに beforeunload と表示します。

beforeunload イベントに続いて unload イベントが発生します。unload イベント発生ときに unload と表示します。

load beforeunload unload と表示されることを確認してください。

（２） 表示（pageshow、pagehide）

pageshow イベントはページが表示された際に load イベントに次いで発生します。

pagehide イベントは他のページに移動するなどして、現在のページが隠された際に beforeunload イベントの後で、unload イベントに先だって発生します。

記述例（iframeを持つ親ドキュメント）

  <div id="d"></div>

記述例（iframe内の子ドキュメント）

<div class="switch" onclick="go();">go</div>
<script>
function go() {
  window.addEventListener('pagehide', function() {parent.document.getElementById("d").textContent="pagehide ";}, false);
  location.href='another.htm'
}
window.addEventListener('pageshow', function() {parent.document.getElementById("d").textContent="pageshow ";}, false);
</script>

pageshow イベント発生ときに pageshow と表示します。このページが読み込まれたときには pageshow イベントがすでに発生していますので、pageshow という文字も表示されています。

[ go ] ボタンをクリックすると別ページに移動します。別のページに移るときに pagehide イベントが発生します。pagehide イベント発生ときに pagehide と表示します。

pageshow pagehide と表示されることを確認してください。

（３） ページサイズ変更（resize）

resize イベントはブラウザのウィンドウの大きさが変えられるたびに発生します。

記述例

<div id="d1"></div>
<div id="d2"></div>

<script>
function dispEvent(event) {
  document.getElementById("d1").textContent = event.type;
}
function size() {
  document.getElementById("d2").textContent="(" + w.innerWidth + "," + w.innerHeight + ")";
}
var w = this.parent;    // window オブジェクト
w.addEventListener('load', size, false);
w.addEventListener('resize', function(event) {dispEvent(event); size()}, false);
</script>

ブラウザの大きさを変えてみてください。

（４） ハッシュ（hashchange）

ハッシュとは、URL の # 記号に続く部分です。

hashchange イベントは、ハッシュが変更された際に発生します。

記述例

<span id="a"></span><span id="b"></span><span id="c"></span>
<div id="d"></div>
<div id="h"></div>

<script>
function dispEvent(event) {
  event.preventDefault();    // デフォルトの処理を行わない
  document.getElementById("d").textContent = event.type;
  document.getElementById("h").textContent = this.location.hash;
}
window.addEventListener('hashchange', dispEvent, false);
</script>

<a href="#a">a</a><br>
<a href="#b">b</a><br>
<a href="#c">c</a>

a や b、c をクリックしてください。ハッシュが変わりますので hashchange イベントが発生し、ハッシュが表示されます。

（５） スクロール（scroll）

scroll イベントは、要素の内容がスクロールバーによってスクロールされたとき発生します。

記述例

<div id="d"></div>

<script>
function clear() {
  document.getElementById("d").textContent="";
}
function dispEvent(event) {
  document.getElementById("d").textContent=event.type;
}
var w = this.parent;    // window オブジェクト
w.addEventListener('mouseout', clear, false);
w.addEventListener('scroll', dispEvent, false);
</script>

スクロールバーをクリックする、マウスのホイールを回転させるなどしてスクロールさせてください。scroll イベントが発生します。

（６） エラー（error）

error イベントは、実行しようとした関数が定義されていないなどのとき発生します。

記述例

<div id="d"></div>
<script>
function dispEvent(event) {
  document.getElementById("d").textContent=event.type;
}
window.addEventListener('error', dispEvent, false);
func();               // ここでエラーが発生する
</script>

実行しようとした関数 func が定義されていないので error イベントが発生します。

（１） フォーカス（focus、blur）

focus イベントは要素が選択された際に発生します。

blur イベントは他の要素が選択されるなどして、現在の要素からフォーカスが外れた際に発生します。

記述例

<div id="d"></div>

<script>
window.addEventListener('focus', function() {document.getElementById("d").textContent='focus'}, false);
window.addEventListener('blur', function() {document.getElementById("d").textContent='blur'}, false);
</script>

下の入力欄の中をクリックしてみてください。focus イベントが発生し、focus という文字が表示されています。

下の入力欄の外をクリックしてみてください。blur イベントが発生し、blur という文字が表示されています。

（２） 入力（input、change、search、select）

input イベントは入力欄に何かを入れたら（文字を消しても）発生します。

change イベントは入力欄を変更した後、その入力欄を抜けたとき発生します。また、select 要素では入力欄を抜けなくても発生します。

search イベントは <input tyle="search">で [Enter]キーを押したとき、あるいは（もしあれば）× をクリックしたときに発生します。ただし、　では発生しません。

select イベントは入力されている文字列を選択（マウスの左ボタンを押しながら文字列上をドラッグ）したときに発生します。

記述例

<div id="d"></div>
<input id="text" type="text"><br>
<input id="search" type="search"><br>
<select id="select">
  <option value="0"></option>
  <option value="1" label="aaa">aaa</option>
  <option value="2" label="bbb">bbb</option>
  <option value="3" label="ccc">ccc</option>
</select>
  
<script>
function clear() {
  document.getElementById("d1").textContent="";
  document.getElementById("text").value="";
  document.getElementById("search").value="";
  document.getElementById("select").value="";
}
function dispEvent(event) {
  document.getElementById("d1").textContent+=event.type + " ";
}
document.body.addEventListener('mouseleave', clear, false);
var tx = document.getElementById("text");
tx.addEventListener('input', dispEvent, false);
tx.addEventListener('change', dispEvent, false);
tx.addEventListener('select', dispEvent, false);
var sc = document.getElementById("search");
sc.addEventListener('input', dispEvent, false);
sc.addEventListener('change', dispEvent, false);
sc.addEventListener('search', dispEvent, false);
sc.addEventListener('select', dispEvent, false);
var sl = document.getElementById("select");
sl.addEventListener('input', dispEvent, false);
sl.addEventListener('change', dispEvent, false);
</script>

下の入力欄に何か文字を入力してみてください。input イベントが発生し、input という文字が表示されています。

その後、他の入力欄に移ると change イベントが発生し、change という文字が表示されています。select 要素で選択しても発生します。

search と書かれた欄は検索用の入力欄です。ここに何か入力して [Enter]キーを押すと search イベントが発生し、search という文字が表示されています。

また、入力された文字列を選択（マウスの左ボタンを押しながら文字列上をドラッグ）すると select イベントが発生し、select という文字が表示されています。

（３） 不正入力（invalid）

invalid イベントは type 属性に合わない入力がされ、フォームが送信されたときに発生します。invalid イベントが発生する type 属性は url や email です。

記述例

<div id="d"></div>
<input id="t" type="email" value="EMAIL">
<input type="submit" value="送信">
<script>
function clear() {
  document.getElementById("d1").textContent="";
  document.getElementById("t").value="EMAIL";
}
function dispEvent(event) {
  document.getElementById("d1").textContent+=event.type + " ";
}
document.body.addEventListener('mouseleave', clear, false);
var t = document.getElementById("t");
t.addEventListener('invalid', dispEvent, false);
</script>

email の入力は、アットマーク（ @ ）を含む妥当なメールアドレスでなければ invalid イベントが発生します。

（４） ボタン（submit、reset）

submit イベントは submit ボタンがクリックされ、フォームが送信されたときに発生します。

reset イベントは reset ボタンがクリックされ、フォームの入力が初期状態に戻されたときに発生します。

記述例

<div id="d"></div>
<form id="f" action="#">
<input type="submit" value="送信">　<input type="reset" value="リセット">
</form>
<script>
function clear() {
  document.getElementById("d1").textContent="";
}
function dispEvent(event) {
  document.getElementById("d1").textContent+=event.type;
}
document.body.addEventListener('mouseleave', clear, false);
var f = document.getElementById("f");
f.addEventListener('submit', dispEvent, false);
f.addEventListener('reset', dispEvent, false);
</script>

（１） メッセージ（message）

message イベントは、別ウィンドウからメッセージを伝達された際に発生します。

記述例

<iframe src="other.htm" id="other" frameborder="1px" width="600px" height="40px"></iframe>
<script>
var d = new Date();
var iframe = document.getElementById('other');
iframe.contentWindow.postMessage("処理完了（" + d.toLocaleString() + "）", "/");   // メッセージ送信
</script>

other.htm

<div id="d"></div>
<div id="t"></div>

<script>
window.addEventListener('message', function(event){
  document.getElementById("d").textContent = event.type;   // イベントの種類
  document.getElementById("t").textContent = event.data;   // 受信メッセージ
});
</script>

メッセージを入力して「送信」ボタンをクリックしてください。iframe 内の HTML にメッセージが伝達されます。伝達された側には message イベントが発生し、伝達されたメッセージが表示されます。

（２） オンライン（online、offline）

online イベント発生ときに online と表示します。また、offline イベント発生ときに offline と表示します。

ただし、イベントが発生しているかどうかはよく分かりません。

記述例

<div id="d"></div>

<script>
window.addEventListener('online', function() {document.getElementById("d").textContent='online'}, false);
window.addEventListener('offline', function() {document.getElementById("d").textContent='offline'}, false);
</script>

（３） 履歴（popstate）

popstate イベントは、ブラウザの [戻る] や [進む] ボタンを使った場合に発生します。

また、history.back() や history.forward() でも同様に発生します。

記述例

<div id="d"></div>

<script>
history.pushState("aaaaa", null, null);
window.addEventListener('popstate', function(e){
  var d = new Date(e.timeStamp);
  document.getElementById('d').textContent = e.type + " " + d.toLocaleString();
});
</script>

「ヒストリ 2」で、ブラウザの [戻る] ボタンをクリックしたときに popstate イベントが発生し、イベント名と発生日時が表示されます。

ただし、 では、イベントが発生せず、 では、e.timeStamp が正しく設定されていないようです。

（１） プロパティ

Event オブジェクトには次のような属性が含まれています。

フェーズやイベントの伝播については、「１０．２　　イベントの伝播」を参照してください。

記述例

<title>Event</title>
<!-- 途中略 -->

<form id="f">
  <input id="t" type="text" size="5">
</form>
<br>
<span id="d11"></span> <span id="d21"></span>
<!-- 以下略 -->

<script>
function clear() {
  for (let i = 1 ; i != 3 ; i++) {
    for (let j = 1 ; j != 8 ; j++) {
      document.getElementById("d" + i + j).textContent="";
    }
  }
  t.style.backgroundColor = "white";
}
function focus1(event) {
  focus(event, 1);
}
function focus2(event) {
  focus(event, 2);
}
function focus(event, n) {
  event.target.style.backgroundColor = "pink";
  document.getElementById("d" + n + "0").textContent=event.type;
  document.getElementById("d" + n + "1").textContent=event.target.tagName + " id=" + event.target.id;
  document.getElementById("d" + n + "2").textContent=event.currentTarget.tagName + " id=" + event.currentTarget.id;
  document.getElementById("d" + n + "3").textContent=event.eventPhase;
  document.getElementById("d" + n + "4").textContent=event.bubbles;
  document.getElementById("d" + n + "5").textContent=event.cancelable;
  document.getElementById("d" + n + "6").textContent=event.defaultPrevented;
  document.getElementById("d" + n + "7").textContent=event.isTrusted;
  let d = new Date(event.timeStamp);
  document.getElementById("d" + n + "8").textContent=d.toLocaleString();
  document.getElementById("d" + n + "9").textContent=event.view.document.title;
}

var t = document.getElementById("t");
var f = document.getElementById("f");
t.addEventListener('blur', clear, false);
t.addEventListener('focus', focus1, false);  // Target  フェーズ（イベントが発生したオブジェクトのみ）
f.addEventListener('focus', focus2, true);   // Capture フェーズ（Document からイベント発生オブジェクトに向かって順にイベントが発生する）
</script>

input 要素と form 要素のそれぞれでイベントハンドラーが設定されています。

下の例の入力欄（input 要素）をクリックしてみてください。そうすると、input 要素に focus イベントが発生します。

input 要素と form 要素のそれぞれで得られたイベントオブジェクトを表示します。

なお、currentTarget はイベントを処理した要素とその id を表示しています。

また、view は イベントが発生した window オブジェクトですが、ここでは、その document の title を表示しています。

（２） インスタンス生成

Event のインスタンスを生成します。

Event 以外のインスタンス生成については、MouseEvent のみ記述しています。

「クリック」ボタンがクリックされると、イベントを生成して、input 要素に送信します。

記述例

<input id="text1" type="text" size="10"> <input id="text2" type="text" size="10">
　<div class="switch" onclick="fire();">クリック</div>

<script>
var t1 = document.getElementById("text1");
var t2 = document.getElementById("text2");
t1.addEventListener("focus", setDate);　　　　// focus イベントが発生すると、setDate() を呼び出す
t2.addEventListener("focus", setTime);　　　　// focus イベントが発生すると、setTime() を呼び出す

function fire() {
  var evt = new Event("focus", {"bubbles":true, "cancelable":true});
  t1.dispatchEvent(evt);　// focus イベントを発生させる
  t2.dispatchEvent(evt);　// focus イベントを発生させる
}
function setDate() {
  var dt = new Date();
  this.value = dt.toLocaleDateString();
}
function setTime() {
  var dt = new Date();
  this.value = dt.toLocaleTimeString();
}
</script>

「クリック」ボタンをクリックしてください。

（３） メソッド

Event オブジェクトの主なメソッドについて説明します。Event から派生した他のイベントオブジェクトでも利用できます。

フェーズやイベントの伝播については、「１０．２　　イベントの伝播」を参照してください。

（３－１） initEvent

createEvent によって作成された event の値を設定します。

cancelable については、（３－３） preventDefault の例を参照してください。

記述例

<table>
<tr><td>
  <div id="dv" style="width:200px;">div<br>
    <span id="sp">span　　　<input id="ip" type="checkbox">input</span><br><br>
  </div>
</td><td>
  <span id="d01"></span><br>
  <span id="d02"></span><br>
</td></tr>
</table>

<script>
let d;
function input() { document.getElementById(d).textContent = "input "; }
function span() { document.getElementById(d).textContent += "span "; }
function div() { document.getElementById(d).textContent += "div "; }
document.getElementById("ip").addEventListener("click", input);
document.getElementById("sp").addEventListener("click", span);
document.getElementById("dv").addEventListener("click", div);

let evt01 = getEvent(true);     // 伝搬する
let evt02 = getEvent(false);    // 伝搬しない
d = "d01";
document.getElementById("ip").dispatchEvent(evt01);
d = "d02";
document.getElementById("ip").dispatchEvent(evt02);

document.getElementById("ip").removeEventListener("click", input);
document.getElementById("sp").removeEventListener("click", span);
document.getElementById("dv").removeEventListener("click", div);

function getEvent(bubbles) {
  let evt = document.createEvent("HTMLEvents");
  evt.initEvent("click", bubbles, true);
  return evt;
}
</script>

bubbles が true のときは、click イベントが先祖要素（span や div）にも伝搬します。false のときは、伝播しません。

（３－２） stopPropagation

同じイベントハンドラーを複数の要素に指定した場合、イベントはそれらの要素に対して順番に発生していきます。stopPropagation() は、そうしたイベントの伝播を停止して、それ以降への伝播をせき止めます。

例えば、div 要素で stopPropagation() をすると、focus イベントは div 要素でのみ処理され、それ以降の要素には伝播しません。

記述例

<label id="stop" style="display:block;">stopPropagation
<select id="s">
  <option value="div" label="div"></option>
  <option value="form" label="form"></option>
  <option value="input" label="input" selected></option>
</select>
</label>
<br>
  
<div id="d">
  <form id="f">
    <input id="t" type="text" size="5"> <span id="d11"></span> <span id="d12"></span> <span id="d13"></span>
  </form>
</div>
  
<script>
var n = 1;
function clear() {
  n = 1;
  document.getElementById("d11").textContent="";
  document.getElementById("d12").textContent="";
  document.getElementById("d13").textContent="";
  t.style.backgroundColor = "white";
}
function focus(element) {
  return function (event) {
    event.target.style.backgroundColor = "pink";
    document.getElementById("d1" + n++).textContent=element;
    if (document.getElementById("s").value == element)          // "s" は stopPropagation を選択する select 要素
      event.stopPropagation();    // イベントの伝播を止める
  }
}

var t = document.getElementById("t");    // input 要素
var f = document.getElementById("f");    // form 要素
var d = document.getElementById("d");    // div 要素
t.addEventListener('blur', clear, false);
t.addEventListener('focus', focus("input"), true);
f.addEventListener('focus', focus("form"), true);
d.addEventListener('focus', focus("div"), true);
</script>

<div> - <form> - <input> の順にイベントが伝播します。イベントの伝播を停止する要素を stopPropagation で指定して、下の入力欄をクリックしてください。入力欄の上にイベントを処理した要素名が表示されます。

（３－３） preventDefault

イベントの伝播を止めずに、そのイベントのデフォルトの動作をキャンセルします。

ただし、イベントの cancelable が true の場合のみ有効です。これは、new Event（サブクラスも含む）か、あるいは、createEvent でイベントを生成したときに設定できます。

記述例

<form id="f" name="f">
  <label id="l1" style="background-color:yellow;"><input id="c1" name="c" type="checkbox" value="1" checked> 1 </label>
  <label id="l2" style="background-color:cyan;"><input id="c2" name="c" type="checkbox" value="2"> 2 </label>
   <span id="d11"></span> <span id="d12"></span> <span id="d13"></span> <span id="d14"></span> <span id="d15"></span>
</form>
<script>
var n = 1;
function clear() {
  n = 1;
  document.getElementById("d11").textContent="";
  document.getElementById("d12").textContent="";
  document.getElementById("d13").textContent="";
  document.getElementById("d14").textContent="";
  document.getElementById("d15").textContent="";
}
function click1(event) {
  click(event, "input");
}
function click21(event) {
  click(event, "label");
}
function click22(event) {
  click(event, "label");
  event.preventDefault();         // デフォルトの動作をキャンセル（2 の方）
}
function click3(event) {
  click(event, "form");
}
var preTime = 0;
function click(event, element) {
  if (preTime <= event.timeStamp -100) {
    clear();
    preTime = event.timeStamp;
  }
  document.getElementById("d1" + n++).textContent=element;
}

var c1 = document.getElementById("c1");
var c2 = document.getElementById("c2");
var l1 = document.getElementById("l1");
var l2 = document.getElementById("l2");
var f = document.getElementById("f");
f.addEventListener('blur', clear, false);
c1.addEventListener('click', click1, true);
c2.addEventListener('click', click1, true);
l1.addEventListener('click', click21, true);
l2.addEventListener('click', click22, true);
f.addEventListener('click', click3, true);
</script>

チェックボックスをクリックした場合は、左側（1の方）は通常通りデフォルトの動作としてチェックの表示・非表示が変わります。右側（2の方）は preventDefault() を実行しているので、チェックの表示・非表示が変わりません。また、イベントは共に form → label → input の順に伝播します。

ただし、ラベル（1 や 2 が表示された部分）をクリックした場合は、ラベルとチェックボックスに対してイベントが（伝播して）発生します（チェックボックスをクリックした場合はチェックボックスにのみイベントが発生します）。したがって、イベントは form → label と form → label → input の順に伝播するはずですが、preventDefault() をラベルのイベントハンドラーで実行している 2 の方は、なぜかラベルに対してのみイベント form → label が発生します。

preventDefault() を実行すると、デフォルトの動作をキャンセルできません。cancelable が true か false かは関係なさそうです。

なお、は、生成したイベントを送ってもデフォルトの動作が行われませんが、チェックボックスを直接クリックすれば、preventDefault() を実行した方はチェックが付きませんので、preventDefault() が有効であることが分かります。

記述例

<input id="check01" type="checkbox">check01 <input id="check02" type="checkbox">check02<br>
<input id="check11" type="checkbox">check11 <input id="check12" type="checkbox">check12<br>

<script>
document.getElementById("check01").addEventListener("click", function(event){
  event.preventDefault();
});
document.getElementById("check11").addEventListener("click", function(event){
  event.preventDefault();
});
let evt01 = getEvent(true);     // cancelable true
let evt02 = getEvent(true);
let evt11 = getEvent(false);    // cancelable false
let evt12 = getEvent(false);
document.getElementById("check01").dispatchEvent(evt01);
document.getElementById("check02").dispatchEvent(evt02);
document.getElementById("check11").dispatchEvent(evt11);
document.getElementById("check12").dispatchEvent(evt12);

function getEvent(cancelable) {
  let evt;
  try {
    evt = new MouseEvent("click", {"cancelable":cancelable});  // Edge、Chrome、Firefox、Opera、Sleipnir 用
  }
  catch(x) {
    evt = document.createEvent("HTMLEvents");                  // internet explorer、 Safari 用
    evt.initEvent("click", true, cancelable);
  }
  return evt;
}
</script>

（１） プロパティ

では、スタイルシートの属性名の最初に -webkit- を付け（例：-webkit-animation-name）、イベント名は 最初に webkit を付けて単語の区切りを大文字にする（例：webkitAnimationStart）必要があります。

記述例

スタイルシート
@keyframes anime {
  from {width: 50px; height: 50px; background-color: aqua;}
  to {width: 200px; height: 50px; background-color: lightgreen;}
}
div.anim {
  animation-iteration-count:3;
  animation-duration:5s;
}

ボディ
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<div id="a" class="anim" style="animation-name:anime;" onclick="location.reload();">アニメーション</div>
<script>
function anim(event) {
  document.getElementById("d1").textContent=event.type;
  document.getElementById("d2").textContent=event.animationName;
  document.getElementById("d3").textContent=event.elapsedTime;
}
var a = document.getElementById("a");
a.addEventListener('animationstart', anim, false);
a.addEventListener('animationiteration', anim, false);
a.addEventListener('animationend', anim, false);
</script>

"アニメーション" をクリックするとアニメーションが始まります。同じアニメーションを3回繰り返します。そして、その都度イベントオブジェクトを表示します。

（１） プロパティ

BeforeUnloadEvent 固有のプロパティは次のようなものがあります。

記述例

<input id="t" type="text"><br><br>
<div class="switch" onclick="go();">go</div>
<script>
function message(event) {
  if (document.getElementById("t").value.length > 0) {  // なんらか入力されたら returnValue に設定する
    event.returnValue = document.getElementById("t").value;
  }
}
function go() {
  window.addEventListener('beforeunload', message, false);
  location.href='other.htm'
}
</script>

入力欄になんらかを入力し［go］ボタンをクリックすると、ではサイトを離れるかどうかを聞くダイアログが表示されません。

（１） プロパティ

ClipboardEvent 固有のプロパティは次のようなものがあります。

では DragEvent のイベントオブジェクトが引数として渡るようなので、下の例では引数に clipboardData がない場合には window.clipboardData を使用するようにしています。

記述例（copy イベント）

<span id="d">ここの文章はコピーできませんので、悪しからず。</span><br>
<input id="o" size="60">
<script>
function copy(event) {
  event.preventDefault();    // デフォルトの処理を行わない
  var clip = event.clipboardData;
  clip.setData("text", "コピーはダメ！");   // クリップボードに格納する
}
document.getElementById("d").addEventListener('copy', copy, false);
</script>

"ここの文章はコピーできませんので、悪しからず。"のどこかをコピー（Ctrl-C あるいは メニューの「コピー」）して、下の入力欄に貼り付け（Ctrl-V あるいは メニューの「貼り付け」）をしてください。copy イベントでクリップボードに"コピーはダメ！"を格納していますので、入力欄には"コピーはダメ！"が挿入されます。

記述例（paste イベント）

<input id="o" size="30"><br>
<span id="d"></span>
<script>
function paste(event) {
  event.preventDefault();    // デフォルトの処理を行わない
  var clip = event.clipboardData || window.clipboardData;      // IE は window
  document.getElementById("o").value = clip.getData("text");   // プレーンテキストをクリップボードから得る
  document.getElementById("d").textContent = (new Date()).toLocaleString();   // 日時
}
document.getElementById("o").addEventListener('paste', paste, false);
</script>

どこかの文字列をコピーして、下の入力欄を選択し貼り付け（Ctrl-V あるいは メニューの「貼り付け」）をしてください。paste イベントが発生し、入力欄にコピーした文字列が上書きされます。また、その下には貼り付けた日時が表示されます。

（１） プロパティ

MessageEvent 固有のプロパティは次のようなものがあります。

[演算]ボタンがクリックされたら入力欄の数値を iframe 内に送ります。演算結果は iframe 内から直接書き換えています。

記述例

<title>message</title>
<!-- 略 -->

<input id="v1" type="number" size="5"> <span id="op">　</span> <input id="v2" type="number" size="5"> = <span id="ans"></span><br>
<br>
<div class="switch" onclick="send();">演算</div><br><br>
<iframe src="add.htm" id="add" frameborder="1px" width="600px" height="100px"></iframe>
<script>
function send() {
  var d = {a:document.getElementById("v1").value, b:document.getElementById("v2").value};
  var iframe = document.getElementById("add");
  iframe.contentWindow.postMessage(d, "/");    // iframe 内にメッセージ送信
}
</script>

add.htm

<div id="d1"></div>
<!-- 以下略 -->

<script>
window.addEventListener('message', function(event){
  document.getElementById("d1").textContent = event.data.a + " " + event.data.b;  // メッセージ
  document.getElementById("d2").textContent = event.origin;
  document.getElementById("d3").textContent = event.ports;
  document.getElementById("d4").textContent = event.source.document.title;
  // 演算結果をメッセージ送信元に書き込む
  var p = event.source.document;
  var v1 = parseFloat(event.data.a);
  p.getElementById("v1").value = v1;
  var v2 = parseFloat(event.data.b);
  p.getElementById("v2").value = v2;
  p.getElementById("op").textContent = "＋";
  p.getElementById("ans").textContent = v1 + v2;
});
</script>

入力欄に数値を入力して[演算]ボタンをクリックしてください。入力した内容などが表示されます。また、演算結果などが入力欄の横に表示されます。

source にはメッセージ送信元の window オブジェクトが設定されます。この例では送信元の title 要素を表示しています。

上の例は、演算結果を source（メッセージの送信元）から得られた要素に直接書き込んでいましたが、次の例は、MessagePort で渡す方法で実現してみます。

記述例

<input id="v1" type="number" size="5"> <span id="op">　</span> <input id="v2" type="number" size="5"> = <span id="ans"></span><br>
<br>
<div class="switch" onclick="send();">演算</div><br><br>
<div id="d1"></div>
<div id="d2"></div>
<iframe src="add.htm" id="add" frameborder="1px" width="600px" height="40px"></iframe>
<script>
function send() {
  var d = {a:document.getElementById("v1").value, b:document.getElementById("v2").value};
  var iframe = document.getElementById("add");
  iframe.contentWindow.postMessage(d, "/");    // iframe 内にメッセージ送信
}
window.addEventListener('message', function(event){
  document.getElementById("d1").textContent = event.ports;
  document.getElementById("d2").textContent = event.source.document.title;

  var port = event.ports[0];  // iframe 側から送られてきたポート
  port.start();  // 受信可能にする
  // ポートに対して送られてきたメッセージを表示する
  port.addEventListener('message', function(event){
    document.getElementById("v1").value = event.data.v1;
    document.getElementById("v2").value = event.data.v2;
    document.getElementById("op").textContent = event.data.op;
    document.getElementById("ans").textContent = event.data.ans;
  });
});
</script>

add.htm

<title>加算</title>
<!-- 略 -->

<div id="d1"></div>
<!-- 以下略 -->

<script>
var channel = new MessageChannel();
window.parent.postMessage({},"/",[channel.port2]);    // ポートを送信
channel.port1.start();

window.addEventListener('message', function(event){
  document.getElementById('d1').textContent = event.data.a + " " + event.data.b;
  var p = event.source.document;
  var v1 = parseFloat(event.data.a);
  var v2 = parseFloat(event.data.b);
  channel.port1.postMessage({v1:v1, v2:v2, op:"＋", ans:v1 + v2});    // 演算結果をポートを通して送信
});
</script>

（１） プロパティ

Event オブジェクトのプロパティに加え、主なプロパティとして以下のものがあります。

レイヤー上における...

ウェブページ（ドキュメント）の左上が基点で、スクロールしても変わりません。ただし static 以外の position が指定されたボックスなどであれば、基点はボックスの左上になります。

（１）プロパティ

UIEvent オブジェクトのプロパティに加え、主なプロパティとして以下のものがあります。

記述例（クリック）

<span id="d11"></span> <span id="d12"></span> <span id="d13"></span>
<!-- 以下略 -->

<script>
function disp(event) {
  event.preventDefault();    // デフォルトの処理を行わない
  document.getElementById("d11").textContent = event.shiftKey;
  document.getElementById("d12").textContent = event.ctrlKey;
  document.getElementById("d13").textContent = event.altKey;
  document.getElementById("d21").textContent = event.button;
  document.getElementById("d22").textContent = event.buttons;
  document.getElementById("d31").textContent = "(" + event.screenX + "," + event.screenY + ")";
  document.getElementById("d32").textContent = "(" + event.clientX + "," + event.clientY + ")";
  document.getElementById("d33").textContent = "(" + event.offsetX + "," + event.offsetY + ")";
}
var p = document.getElementById("p");
p.addEventListener('mouseup', disp, false);
p.addEventListener('mousedown', disp, false);
</script>

Shift キーや Ctrl キー、Alt キーなども押しながら黄色い四角内をクリックしてみてください。押されているキーやクリックした座標が表示されます。

button、buttons は、click イベントでは正しく取得できませんので、この例では、mouseup、mousedown イベントですべての情報を得ています。

記述例（移動）

<span id="d11"></span> <span id="d12"></span> <span id="d13"></span>
<span id="d21"></span>

<script>
function move(event) {
  event.preventDefault();    // デフォルトの処理を行わない
  document.getElementById("d11").textContent = "(" + event.screenX + "," + event.screenY + ")";
  document.getElementById("d12").textContent = "(" + event.clientX + "," + event.clientY + ")";
  document.getElementById("d13").textContent = "(" + event.offsetX + "," + event.offsetY + ")";
  document.getElementById("d21").textContent = "(" + event.movementX + "," + event.movementY + ")";
}
var p = document.getElementById("p");
p.addEventListener('mousemove', move, false);
</script>

黄色い四角内でマウスポインターを移動させてみてください。移動している座標が表示されます。

記述例（対象要素）

マウスポインターの移動前の要素、あるいは移動後の要素を得ることができます。

<table style="border-collapse:collapse;font-size:9pt;">
  <tr style="vertical-align:top;">
    <td id="Ａ" class="box outer"></td>
    <td id="Ｂ" class="box inner"></td>
  </tr>
  <tr style="vertical-align:top;">
    <td id="Ｃ" class="box inner"></td>
    <td id="Ｄ" class="box outer"></td>
  </tr>
</table>

<script>
function disp(event, n, dir1, dir2) {
  if (event.relatedTarget == null)
    return;
  event.preventDefault();    // デフォルトの処理を行わない
  document.getElementById(n).innerHTML = event.target.id + "　　　(" + event.type + ")<br>" 
           + "relatedTarget :　" + dir1 + event.relatedTarget.id + dir2;
}
var topLeft = document.getElementById("Ａ");
topLeft.addEventListener('mouseleave', function(event) {disp(event, "Ａ", "→", "");}, false);
topLeft.addEventListener('mouseover', function(event) {disp(event, "Ａ", "", "→");}, false);
var topRight = document.getElementById("Ｂ");
topRight.addEventListener('mouseleave', function(event) {disp(event, "Ｂ", "→", "");}, false);
topRight.addEventListener('mouseover', function(event) {disp(event, "Ｂ", "", "→");}, false);
var bottomLeft = document.getElementById("Ｃ");
bottomLeft.addEventListener('mouseleave', function(event) {disp(event, "Ｃ", "→", "");}, false);
bottomLeft.addEventListener('mouseover', function(event) {disp(event, "Ｃ", "", "→");}, false);
var bottomRight = document.getElementById("Ｄ");
bottomRight.addEventListener('mouseleave', function(event) {disp(event, "Ｄ", "→", "");}, false);
bottomRight.addEventListener('mouseover', function(event) {disp(event, "Ｄ", "", "→");}, false);
</script>

4つの領域の中でマウスポインターを移動させてみてください。領域ごとに発生したイベントと relatedTarget（この例では relatedTarget の id）が表示されます。

"名前→" は、名前の領域から移動してきたことを表し、"→名前" は名前の領域に移動したことを表しています。

（２） インスタンス生成

MouseEvent のインスタンスを生成します。

黄色い四角を直接クリックしたときに発生するイベントと同じものを「クリック」ボタンによって生成します。

ただし、clientX などの座標は実際にクリックしていないので設定された値をそのまま送信します。したがって、screenX と clientX との間などに矛盾があるかもしれません。

記述例

<table>
<tr><td>
 <input id="shft" type="checkbox"> <input id="ctrl" type="checkbox" checked> <input id="alt" type="checkbox"> <input id="meta" type="checkbox"> 
 <input id="screenX" type="text" size="4" value="100"> <input id="screenY" type="text" size="4" value="200">
</td><td rowspan="2">
 <div class="switch" onclick="fire();">クリック</div>
</td></tr>
<tr><td>
 <input id="left" type="checkbox" checked> <input id="middle" type="checkbox"> <input id="right" type="checkbox">
</td></tr>
</table>

<div id="p" class="box" style="width:50px;height:50px;margin:10px;"></div>
<span id="d11"></span> <span id="d12"></span> <span id="d13"></span> <span id="d14"></span><br>
<!-- 以下略 -->

<script>
function fire() {
  var bLeft = document.getElementById("left").checked;
  var bMiddle = document.getElementById("middle").checked;
  var bRight = document.getElementById("right").checked;
  var init = {
      "shiftKey" : document.getElementById("shft").checked,
      "ctrlKey" : document.getElementById("ctrl").checked,
      "altKey" : document.getElementById("alt").checked,
      "metaKey" : document.getElementById("meta").checked,
      "button" : bLeft ? 0 : (bMiddle ? 1 : 2),
      "buttons" : (bLeft ? 1 : 0) | (bRight ? 2 : 0) | (bMiddle ? 4 : 0),
      "screenX" : parseInt(document.getElementById("screenX").value),
      "screenY" : parseInt(document.getElementById("screenY").value),
      "clientX" : parseInt(document.getElementById("clientX").value),
      "clientY" : parseInt(document.getElementById("clientY").value)
  }
  var evt = new MouseEvent("click", init);    // 入力された情報をもとに MouseEvent オブジェクトを生成
  p.dispatchEvent(evt);                       // イベントを送信
}

function click(event) {
  event.preventDefault();    // デフォルトの処理を行わない
  document.getElementById("d11").textContent = event.shiftKey;
  document.getElementById("d12").textContent = event.ctrlKey;
  document.getElementById("d13").textContent = event.altKey;
  document.getElementById("d14").textContent = event.metaKey;
  document.getElementById("d21").textContent = event.button;
  document.getElementById("d22").textContent = event.buttons;
  document.getElementById("d31").textContent = "(" + event.screenX + "," + event.screenY + ")";
  document.getElementById("d32").textContent = "(" + event.clientX + "," + event.clientY + ")";
}

var p = document.getElementById("p");
p.addEventListener("click", click, false);
</script>

「クリック」ボタンをクリックしてください。

（１） プロパティ

MouseEvent オブジェクトのプロパティに加え、主なプロパティとして以下のものがあります。

記述例

<div>
この文章のどこでも好きなところを選択して、下のボックスにドラッグしてください。<img src="bear.png">
</div>

<div id="box"></div>
<div id="d1"></div>
<!-- 以下略 -->

<script>
var text;
var node;
var timer;
var count = 0;
function imageLoaded() {
  if (node.naturalHeight > 0) {   // ie 以外は読み込めてなくても node.complete が true になる
    window.clearInterval(timer);
    set();
  }
  else {
    if (--count < 0) {
      window.clearInterval(timer);
      delete node;       // 画像が読み込めなければ通常のテキスト表示にする
      node = document.createTextNode(text);
      set();
    }
  }
}
function  createNode(text) {
  node = new Image();
  node.src = text;         // text を画像の URL として img 要素を作る
  count = 12;
  timer = setInterval('imageLoaded()', 1000 / count);
}
function dispFiles(files) {
  var f = "";
  for (var i = 0 ; i < files.length ; i++) {
    f += files[i].name + " ";
  }
  return f;
}
function dispTypes(types) {
  var t = "";
  for (var i = 0 ; i < types.length ; i++) {
    t += types[i] + " ";
  }
  return t;
}
function cancel(event) {
  event.preventDefault();
}
function dragstart(event) {    // 他のウィンドウからドラッグが始まった時はここは実行されない
  if (event.target.src != undefined)    // src 属性があれば img 要素
    event.dataTransfer.setData("Text", event.target.src);
  else
    event.dataTransfer.setData("Text", window.getSelection().toString());
}
var dropEffect;
var effectAllowed;
var files;
var types;
function drop(event) {
  event.preventDefault();
  try {
    dropEffect = event.dataTransfer.dropEffect;
    effectAllowed = event.dataTransfer.effectAllowed;
  }
  catch(e) {
    effectAllowed = "";
  }
  files = event.dataTransfer.files;
  types = event.dataTransfer.types;
  text = event.dataTransfer.getData("Text");    // 他のウィンドウからドラッグが始まった時は値が設定されていない
  var f = dispFiles(files);
  var t = dispTypes(types);
  if (text == "")
    text = f;
  createNode(text);
}
function set() {
  document.getElementById("box").appendChild(node);
  document.getElementById("d1").textContent = dropEffect;
  document.getElementById("d2").textContent = effectAllowed;
  document.getElementById("d3").textContent = dispFiles(files);
  document.getElementById("d4").textContent = dispTypes(types);
}
document.getElementById("box").addEventListener('drop', drop, false);
document.getElementById("box").addEventListener('dragover'", cancel, false);

window.addEventListener('dragstart', dragstart, false);
</script>

選択した文字列か画像をドラッグして、下のボックスに移してください。

ドロップしたときの dataTransfer の主な内容を表示しています。ただし、この内容はブラウザによって異なります。

また、エクスプローラーからファイルをドロップすると files にファイル情報が設定されます。

なお、ボックスをダブルクリックすると初期状態に戻ります。

（１） プロパティ

WheelEvent 固有のプロパティは次のようなものがあります。

また、いくつかのブラウザでは MouseWheelEvent（？） のイベントオブジェクトが引数として渡るようです。ただし、回転方向と数値の正負が WheelEvent とは逆になっています。

記述例

<div id="p">    <!-- 黄色の四角 -->
X → <span id="x"></span><br>
Y → <span id="y"></span><br>
</div>

<script>
function limit(s, v, d, l, h) {
  s += v / d;
  if (s < l)
    s = l;
  else if (s > h)
    s = h;
  return s;
}
var w = 100;
var h = 75;
function resize(event) {
  event.preventDefault();    // デフォルトの処理を行わない
  var x = 0;
  var y = 0;
  var d = 0;
  if (event.deltaX == undefined) {
    if (event.wheelDeltaX == undefined) {
      x = 0;
      y = event.wheelDelta;   // IE
    }
    else {
      x = event.wheelDeltaX;  // Safari
      y = event.wheelDeltaY;
    }
    d = 120;
  }
  else {
    x = event.deltaX;         // Edge Chrome Opera Sleipnir
    y = event.deltaY;
    d = 100;
  }
  document.getElementById("x").textContent = x;
  document.getElementById("y").textContent = y;
  w = limit(w, x, d, 50, 500);
  h = limit(h, y, d, 50, 100);
  p.style.width = w + "px";
  p.style.height = h + "px";
}
var p = document.getElementById("p");
p.addEventListener('mousewheel', resize, false);
</script>

黄色い四角の上でマウスホイールを回転させてください。回転量が表示され黄色い矩形のサイズが変わります。横方向に対応したマウスでは水平方向も変わります。

（１） プロパティ

FocusEvent 固有のプロパティは次のようなものがあります。

記述例

<form id="f" name="f">
  <textarea id="Ａ" name="Ａ" rows="3" cols="20"></textarea>　<textarea id="Ｂ" name="Ｂ" rows="3" cols="20"></textarea><br>
  <textarea id="Ｃ" name="Ｃ" rows="3" cols="20"></textarea>　<textarea id="Ｄ" name="Ｄ" rows="3" cols="20"></textarea><br>
</form>
<script>
function disp(event, n, dir1, dir2) {
  if (event.relatedTarget == null)
    return;
  event.preventDefault();    // デフォルトの処理を行わない
  document.f.elements[n].value = event.target.id + "　　　(" + event.type + ")\n" 
           + "relatedTarget :　" + dir1 + event.relatedTarget.id + dir2 + "\n";
}

var topLeft = document.getElementById("Ａ");
topLeft.addEventListener('focus', function(event) {disp(event, "Ａ", "", "→");}, false);
topLeft.addEventListener('blur', function(event) {disp(event, "Ａ", "→", "");}, false);
var topRight = document.getElementById("Ｂ");
topRight.addEventListener('focus', function(event) {disp(event, "Ｂ", "", "→");}, false);
topRight.addEventListener('blur', function(event) {disp(event, "Ｂ", "→", "");}, false);
var bottomLeft = document.getElementById("Ｃ");
bottomLeft.addEventListener('focus', function(event) {disp(event, "Ｃ", "", "→");}, false);
bottomLeft.addEventListener('blur', function(event) {disp(event, "Ｃ", "→", "");}, false);
var bottomRight = document.getElementById("Ｄ");
bottomRight.addEventListener('focus', function(event) {disp(event, "Ｄ", "", "→");}, false);
bottomRight.addEventListener('blur', function(event) {disp(event, "Ｄ", "→", "");}, false);
</script>

4つの領域を適当にクリックしてみてください。領域ごとに発生したイベントと relatedTarget（この例では relatedTarget の id）が表示されます。

"名前→" は、直前に名前の領域がフォーカスを持っていたことを表し、"→名前" は直後に名前の領域がフォーカスを持ったことを表しています。

（１） プロパティ

KeyboardEvent 固有のプロパティは次のようなものがあります。

記述例

<input id="t" size="1">
<span id="d11"></span><span id="d12"></span><span id="d13"></span><span id="d14"></span><br>
  <!-- 以下略 -->

<script>
function keydown(event) {
  event.preventDefault();    // デフォルトの処理を行わない
  document.getElementById("d11").textContent = event.shiftKey;
  document.getElementById("d12").textContent = event.ctrlKey;
  document.getElementById("d13").textContent = event.altKey;
  document.getElementById("d14").textContent = event.metaKey;
  document.getElementById("d21").textContent = event.key;
  document.getElementById("d22").textContent = event.code;
  document.getElementById("d23").textContent = event.location;
  document.getElementById("d41").textContent = event.repeat;
  document.getElementById("d51").textContent = event.locale;
}
var t = document.getElementById("t");
t.addEventListener('keydown', keydown, false);
</script>

どのキーでも押してみてください。押されたキーによって表示が変わります。

また、同じキーを押し続けると repeat が true になります。

（１） プロパティ

PageTransitionEvent 固有のプロパティは次のようなものがあります。

記述例

<div id="d">
<div class="switch" onclick="location.reload();">リロード</div>

<script>
window.addEventListener('pageshow', function(event) {document.getElementById("d").textContent=event.persisted;}, false);
</script>

リロードしても false しか返らないようです。

（１） プロパティ

TouchEvent 固有のプロパティは次のようなものがあります。

記述例

<div id="e" style="width:200px;height:100px;border:solid 1px gray;"></div>
<span id="d11"></span><span id="d12"></span><span id="d13"></span><span id="d14"></span><br>
<span id="d21"></span><br>
<!-- 以下略 -->

<script>
function clear() {
  document.getElementById("d11").textContent = "";
  <!-- 以下略 -->
}
function dispList(list) {
  var s = "";
  for (var i = 0 ; i < list.length ; i++) {
    s += "(" + parseInt(list[i].clientX) + "," + parseInt(list[i].clientY) + ") ";
  }
  return s;
}
function touchmove(event) {
  event.preventDefault();    // デフォルトの処理を行わない
  document.getElementById("d11").textContent = event.shiftKey;
  document.getElementById("d12").textContent = event.ctrlKey;
  document.getElementById("d13").textContent = event.altKey;
  document.getElementById("d14").textContent = event.metaKey;
  document.getElementById("d21").textContent = dispList(event.changedTouches);
  document.getElementById("d31").textContent = dispList(event.targetTouches);
  document.getElementById("d41").textContent = dispList(event.touches);
}
var e = document.getElementById("e");
e.addEventListener('touchmove',  touchmove, false);
</script>

四角の中をタッチしてみてください。（ただし、もちろんタッチパネルで）

マルチタッチにも対応しています。

（１） プロパティ

TouchEvent 固有のプロパティは次のようなものがあります。

サーバーによっては、lengthComputable は false、total は 0 のままのことがある。

記述例

<span id="d21"></span><br>

<script>
var loaded = document.getElementById("d1");
var total = document.getElementById("d2");
var percentage = document.getElementById("d3");
var client = new XMLHttpRequest();
client.open("GET", "large.png");
client.onprogress = function(pe) {
  if (pe.lengthComputable) {
    loaded.textContent = pe.loaded;
    if (pe.total > 0) {
      total.textContent = pe.total;
      percentage.textContent = (pe.loaded * 100 / pe.total).toFixed(1) + "%"; 
    }
  }
}
client.onloadend = function(pe) {
  loaded.textContent = pe.loaded;
  total.textContent = pe.total;
  if (pe.total > 0) {
    percentage.textContent = (pe.loaded * 100 / pe.total).toFixed(1) + "%";
  }
}
client.send()
</script>