JavaScriptのAddEventListenerの用途や使用例について

投稿日：2021年6月9日更新日：2021年6月25日

＜目次＞

(１) JavaScriptのAddEventListenerの用途や使用例について
　 (１-１) 概要
　 (１-２) 構文
　 (１-３) サンプルプログラム

(１) JavaScriptのAddEventListenerの用途や使用例について

(１-１) 概要

AddEventListenerは画面上のイベント（例：マウスクリックなど）をリッスン（イベントに備えて待機）し、イベント発生時に予め指定したfunctionを、指定した範囲に適用する事ができます。このAddEventListenerの構文や基本的な使い方をご紹介します。

＞目次にもどる

(１-２) 構文

（構文）

[①対象オブジェクト].addEventListener([②イベント],[③実行するfunction],[④Captureの使用有無],);

（構文説明）

①対象オブジェクト	functionを適用する対象範囲を指定します。以下の例はwindowやdocumentですが、実際は<table>要素など範囲を限定して指定する事も可能です。（例１） document ⇒ document全体でイベント（②）を検知したらfunction（③）を実行（例２） window ⇒ window全体でイベント（②）を検知したらfunction（③）を実行
②イベント	【必須】リッスンする対象のイベントを指定します。（例）マウスクリック “click”
③実行するfunction	【必須】リッスンしているイベント（例：clickなど）が発生した際に、実行するfunctionです。
④Captureの使用有無	【任意】イベント発生時の処理の適用順序を制御するboolean型のフラグです。 (a) true：Capturing方式で適用（外側⇒内側に適用） (b) false：Bubbling方式で適用（内側⇒外側に適用）

＞目次にもどる

(１-３) サンプルプログラム

●JavaScript

表の「apple」の金額（初期値：200）と「banana」の金額（初期値：120）を取得して、それが「500」以下なら1.1倍するプログラムです。これをマウスクリック（click）のイベントが発生したら実行するように、最後にaddEventListenerを指定しています。

（サンプル）

//## AddEventListenerの挙動確認
//# clickイベントをリッスンするfunction
function editValue(){
    const p1 = document.getElementById("p1");
    const p2 = document.getElementById("p2");
    if(p1.firstChild.nodeValue < 500){
        p1.firstChild.nodeValue = p1.firstChild.nodeValue * 1.1;
    }
    if(p2.firstChild.nodeValue < 500) {
        p2.firstChild.nodeValue = p2.firstChild.nodeValue * 1.1;
    }
}

//# イベントのリスナーを登録
document.addEventListener("click",editValue,false);

（図１３１）

●JSP

ポイントとなるのは<table>タグ内の部分です。JavaScriptでマウスクリックを検知して、id「p1」と「p2」の金額の値を1.1倍していきます。

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="js/IT0xxx_JsAddEventListenerTest.js" type="text/javascript" charset="UTF-8"></script>
<title>JavaScript AddEventListener Test</title>
</head>
<body>
<h2>■AddEventListenerの挙動確認①</h2>
<table id="fruit" border="1">
    <tr>
        <td id="n1">apple</td>
        <td id="p1">200</td>
    </tr>
    <tr>
        <td id="n2">banana</td>
        <td id="p2">120</td>
    </tr>
</table>
</body>
</html>

（図１３２）

（図１３３）実行結果

＞目次にもどる