Rainbow Engine

IT技術を分かりやすく簡潔にまとめることによる学習の効率化、また日常の気付きを記録に残すことを目指します。

Java JavaScript JSP/Servlet

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

投稿日:2021年6月9日 更新日:

<目次>

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

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

(1-1) 概要

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

目次にもどる

(1-2) 構文

(構文)

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

 

(構文説明)

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

目次にもどる

(1-3) サンプルプログラム

●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);
 
(図131)

 

●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>

(図132)
 
(図133)実行結果
 

Adsense審査用広告コード


Adsense審査用広告コード


-Java, JavaScript, JSP/Servlet

執筆者:


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

関連記事

Ajaxでの繰り返し処理の順序性を保つ方法について

<目次> (1) Ajaxでの繰り返し処理の順序性を保つ方法について  (1-1) JavaScriptやAjaxの処理順序について  (1-2) Ajax処理順序制御②:同一処理ループ時の順序性保持 …

Javaのラッパークラスとは?使い方や一覧をご紹介

<目次> (1) Javaのラッパークラスとは?使い方や一覧をご紹介  (1-1) ラッパークラスとは?  (1-2) 構文(オブジェクト生成)  (1-3) 代表的なメソッド(Integerを例に) …

Tomcatのコネクションプールの設定手順

<目次> (1) Tomcatのコネクションプールの設定手順  (1-1) コネクションプールとは?  (1-2) コネクションプールの設定手順   (1-2-1) context.xmlの記述    …

JNDIとは?JDBCとの違いやメリット・デメリットについてもご紹介

<目次> (1) JNDIとは?JDBCとの違いやメリット・デメリットについてもご紹介  (1-1) JDBCとは?  (1-2) JNDIとは?   (1-2-1) 概要   (1-2-2) JND …

Javaのenumでフィールドを複数定義したり、値を取得する方法

<目次> (1) Javaのenumでフィールドを複数定義したり、値を取得する方法  (1-1) enumでフィールドを定義・取得する  (1-2) enumでフィールドを複数定義・取得する (1) …

  • English (United States)
  • 日本語
Top