Javascript

addEventListener()を使ってみよう

クリックしたときの処理を指定することができるイベントについて見ていきます。

  • addEventListener()

addEventListener()

・ボタンを押すと文字が変化するようなイベントを作ろうとした場合、addEventListener() を使うことによってクリックというイベントによって文字が書き換わるという命令をすることが出来ます。

・まずボタンタグをHTMLに書き内容をボタンとしてあげ、ここを押すことによって処理が実行されるようにします。

・次にJavaScriptに実行内容を書いて行きます。id が付いていなくて、単一の要素なので document.querySelector() を使ってあげればボタン要素を取得出来ます。

・その上でイベントというものを設定してあげます。addEventListener()と書いてあげて、そのメソットの第1引数にイベントの種類を文字列で渡してあげます。clickでいいでしょう

・クリックしたときの処理を関数で渡してあげます。今回だと前回やったファンクションに貼っているupdateでもいいのですが、ここでしか使ってないのでアロー関数にしましょう。

・あとは処理内容を書いていけばいいのでtargetをwelcomeに変える処理を書いていきましょう。

updateは使わなかったので消しておきます。

-Javascript