【JavaScript】.addElementListenerを使った関数の呼び出し
葛の葉です。
Javascirptを現在、勉強しております。
さて、今回はhtmlの要素がclick
されたときにjavascriptの関数を呼び出す方法を記載します。
まずボタンを作る
以下のようにbuttonを配置します。
<!--test.html--> <!DOCTYPE html> <html lang="ja"> <header> <title>TestTitle</title> </header> <body> <button type="button" id="testButton">こんにちは</button> </body> </html>
onclickという手
<script>
内にaleart()関数
を呼び出す関数を作る。
<script> function onAleart(){ alert('アラートだよ!') } </script>
testButton
にonclick
属性を追加し、値をjavascriptの関数とします。
<button type="button" id="testButton" onclick="onAleart()">こんにちは</button>
最終的にはこのようになります。
<!--test.html--> <!DOCTYPE html> <html lang="ja"> <header> <title>TestTitle</title> </header> <body> <button type="button" id="testButton" onclick="onAleart()">こんにちは</button> </body> <script> function onAleart(){ alert('アラートだよ!') } </script> </html>
.addElementListenerを使う
表題の方法になります。onclickの記載は不要のため削除します。
<button type="button" id="testButton">こんにちは</button>
次に、javascriptを以下のように記載します。
<script> function onAleart(){ alert('アラートだよ!') } const testButton = document.getElementById('testButton'); testButton.addEventListener('click', ()=>{ onAleart(); }) </script>
document.getElementById('testButton');
はhtml内にある全ての要素の内、id属性の値がtestButton
であるものをHtmlElementとして取得します。
HtmlElementに.addEventListener
というメソッドが存在し、第一引数に'click'
という文字を渡しています。これはその要素がクリックされた時に発生するということを表しています。
クリック以外にも条件(Event)があって、以下にそれが載っています。
そしてコールバック関数としてonAleart
が呼び出されています。
<!--test.html--> <!DOCTYPE html> <html lang="ja"> <header> <title>TestTitle</title> </header> <body> <button type="button" id="testButton">こんにちは</button> </body> <script> function onAleart(){ alert('アラートだよ!') } const testButton = document.getElementById('testButton'); testButton.addEventListener('click', ()=>{ onAleart(); }) </script> </html>
クリック以外でもいけるか
testButton.addEventListener('keypress', ()=>{ onAleart(); })
keypress
にしたらいろんなキーボードのキーに反応した