JavaScriptイベントとイベントバインディング

イベント

1. イベントストリーム

   イベントフローは、イベントバブリングフローやイベントキャプチャフローなど、ページからイベントを受信するシーケンスを記述します。

2. イベントバブリング（IEイベントストリーム）

   イベントが開始されると、イベントをトリガーした要素からレベルごとに伝播するため、ドキュメントオブジェクトに伝播されることを認識して、上の各レベルがトリガーされます。

   <div id="grandfather">
           <div id="father">
               <div id="son"></div>
           </div>
   </div>
   当触发了son这个事件标签就会一级一级向上传播 son->father->grandfather
   

3. イベントキャプチャ

   イベントの開始時に特定性の低い要素から開始して、所定のターゲット要素をキャプチャします

   <div id="grandfather">
           <div id="father">
               <div id="son"></div>
           </div>
   </div>
   事件捕获过程中，documnt首先接受到事件，然后沿着dom树一次向下一知道找到实际目标
   假如实际目标时son 那么触发过程就是 document->html->body->granderfather->faher->son 
   

4. DOMイベントフロー

   イベントフローは、次の3つの段階で構成されます。

   1. イベントキャプチャフェーズ

   2. 目標段階で

   3. イベントバブリングフェーズ

      イベントフローを使用して、イベントをトリガーするステージを決定できます

5. バインドされたイベント

   1. domレベル0イベント

      • div.onclick = function（）{イベント処理関数}

   2. domレベル2イベント

      • addEventListener（ 'click'、function（）{イベント処理関数}、boolean）//標準ブラウザで使用

        //複数のイベント処理関数がバインドされている場合、バインドは順番に実行されます

        => booleanデフォルトはfalseで、バブリングフェーズがトリガーされることを意味し、trueはキャプチャフェーズがトリガーされることを意味します。

        div.addEventListener('click', function () {
                  
                  
                  console.log('你好 世界')
                })
        
                div.addEventListener('click', function () {
                  
                  
                  console.log('hello world')
                })
        
        //你好 世界
        //hello world
        

      • attachEvent（ 'onclick'、function（）{イベント処理関数}} // IEの下位バージョンで使用

        //複数のイベント処理関数がバインドされている場合、バインドはフラッシュバックシーケンスで実行されます。この->ウィンドウ

        div.attachEvent('onclick', function () {
                  
                  
                  console.log('你好 世界')
                })
        
                div.attachEvent('onclick', function () {
                  
                  
                  console.log('hello world')
                })
        
                div.attachEvent('onclick', function () {
                  
                  
                  console.log('我被点击了')
                })
        //我被电击了
        //hello world
        //你好 世界
        

      • 互換性のある機能をカプセル化する

        function on(ele, type, handler) {
                  
                  
                  if (!ele) throw new Error('请按照规则传递参数')
                  if (ele.nodeType !== 1) throw new Error('事件源有问题')
        
                  // 2. 兼容处理
                  // div.addEventListener()
                  // div.attachEvent()
                  // 只要 元素 身上有这个函数, 就可以执行
                  // 没有这个函数就去换另一个函数试试
                  if (ele.addEventListener) {
                  
                  
                    ele.addEventListener(type, handler)
                  } else if (ele.attachEvent) {
                  
                  
                    ele.attachEvent('on' + type, handler)
                  } else {
                  
                  
                    // 对象操作语法 - 点语法
                    // ele.onclick = handler
                    // 对象操作语法 - 数组关联语法
                    // ele['onclick'] = handler
                    ele['on' + type] = handler
                  }
                }
        

6. イベントのバインド解除

   1. domレベル0のバインド解除

      • div.onclick = null

   2. domレベル2のバインド解除

      • removeEventListener（ 'バインド解除されるイベントタイプ'、バインド解除される関数）//標準ブラウザ

      • detachEvent（ 'on event type'、unboundされるイベント処理関数）// IEローバージョン

   3. 互換性のある機能をカプセル化する

      // 事件解绑封装
              function off(ele, type, handler) {
              
              
                if (!ele) throw new Error('请按照规则传递参数')
                if (ele.nodeType !== 1) throw new Error('事件源有问题')
                // 处理解绑的兼容
                if (ele.removeEventListener) {
              
              
                  ele.removeEventListener(type, handler)
                } else if (ele.detachEvent) {
              
              
                  ele.detachEvent('on' + type, handler)
                } else {
              
              
                  ele['on' + type] = null
                }
              }
      

7. マウスイベントのイベントオブジェクト情報（clientX、offsetX、pageX）

   1. イベントオブジェクトとは何ですか？

      • イベントがトリガーされるたびに、最新のイベントオブジェクトが取得されます
      • 現在のインシデントの説明

      //获取事件对象
       // + 标准浏览器
                  //   => 直接在事件处理函数上接收一个形参
                  //   => 会在事件触发的时候, 由浏览器自动传递实参
                  // + IE 低版本
                  //   => 不需要接收形参
                  //   => 直接使用 window.event
                  //     -> 在标准浏览器下也可以使用
                  //     -> 官方给的还是兼容
                  // + 书写一个兼容方式
                  //e = e || window.event
      

   2. clientX、clientY

      • 表示されているウィンドウの左上隅からのカーソルの位置

   3. pageX、pageY

      • ドキュメントストリームの左上隅からのカーソルの位置

   4. offsetX、offsetY

      • 要素の左上隅からのカーソルの位置。要素：カーソルがイベントをトリガーした要素（イベントのソースではありません）
      • offsetXとoffsetYは、（親が配置されているかどうかに関係なく）最も近い親要素を基準にした座標（マウスの位置）を表します（誰がトリガーしたかに関係なく）
      • 内部のカーソルトリガー要素の左上隅に従って座標を計算したくない場合。これは、イベントソースcssスタイルpointer-event：none;に従って座標を計算するようなものです。