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

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

関連記事

TomcatでEclipseを使う際にserver.xmlを編集しても上書きされる事象の対処方法

<目次> (1) TomcatでEclipseを使う際にserver.xmlを編集しても上書きされる事象の対処方法  (1-1) 発生状況・エラーメッセージ  (1-2) 原因  (1-3) 対処法 …

JavaScriptでテキストボックスの値を取得する方法(動画解説付き)

<目次> (1) JavaScriptでテキストボックスの値を取得する方法 (2) 表記例①:document.[Form Name].[Element Id].Value  (2-1) 構文  (2 …

502 Proxy Error : Reason: Error reading from remote serverの原因と解消法メモ

<目次> (1) 502 Proxy Error : Reason: Error reading from remote serverの原因と解消法メモ  (1-1) 発生状況・エラーメッセージ  ( …

オープンアドレス法をJavaで実装したプログラムのサンプルをご紹介

<目次> (1) オープンアドレス法をJavaで実装したプログラムのサンプルをご紹介  (1-1) オープンアドレス法とは  (1-2) Javaのサンプルプログラムの全体像  (1-3) Javaの …

バイナリ―サーチとは?Javaのサンプルプログラムを用いて解説

<目次> (1) バイナリ―サーチとは?Javaのサンプルプログラムを用いて解説  (1-1) バイナリ―サーチのアルゴリズム  (1-2) バイナリ―サーチの性能(処理回数)  (1-3) バイナリ …

  • English (United States)
  • 日本語
Top