好程式設計師web前端教程分享JavaScript學習筆記之Event事件二

好程式設計師發表於2020-05-09
程式設計師Web前端JavaScript筆記事件

　　好程式設計師web前端教程 分享JavaScript 學習筆記之 Event 事件二，今天來聊一聊事件的執行機制。

　　什麼是事件的執行機制呢？

　　思考一個問題？

　　當一個大盒子巢狀一個小盒子的時候，並且兩個盒子都有點選事件

你點選裡面的小盒子，外面的大盒子上的點選事件要不要執行

Event

事件的傳播

  • 就像上面那個圖片一樣，我們點選在紅色盒子身上的同時，也是點選在了粉色盒子上
  • 這個是既定事實，那麼兩個盒子的點選事件都會觸發
  • 這個就叫做  事件的傳播
  • 當元素觸發一個事件的時候，其父元素也會觸發相同的事件，父元素的父元素也會觸發相同的事件
  • 就像上面的圖片一樣
  • 點選在紅色盒子上的時候，會觸發紅色盒子的點選事件
  • 也是點選在了粉色的盒子上，也會觸發粉色盒子的點選事件
  • 也是點選在了 body 上，也會觸發 body 的點選事件
  • 也是點選在了 html 上，也會觸發 html 的點選事件
  • 也是點選在了 document 上，也會觸發 document 的點選事件
  • 也是點選在了 window 上，也會觸發 window 的點選事件
  • 也就是說，頁面上任何一個元素觸發事件，都會一層一層最終導致 window 的相同事件觸發，前提是各層級元素得有註冊相同的事件，不然不會觸發

 

  • 在事件傳播的過程中，有一些注意的點：
  1. 只會傳播同類事件
  2. 只會從點選元素開始按照 html 的結構逐層向上元素的事件會被觸發
  3. 內部元素不管有沒有該事件，只要上層元素有該事件，那麼上層元素的事件就會被觸發

 

  • 到現在，我們已經瞭解了事件的傳播，我們再來思考一個問題
  • 事件確實會從自己開始，到 window 的所有相同事件都會觸發
  • 是因為我們點在自己身上，也確實逐層的點在了直至 window 的每一個元素身上
  • 但是到底是先點在自己身上，還是先點在了 window 身上呢
  • 先點在自己身上，就是先執行自己的事件處理函式，逐層向上最後執行 window 的事件處理函式
  • 反之，則是先執行 window 的事件處理函式，逐層向下最後執行自己身上的事件處理函式
  • 我們剛才聊過了，每一個事件，都是有可能從自己到 window ，有可能要執行多個同型別事件
  • 那麼這個執行的順序就有一些說法了
  • 你是點選在哪個元素身上了，那麼這個事件的  目標 就是什麼
  • 就是從事件  目標 的事件處理函式開始，依次向外，直到 window 的事件處理函式觸發
  • 也就是從下向上的執行事件處理函式
  • 就是從 window 的事件處理函式開始，依次向內，只要事件  目標 的事件處理函式執行
  • 也就是從上向下的執行事件處理函式
  • 就是在事件的傳播中，多個同型別事件處理函式的執行順序不同
  • 就是把我要做的事情委託給別人來做
  • 因為我們的冒泡機制，點選子元素的時候，也會同步觸發父元素的相同事件
  • 所以我們就可以把子元素的事件委託給父元素來做
  • 點選子元素的時候，不管子元素有沒有點選事件，只要父元素有點選事件，那麼就可以觸發父元素的點選事件

冒泡、捕獲、目標

目標

冒泡

捕獲

冒泡和捕獲的區別

事件委託

事件觸發

<body>

  <ul>

    <li>1</li>

    <li>2</li>

    <li>3</li>

  </ul>

  <script>

     var oUl  = docuemnt.querySelector('ul')

    oUl.addEventListener('click',  function (e) {

      console.log('我是 ul 的點選事件，我被觸發了')

    })

  </script></body>

  • 像上面一段程式碼，當你點選 ul 的時候肯定會觸發
  • 但是當你點選 li 的時候，其實也會觸發
  • target 這個屬性是事件物件裡面的屬性，表示你點選的目標
  • 當你觸發點選事件的時候，你點選在哪個元素上，target 就是哪個元素
  • 這個 target 也不相容，在 IE 下要使用 srcElement

target

<body>

  <ul>

    <li>1</li>

    <li>2</li>

    <li>3</li>

  </ul>

  <script>

     var oUl  = docuemnt.querySelector('ul')

    oUl.addEventListener('click',  function (e) {

      e  = e  || window.event

       var target  = e.target  || e.srcElement

      console.log(target)

    })

  </script></body>

  • 上面的程式碼，當你點選 ul 的時候，target 就是 ul
  • 當你點選在 li 上面的時候，target 就是 li
  • 這個時候，當我們點選 li 的時候，也可以觸發 ul 的點事件
  • 並且在事件內不，我們也可以拿到你點選的到底是 ul 還是 li
  • 這個時候，我們就可以把 li 的事件委託給 ul 來做

委託

<body>

  <ul>

    <li>1</li>

    <li>2</li>

    <li>3</li>

  </ul>

  <script>

     var oUl  = docuemnt.querySelector('ul')

    

    oUl.addEventListener('click',  function (e) {

      e  = e  || window.event

       var target  = e.target  || e.srcElement

     

       // 判斷你點選的是 li       if (target.nodeName.toUpperCase  === 'LI') {

       // 確定點選的是 li         // 因為當你點選在 ul 上面的時候，nodeName 應該是 'UL'         // 去做點選 li 的時候該做的事情了        console.log('我是 li，我被點選了')

      }

    })

  </script></body>

  • 上面的程式碼，我們就可以把 li 要做的事情委託給 ul 來做
  • 為什麼要用事件委託
  • 我頁面上本身沒有 li
  • 我透過程式碼新增了一些 li
  • 新增進來的 li 是沒有點選事件的
  • 我每次動態的操作完 li 以後都要從新給 li 繫結一次點選事件
  • 比較麻煩
  • 這個時候只要委託給 ul 就可以了
  • 因為新加進來的 li 也是 ul 的子元素，點選的時候也可以觸發 ul 的點選事件

總結

 

  • 事件委託的書寫
  • 元素的事件只能委託給結構父級或者再結構父級的同樣的事件上
  • li 的點選事件，就不能委託給 ul 的滑鼠移入事件
  • li 的點選事件，只能委託給 ul 或者在高父級的點選事件上
  • 預設行為，就是不用我們註冊，它自己就存在的事情
  • 比如我們點選滑鼠右鍵的時候，會自動彈出一個選單
  • 比如我們點選 a 標籤的時候，我們不需要註冊點選事件，他自己就會跳轉頁面
  • ...

預設行為

 

  • 這些不需要我們註冊就能實現的事情，我們叫做  預設事件

 

阻止預設行為

  • 有的時候，我們不希望瀏覽器執行預設事件
  • 比如我給 a 標籤繫結了一個點選事件，我點選你的時候希望你能告訴我你的地址是什麼
  • 而不是直接跳轉連結
  • 那麼我們就要把 a 標籤原先的預設事件阻止，不讓他執行預設事件

 

  • 我們有兩個方法來阻止預設事件
  • e.preventDefault() : 非 IE 使用
  • e.returnValue = false ：IE 使用

 

  • 我們阻止預設事件的時候也要寫一個相容的寫法

<a href =" 點選我試試</a><script>

   var oA  = document.querySelector('a')

  a.addEventListener('click',  function (e) {

    e  = e  || window.event

    console.log( this.href)

    e.preventDefault  ? e.preventDefault()  : e.returnValue  =  false

  })</script>

  • 這樣寫完以後，你點選 a 標籤的時候，就不會跳轉連結了
  • 而是會在控制檯列印出 a 標籤的 href 屬性的值


來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/69913864/viewspace-2690830/，如需轉載，請註明出處，否則將追究法律責任。

相關文章