知識點-通過 on 方式給元素注冊事件

知識點-通過addEventListener方式注冊事件

• 語法

  事件源.addEventListener('事件類型', 函數(shù)處理程序);注意事項: 1. 事件類型是不能代 'on' 例如點擊事件: click 2. 函數(shù)處理程序 可以是一個匿名函數(shù),也可以調(diào)用一個命名函數(shù) 3. 第二個參數(shù)函數(shù)處理程序如果是一個命名函數(shù),那么只寫函數(shù)的名稱,不能加小括號(代表函數(shù)的調(diào)用)例如: btn.addEventListener('click', fn); function fn() {alert('你好'); }4. 如果addEventListener想要調(diào)用一個帶有參數(shù)的函數(shù)那么可以按照如下寫法:btn.addEventListener('click', function(){fn(2); })function fn(a){alert(a); }

• 特點

  • addEventListener 在注冊事件的時候,同一種事件不會被覆蓋掉
  • 原理:將事件添加到一個 eventTarget 對象集合(數(shù)組)上

知識點-通過attachEvent方式注冊事件

• attachEvent 專門為IE低版本瀏覽器設(shè)置的方法

• 語法

  事件源.attachEvent('事件類型', 處理程序);

• 特點

  • 事件類型需要加 ‘on’
  • 處理程序 與 addEventListener 中的處理程序用法一模一樣

知識點-移除事件

• 移除 on 方式注冊事件

  事件源.事件類型 = null; 例如：div.onclick = null;

• 移除addEventListener事件

  • 語法

    DOM.removeEventListener('事件類型', 命名函數(shù))

  • 總結(jié)

  • removeEventListener()這個方法就是用來移除addEventListener注冊的事件
  • addEventListener注冊事件的時候,必須使用命名函數(shù)
  • removeEventListener()中第二參數(shù)命名函數(shù)

• 移除attachEvent事件

  DOM.detachEvent(event_type,event_name)
  • 總結(jié):
  • detachEvent方法是用來移除 attachEvent 事件的
  • detachEvent()方法中第二個參數(shù)也需要一個命名函數(shù)
  • detachEvent方法的使用方式與removeEventListener一樣

事件流組成

• 知識點-事件冒泡階段

  以點擊事件舉例:子元素被點了, 父元素也有被點擊的效果 ----> 事件冒泡

• 知識點-事件捕獲階段

  以點擊事件舉例:當(dāng)前元素被點擊的時候, 先從父元素開始執(zhí)行, 然后傳到 子元素

• 知識點-事件目標(biāo)階段

  事件目標(biāo)階段 : 就是指的是當(dāng)前事件源

• 事件流總結(jié)

  1. 事件流與注冊事件的方式?jīng)]有任何關(guān)系 2. 不是所有的事件都有事件冒泡 3. 如果當(dāng)前事件有冒泡, 那么通過 addEventListener 可以將冒泡階段和 捕獲階段都可以通過第三參數(shù)表現(xiàn)出來 4. 如果有事件冒泡, 那么 通過 onclick 這種方式 只能看到冒泡階段, 無法表現(xiàn)捕獲階段(不支持第三個參數(shù))

事件委托

• 事件委托具備的條件
  • 當(dāng)前元素得有父元素
  • 當(dāng)前事件得有冒泡效果

事件對象參數(shù)

• 什么是事件對象參數(shù)

  事件對象參數(shù): 事件中內(nèi)置的一個參數(shù), 保存了用戶在執(zhí)行這個事件時候的一些信息比如: 當(dāng)前事件的類型, 點擊的對象是誰(真正的事件源是誰).....

• 事件對象參數(shù)怎么用

• 事件對象參數(shù)不需要我們手動的傳值(當(dāng)執(zhí)行事件的時候,就會有值)
• 事件對象參數(shù)本質(zhì)上就是一個對象

e.target : 獲取真正觸發(fā)事件的對象(事件源)

e.type： 事件類型

e.clientX | e.clientY (鼠標(biāo)坐標(biāo)信息)

e.pageX | e.pageY (鼠標(biāo)坐標(biāo)信息)

e.screenX | e.screenY (鼠標(biāo)坐標(biāo)信息)

e.offsetX | e.offsetY (鼠標(biāo)坐標(biāo)信息)

e.stopPropagation() 阻止事件冒泡

• e.key
• e.keyCode

• e.key
• e.keyCode