學習目標

• 能夠給元素注冊事件
• 能夠說出事件流執行的三個階段
• 能夠在事件處理函式中獲取事件物件
• 能夠使用事件物件取消默認行為
• 能夠使用事件物件阻止事件冒泡
• 了解滑鼠事件和鍵盤事件

一、事件基礎

 JavaScript 使我們有能力創建動態頁面，而事件是可以被 JavaScript 偵測到的行為，

1.1 事件三要素

1.2 執行事件的步驟

• 獲取事件源
• 注冊事件（系結事件 ）
• 添加事件 處理程式（采取函式賦值形式）

1.3 常見的滑鼠事件

二、事件高級

2.1 注冊事件（2種方式）

2.2 事件監聽

1.addEventListener()事件監聽（IE9以后支持）

• 里面的事件型別是字串 必定加引號 而且不帶on
• 同一個元素 同一個事件可以添加多個偵聽器（事件處理程式）

2.attacheEvent()事件監聽（IE678支持）

代碼示例：

     <button>傳統注冊事件</button>
     <button>方法監聽注冊事件</button>
     <button>ie9 attachEvent</button>
     <script>
        var btns = document.querySelectorAll('button');
        // 1. 傳統方式注冊事件
        btns[0].onclick = function() {
            alert('hi');
        }
        btns[0].onclick = function() {
            alert('hao a u');
        }
        // 2. 事件偵聽注冊事件 addEventListener 
        btns[1].addEventListener('click', function() {
            alert(22);
        })
        btns[1].addEventListener('click', function() {
            alert(33);
        })
   
        // 3. attachEvent ie9以前的版本支持
        btns[2].attachEvent('onclick', function() {
            alert(11);
        })
     </script>

2.3 洗掉事件（解綁事件）

2.4 DOM事件流

• 事件流：描述的是從頁面中接受事件的順序
• DOM事件：事件發生時會在元素節點之間特定順序傳播，這個傳播程序即DOM事件，
• 事件冒泡：IE最早提出，事件開始由最具體的元素接收，然后逐級向上傳播到DOM最頂層節點的程序，
• 事件捕獲：由DOM最頂層節點開始，然后逐級向下傳播到最具體的元素接收的程序，

如何理解以上概念：
比如，我用手去按開關，燈亮了，這件事情里，事件源是：手，事件是：按開關，事件驅動程式是：燈的開和關，
再比如，網頁上彈出一個廣告，我點擊右上角的X，廣告就關閉了，這件事情里，事件源是：X，事件是：onclick，事件驅動程式是：廣告關閉了，
于是我們可以總結出：誰引發的后續事件，誰就是事件源，

DOM 事件流會經歷3個階段：

1. 捕獲階段
2. 當前目標階段
3. 冒泡階段

2.5 事件物件

事件發生后，跟事件相關的一系列資訊資料的集合都放到這個物件里面，這個物件就是事件物件，
事件觸發發生時就會產生事件物件，并且系統會以實參的形式傳給事件處理函式，

事件物件的屬性和方法

e.target 和 this 的區別

• this 是事件系結的元素（系結這個事件處理函式的元素） ，
• e.target 是事件觸發的元素，

代碼示例：

      //事件冒泡下的e.target和this
      <ul>
         <li>abc</li>
         <li>abc</li>
         <li>abc</li>
      </ul>
      <script>
         var ul = document.querySelector('ul');
         ul.addEventListener('click', function(e) {
              // 我們給ul 系結了事件  那么this 就指向ul  
              console.log(this); // ul

              // e.target 觸發了事件的物件 我們點擊的是li e.target 指向的就是li
              console.log(e.target); // li
         });
      </script>

2.6 阻止默認行為

• 普通瀏覽器 e.preventDefault(); 方法
• 低版本瀏覽器 ie678 returnValue (屬性, 沒有兼容性問)

2.7 阻止事件冒泡

• e.stopPropagation(); 標準寫法
• window.event.cancelBubble = true; 非標準寫法

2.8 事件委托

給父元素注冊事件，利用事件冒泡，當子元素的事件觸發，會冒泡到父元素，然后去控制相應的子元素，
我們只操作了一次 DOM ，提高了程式的性能，
動態新創建的子元素，也擁有事件，

三、常用滑鼠事件

代碼示例：

     <script>
        // 滑鼠事件物件 MouseEvent
        document.addEventListener('click', function(e) {
            // 1. client 滑鼠在可視區的x和y坐標
            console.log(e.clientX);
            console.log(e.clientY);
            console.log('---------------------');

            // 2. page 滑鼠在頁面檔案的x和y坐標
            console.log(e.pageX);
            console.log(e.pageY);
            console.log('---------------------');

            // 3. screen 滑鼠在電腦螢屏的x和y坐標
            console.log(e.screenX);
            console.log(e.screenY);

        })
    </script>

四、常用鍵盤事件

代碼示例：

     <script>
        // 常用的鍵盤事件
        //1. keyup 按鍵彈起的時候觸發 
        document.addEventListener('keyup', function() {
            console.log('我彈起了');
        })

        //3. keypress 按鍵按下的時候觸發  不能識別功能鍵 比如 ctrl shift 左右箭頭啊
        document.addEventListener('keypress', function() {
                console.log('我按下了press');
        })
        //2. keydown 按鍵按下的時候觸發  能識別功能鍵 比如 ctrl shift 左右箭頭啊
        document.addEventListener('keydown', function() {
                console.log('我按下了down');
        })
        // 4. 三個事件的執行順序  keydown -- keypress -- keyup
     </script>