@ JavaScript

event:実行とタイミング

DOM要素に特定のイベントに処理を関連付ける方法3つあります。

  1. HTML 要素の属性にイベントハンドラを登録する
  2. DOM 要素のプロパティにイベントハンドラを登録する
  3. DOM 要素にイベントリスナを登録する

1. HTML 要素の属性にイベントハンドラを登録する

event-01.html では、<p> 要素がクリックされた際に、onClick 属性を使って登録した onclick イベントハンドラがイベントを検地して、onClick の属性値に設定した JavaScript コード testFunc(); を実行します。

event_01.html

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="utf-8">
<title>sample</title>
<style>
p {
  cursor: pointer;
}
</style>
</head>

<body>
<script>
function testFunc(){
  alert('クリックされました。');
}
</script>
<p onClick="testFunc();">Clikc me!</p>
</body>

</html>

demo

2. DOM要素のプロパティーにイベントハンドラを登録する

event-02.html では、getElementById(‘trigger’) で trigger という id を設定した要素を取得し、要素の onclick プロパティに設定したイベントハンドラがイベントを検地して testFunc() が呼び出されます。

event_02.html

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="utf-8">
<title>sample</title>
<style>
p {
  cursor: pointer;
}
</style>
</head>

<body>
<p id='trigger'>Clikc me!</p>
<script>
function testFunc(){
  alert('クリックされました。');
}
document.getElementById('trigger').onclick=testFunc;
</script>
</body>

</html>

demo

window オブジェクトの onload プロパティを使い、ページがよみこまれた際にスクリプトを実行することができます。

event_03.html

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="utf-8">
<title>sample</title>
<script>
window.onload=function(){
  alert('実行されました。');
};
</script>
</head>

<body>
</body>

</html>

3. DOM要素にイベントリスナを登録する

特定のDOM要素にイベントリスナーを登録するには、その要素の addEventListener() メソッドを呼び出します。

このメソッドは引数を3つ渡します。第1引数はイベントタイプ、第2引数にはイベントが発生したときに呼び出されるリスナー関数(イベントが発生したときに通知を受け取るオブジェクトまたは関数)、第3引数キャプチャリングの設定です。

第3引数を ture を指定すると event の伝播をキャプチャリングに設定することができます。

event_04.html

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="UTF-8">
<title>sample</title>
<style>
body {
  font-size: 50px;
  line-height: 1.5;
  margin-top: 100px;
  cursor: pointer;
  text-align: center;
}
</style>
</head>

<body>
<div id="trigger">Click Me!</div>
<script>
function testFunc1(){
  alert('testFunc1を実行')
}
function testFunc2(){
  alert('testFunc2を実行')
}
document.getElementById('trigger');
trigger.addEventListener('click', testFunc1, false);
trigger.addEventListener('click', testFunc2, false);
</script>
</body>

</html>

demo

キャプチャリングでは document からイベントが発生し、DOM ツリーを下りながらイベントが発生した要素まで順番にイベントが実行されます。

capturing.html

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="UTF-8">
<title>sample</title>
<style>
#wrap {
  width: 200px;
  margin: 100px auto;
}
.green {
  width:200px;
  background-color:#44ff44;
  text-align:center;
}
.blue {
  width:80%;
  margin:auto;
  background-color:#4444ff;
}
.text {
  border:1px solid white;
  color:white;
}
</style>
</head>

<body>
  <div id=wrap>
    <div id="green1" class="green">
      <br>
      <div id="blue1" class="blue">
        <br>
        <span id="text1" class="text">text</span><br>
        <br>
      </div>
      <br>
    </div>
  <script>
  document.getElementById("green1").addEventListener(
    "mousedown", function () {alert("Green")}, true);  // useCapture true
  document.getElementById("blue1").addEventListener(
    "mousedown", function () {alert("Blue")}, false);
  document.getElementById("text1").addEventListener(
    "mousedown", function () {alert("Text")}, false);
  </script>
  </div>
</body>

</html>