Kuzunoha-NEのブログ

プログラミングなどの勉強をしてます

【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>

f:id:Kuzunoha-NE:20190807230037g:plain
押しても反応しないボタン

onclickという手

<script>内にaleart()関数を呼び出す関数を作る。

<script>
    function onAleart(){
        alert('アラートだよ!')
    }
</script>

testButtononclick属性を追加し、値を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>

f:id:Kuzunoha-NE:20190807231133g:plain
Aleartが表示される

.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)があって、以下にそれが載っています。

developer.mozilla.org

そしてコールバック関数として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>

f:id:Kuzunoha-NE:20190807232623g:plain
onclickと同じ

クリック以外でもいけるか

testButton.addEventListener('keypress', ()=>{
    onAleart();
})

keypressにしたらいろんなキーボードのキーに反応した