【JavaScript】focus（ブラウザイベント） - フォーカスが当たった時のイベント

JavaScriptのfocus（ブラウザイベント）について解説します。

検証環境

JavaScript -

macOS

14.1

focus

focusは“フォーカスが当たった時を表すイベント”です。

input要素などをクリックし、入力状態になった時などが該当します。

HTML属性

HTML属性でフォーカスイベントを登録するにはonfocus属性を使用します。

基本構文

<タグ名 onfocus="処理">

サンプル

sample.js

<style>
    #log {
        border: 1px solid black;
        padding: 5px;
    }
</style>

___ih_hl_start
<input id="target" type="text" onfocus="process();">
___ih_hl_end

<pre id="log"></pre>

<script type="text/javascript">

    function process() {
        let log = document.getElementById('log');
        log.textContent = "Hello World.";
    }

</script>

プレビュー

８行目のonfocus="process();"がHTML属性を利用したフォーカスイベントの登録です。

入力ボックスをクリックするとフォーカス状態になり、process関数を呼び出します。

実際にプレビューの入力ボックスにフォーカスを当てることで、確認することが可能です。

DOMメソッド

DOMのaddEventListenerメソッドでフォーカスイベントを登録するにはイベント種別にfocusを与えます。

基本構文

要素オブジェクト.addEventListener('focus', 処理);

サンプル

sample.js

<style>
    #log {
        border: 1px solid black;
        padding: 5px;
    }
</style>

<input id="target" type="text">

<pre id="log"></pre>

<script type="text/javascript">
    
    let target = document.getElementById('target');
    
    ___ih_hl_start
    target.addEventListener('focus', function() {
        let log = document.getElementById('log');
        log.textContent = "Hello World.";
    });
    ___ih_hl_end
    
</script>

プレビュー

１６〜１９行目がaddEventListenerメソッドを利用したフォーカスイベントの登録です。

プレビューの入力ボックスにフォーカスを当てると、テキストが表示され、その内容からイベントハンドラーを実行したことが確認できます。