javascriptでidの取得とaddEventListenerについて

この記事では、javascriptでidを取得し、それを操作する方法について記載する。

また、addEventListenerでクリックした時に関数を実行する処理について記載する。

1. 目的

　・javascriptのでidを取得し、それを操作する方法について理解する。

　・addEventListenerについて理解する。

javascriptでidの取得とaddEventListenerについて

2. idの取得方法

let 変数名 = document.getElementById("id名");

例：

let tes1 = document.getElementById("test1");

イベントの追加方法

イベントの追加には、addEventListenerを使用する。

addEventListener("イベント",実行するもの)

例

addEventListener("click",function(){

・EventTarget: addEventListener() メソッド - Web API | MDN

　※clickがクリックした時のイベント

　　function()は無名関数

2.1 イベント

　コードの実行に影響を与えるマウス操作や、キー操作、ウィンドウ操作などのユーザーの操作や環境の変化などを取得する。

　イベントの種類：イベントリファレンス | MDN

2.2 イベント例

　・dragenter ：ドラッグ中のイベントやテキストの選択範囲が、妥当なドロップターゲットに入ったとき

　・keyup：キーが離されたとき

　・scroll：文書のビューや要素がスクロールされたとき

　・click：ポインターが要素の中にある状態で、ポインティングデバイスのボタン (マウスの第一ボタンなど) が押されて離されたとき

2.3 実行するもの

　指定された種類のイベントが発生した時、実行されるオブジェクト

　以下の3つのいずれかが入る。

　・null

　・handleEventメソッド　（オブジェクトとして設定するメソッド)

　・javascriptの関数

参考：【JavaScriptの基本】イベントオブジェクト | ワードプレステーマTCD

3.プログラムの作成(idを取得して、クリックして文字列を変更する)

<!doctype html>
 <html lang="ja">
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width" />
     <title>テストページ</title>
     <style>
     </style>
     <script>
     	window.onload = function () {
       		let tes1 = document.getElementById("test1");
       		tes1.addEventListener("click",function(){
       			tes1.innerText = "タイトル"
       		})
       	}
     </script>
   </head>
   <body>
     <p id= "test1">Hello</p>
   </body>
 </html>
 ||<