[インタビューの準備]委任活動

16930 ワード

テキストリンク

委任イベント

1.一般イベント登録および委任イベント

要素にイベントを登録する一般的な方法は、addEventListenerを使用することです.100の要素にイベントを登録したい場合は、どうすればいいですか?一つ一つ接続しますか?

でも…。

イベントストリームを使用すると、1つのイベントリスナーが大量の要素のイベントを処理できます.
イベントリスナーがdiv(青色領域)要素にあり、ユーザーがdivのサブアイテムbuttonをクリックすると、何が起こりますか?
ブラウザは、イベントが発生したbuttonタグの検索を開始します.
イベントキャプチャとbundlingによりbuttonタグの親要素divのイベントリスナーを実行します.

このときeventオブジェクトにはDOMで発生したイベントの情報が含まれている.event.CurrentTargetとは、登録されたイベントの要素です.これは、アクティブなリスナーでthisが参照するオブジェクトと同じです.そしてイベントの最初の要素はイベントtargetに参照されます.

2. EXAMPLE1

<html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
  </head>
  <body>
      <div>
          <button type="button">Button</button>
      </div>
      <script>
          const divEl = document.querySelector('div');
          divEl.style = "background: red";
          divEl.addEventListener('click', function(event) {
              console.log(event.currentTarget);
              console.log(event.target);
              console.log(this);
          });
      </script>
  </body>
</html>

「div」をクリックします。

オーダー

event.currentTarget

event.target

this

ボタンをクリック

オーダー

event.currentTarget

event.target(イベントが最初に発生した要素はevent.targetを参照)

this

3. EXAMPLE2

コードの説明

の親divにのみイベント

を追加

クリックした要素がボタンの場合、li

を追加します.

liをクリックしてコンソールを開きます.ロゴを撮らせて

、すなわち、サブ要素にイベントを追加していないが、イベントを登録したように使用することができる.

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <div class="parent">
            <button type="button">generate tiem</button>
            <ul>
                <li>init</li>
            </ul>
        </div>
        <script>
            const parent = document.querySelector('.parent');
            parent.addEventListener('click', function(e) {
                if (e.target.tagName.toLowerCase() === 'button') {
                    const item = document.createElement('li');
                    item.innerText = 'Hello World';
                    parent.querySelector('ul').appendChild(item)
                }
                if (e.target.tagName.toLowerCase() === 'li') {
                    console.log('hit');
                }
            });
        </script>
    </body>
</html>