やっぱりJavaScript! - HTMLを操ろう！3

表示し内容を何かのタイミングで変化させるまたは、何かの動作をするときに表示の形態を変化させるなど楽しいページづくりには欠かすことができないものとなっています。

そのタイミングを取得することをイベントを発生させるといいJavaScriptではaddEventListener()を使ってイベントを検知していろんなことができるようになします。

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

使い方は前回で使っている以下のコードを使って

<div class = "first">Test text</div>

<script>
let ele = document.querySelector(".first")

ele.addEventListener("click",function(){

ele.innerHTML = "Hello"

})

</script>

ele.addEventListene,function(){
ele.innerHTML = "Hello"
})

変数eleを"."でaddEventListenerを繋げて、"click"でクリックした場合に、function()を実行するという感じになります。

この場合はfunction()の中身は

ele.innerHTML = "Hello"

となっているので画面上表示されている"Test text"をクリックしたタイミングでその文字が"Hello"に変更されます。

この場合は"click"ですが、他にもいろいろとあります。

イベントリファレンス | MDN

基本的には

ターゲットの変数.addEventListener(イベント, 関数)

でHTMLと動作を紐付けます。これには第三引数もつけることができますが、省略可能なので最初は無視で良いと思います。

関数は普通に"function(){}"で定義したもの、アロー関数式も使えます。

アロー関数式については例えば

let ele = document.querySelector(".first")

ele.addEventListener("click", () => {

ele.innerHTML = "Hello"

})

ele.addEventListener("click", () => {

function()の代わりにアロー関数式を使っています。同じように文字をクリックすると"Hello"という文字に変わります。