≪イベント｜Events｜ldap≫

アプリケーションがタイプのイベントに反応し、何かをしようとすると、そのタイプのイベントが発生したときに呼び出された関数がブラウザに通知され、呼び出しが委任されます.
このとき,イベント発生時に呼び出される関数をイベントハンドラ(event handler)と呼ぶ.
イベントが発生すると、イベントハンドラの呼び出しをブラウザに委任してイベントハンドラ登録と呼ぶ.

イベントハンドラの登録

イベントハンドラを登録する方法は3つあります.

1.インライン方式

インライン方式は、イベントをイベントターゲットとして指定するタグ属性です.

<button onClick="alert('hello')">click me</button>

2.割引方式

Propertyリスナー方式は、イベントをイベントターゲットに対応するオブジェクトとして登録するPropertyである.
インライン方式と比較してHTMLとJavaScriptは分離できるのが第一選択ですが、addEventListener方式で後から学ぶことをお勧めします.
イベントハンドラ構成では、1つのイベントハンドラのみをイベントにバインドできます.

    <button>click me</button>
    <script>
       const btn = document.querySelector('button');

       btn.onclick = function(){
           alert('hello1');
       };

       btn.onclick = function(){
           alert('hello2'); // 실행결과
       };
    </script>

3.addEventListenerメソッド

addEventListenerメソッドを使用してターゲットDOM要素イベントをバインドし、そのイベントが発生したときに実行されるコールバック関数(イベントハンドル)を指定します.

addEventListener関数は従来の方法よりも優れた利点を有する.

のイベントの場合、1つ以上のイベントを追加できます.

スクリーンショットと泡をサポートします.

すべてのDOM要素(HTML、XML、SVG)、および

HTML要素について操作します.ブラウザは、Webドキュメント(HTML、XML、SVG)をロードし、グループ化してDOMを生成します.

    <button>click me</button>
    <script>
       const btn = document.querySelector('button');

       btn.onclick = function(){
           alert('hello1');
       };

       btn.addEventListener('click',function(){
           alert('hello2');
       });
    </script>

先ほどのproperty方式にaddEventListenerを追加すると、順番に実行されます.
addEventListenerは、Propertyにバインドされたイベントには影響しません.
イベントハンドラが登録順に呼び出されます.

イベントハンドラの削除

removeEventListenerメソッドを使用して、イベントハンドルを削除します.

    <button>click me</button>
    <script>
       const btn = document.querySelector('button');

       const handleClick = () => alert('hello');

       // 이벤트 핸들러 등록
       btn.addEventListener('click', handleClick);
    
       // 이벤트 핸들러 제거
       btn.removeEventListener('click', handleClick);
    </script>

このときremoveEventListenerメソッドに渡されるパラメータは、addEventListenerメソッドと同じでなければならない.
ex) 'click', handleClick