js 事件筆記

Barry_Ng 發(fā)布于2019-08-23 13:44 / 3509人閱讀

摘要：只能寫成在捕獲階段監(jiān)聽這個(gè)事件。默認(rèn)為，表示事件是否可以被取消只有為的時(shí)候，才能用取消這個(gè)事件。阻止默認(rèn)事件結(jié)果結(jié)果和在事件處理程序內(nèi)部，始終等同于，為綁定事件的元素，而是為觸發(fā)事件的實(shí)際目標(biāo)。

一、事件簡(jiǎn)述 1、事件概念

在Web中, 事件在瀏覽器窗口中被觸發(fā)，執(zhí)行事先綁定的事件處理器（也就是事件觸發(fā)時(shí)會(huì)運(yùn)行的代碼塊），對(duì)事件做出響應(yīng)。
用戶在瀏覽器的任何一個(gè)操作都會(huì)去觸發(fā)一個(gè)事件，JavaScript采用異步事件驅(qū)動(dòng)編程模型，當(dāng)文檔、瀏覽器、元素或與之相關(guān)對(duì)象發(fā)生特定事情時(shí)，瀏覽器會(huì)產(chǎn)生事件。

2、常見的事件

事件是某個(gè)行為或者觸發(fā)，比如點(diǎn)擊、鼠標(biāo)移動(dòng)、提交表單，滾動(dòng)菜單等等

二、事件流 1、事件流的作用

事件流描述的是從頁(yè)面中接收事件的順序，比如有兩個(gè)嵌套的div，點(diǎn)擊了內(nèi)層的div，這時(shí)候是內(nèi)層的div先觸發(fā)click事件還是外層先觸發(fā)？

如果事件不傳播，我們無(wú)法確定我們點(diǎn)擊的對(duì)象是什么？

2、事件流三種模型

2.1事件冒泡模型

事件開始時(shí)由最具體的元素接收，然后逐級(jí)向上傳播到較為不具體的元素。比如點(diǎn)擊div時(shí)，首先是div先監(jiān)聽到了點(diǎn)擊事件，然后向上傳播到body/html/document

2.2事件捕獲模型

和事件冒泡相反，事件最開始由最外層不太具體的節(jié)點(diǎn)先監(jiān)聽到，然后向下傳遞到最具體的元素。
比如點(diǎn)擊div事件，先是document監(jiān)聽到，然后分發(fā)到html/body/div

2.3DOM事件流

DOM2級(jí)事件規(guī)定事件流包括三個(gè)階段，首先發(fā)生的是事件捕獲，為截取事件提供機(jī)會(huì)，然后是實(shí)際目標(biāo)接收事件，最后是冒泡階段

事件捕獲階段

處于目標(biāo)階段

事件冒泡階段

3、用代碼演示dom事件流

demo




  
  JS Bin




  container
  
    box
    target

執(zhí)行結(jié)果：

![圖片上傳中...]

三、事件處理程序（事件偵聽器（listener）） 1、概念

事件處理程序：事件觸發(fā)后，執(zhí)行響應(yīng)對(duì)應(yīng)事件的程序。
事件處理程序是預(yù)先設(shè)定的，我們需要提前定義好某些事件發(fā)生了該怎么處理，這個(gè)過(guò)程叫做綁定事件處理程序

2、JavaScript指定事件處理程序

2.1原理：
JavaScript指定事件處理程序就是把一個(gè)函數(shù)賦值給一個(gè)元素的事件處理程序?qū)傩裕ㄈ鏾nclick）
2.2綁定的過(guò)程：
選中元素，選中事件處理程序?qū)傩匀鏾nclick，給屬性賦值一個(gè)處理函數(shù)。

2.3不足：
不能給同一個(gè)元素的同一個(gè)事件處理程序?qū)傩越壎ǘ鄠€(gè)事件處理函數(shù)，會(huì)產(chǎn)生覆蓋的。

3、DOM2事件處理程序

3.1簡(jiǎn)介
DOM2事件處理程序可以解決不能綁定多個(gè)事件處理函數(shù)的問題
DOM2級(jí)事件定義了兩個(gè)方法用于處理指定和刪除事件處理程序的操作：

addEventListener

removeEventListener

3.2 addEventListener使用
addEventListener有三個(gè)參數(shù)

事件類型

事件處理方法

布爾參數(shù)，如果是true表示在捕獲階段調(diào)用事件處理程序，如果是false，則是在事件冒泡階段處理。默認(rèn)時(shí)false，沒有特殊需求，第三個(gè)參數(shù)可以不寫

3.3舉個(gè)栗子

總結(jié)：addEventListener 和制定事件處理程序的不同，一個(gè)是對(duì)屬性賦值，另外一個(gè)addEventListener是執(zhí)行一個(gè)函數(shù)，可以多次執(zhí)行

3.4 removeEventListener解綁事件
通過(guò)addEventListener添加的事件處理程序只能通過(guò)removeEventListener移除，移除時(shí)參數(shù)與添加的時(shí)候相同
添加的匿名函數(shù)無(wú)法移除

四、事件對(duì)象 1、事件對(duì)象的來(lái)源

在觸發(fā)DOM上的某個(gè)事件的時(shí)候會(huì)產(chǎn)生一個(gè)事件對(duì)象event，這個(gè)對(duì)象包含著所有與事件有關(guān)的信息，包括產(chǎn)生事件的元素、事件類型等相關(guān)信息。

2、event的常見屬性

event對(duì)象包含與創(chuàng)建它的特定事件有關(guān)的屬性和方法，觸發(fā)事件的類型不同，可用的屬性和方法也不同，但是所有事件都會(huì)包含

2.1bubbles：
默認(rèn)為false，表示事件對(duì)象是否冒泡。
如果該屬性為false，div.addEventListener方法在冒泡階段監(jiān)聽不會(huì)觸發(fā)。只能寫成div.addEventListener("click", callback, true)在“捕獲階段”監(jiān)聽這個(gè)事件。

2.2cancelable：
默認(rèn)為false，表示事件是否可以被取消.只有為true的時(shí)候，才能用Event.preventDefault()取消這個(gè)事件。

2.3preventDefault
阻止默認(rèn)事件

baidu

結(jié)果

2.4target和currenttarget
在事件處理程序內(nèi)部，this始終等同于currentTarget，currentTarget為綁定事件的元素，而target是為觸發(fā)事件的實(shí)際目標(biāo)。
當(dāng)存在嵌套的時(shí)候，兩者不一樣，具體詳情可以見這篇文章鏈接描述，或者中文版event.target 和 event.currentTarget。我這里不做贅述

2.5stopPropagation()
阻止事件在 DOM 中繼續(xù)傳播，防止再觸發(fā)定義在別的節(jié)點(diǎn)上的監(jiān)聽函數(shù)，但是不包括在當(dāng)前節(jié)點(diǎn)上其他的事件監(jiān)聽函數(shù)。
舉個(gè)栗子


  

  
    container
    
      box
      target

結(jié)果
沒有給捕獲階段的box加e.stopPropagation()的結(jié)果

給捕獲階段的box加e.stopPropagation()之后的結(jié)果

五、阻止事件代理

哈哈哈寫事件代理前，找到了這篇事件代理的文章用例子解釋事件模型和事件代理，這里寫事件模型的歷史也寫得相當(dāng)棒，所以先就轉(zhuǎn)載過(guò)來(lái)了。

1、事件代理的原理：

利用事件模型的傳播性質(zhì)，將子元素的監(jiān)聽函數(shù)綁定到父元素上，通過(guò)事件傳播去執(zhí)行監(jiān)聽函數(shù)。

2、舉個(gè)栗子

需求：給container里面所有box都綁定點(diǎn)擊事件，點(diǎn)擊時(shí)輸出box的值
2.1方式一：foreach
原理：選中.box所有元素，得到一個(gè)類數(shù)組對(duì)象，遍歷這個(gè)類數(shù)組對(duì)象，給.box元素一一綁click事件。
代碼：

 
    box1
    box2
    box3
  


缺點(diǎn)：執(zhí)行foreach選中的box時(shí)固定的，如果我們后續(xù)再加上幾個(gè)box，后加的box就沒有綁定上點(diǎn)擊事件。
代碼鏈接

2.2方式二事件代理
原理：給container綁定點(diǎn)擊事件，通過(guò)e.target獲取點(diǎn)擊事件目標(biāo)
代碼：
 
    box1
    box2
    box3
  
  


六、常見的事件類型


常見事件類型
解析



click
單擊


dblclick
雙擊


focus
焦點(diǎn)，比如表單input把光標(biāo)放上去開始輸入的時(shí)刻


blur
失去焦點(diǎn)，比如輸入完成切換到下一個(gè)輸入框時(shí)，就失去了焦點(diǎn)


keyup
按鍵按下松開的時(shí)候觸發(fā)，


change
比如input失去焦點(diǎn)并且值發(fā)生了改變


submit
表單提交的時(shí)候觸發(fā)


scroll
頁(yè)面滾動(dòng)的時(shí)候觸發(fā)，注意使用函數(shù)節(jié)流


resize
頁(yè)面面積變化觸發(fā)，注意使用函數(shù)節(jié)流


DOMContentLoaded
DOM 結(jié)構(gòu)解析完成，不用等圖片解析


load
頁(yè)面所有資源（圖片css 等）加載完成觸發(fā)，觸發(fā)時(shí)間比較晚


mouseover
鼠標(biāo)放上去觸發(fā)，注意進(jìn)入元素的子元素會(huì)重復(fù)觸發(fā)


mouseout
鼠標(biāo)拿出去觸發(fā)，注意離開元素的子元素會(huì)重復(fù)觸發(fā)


mouseenter
鼠標(biāo)進(jìn)入觸發(fā)，進(jìn)入子元素不會(huì)觸發(fā)，比較常用


mouseleave
鼠標(biāo)離開觸發(fā)，離開子元素不會(huì)觸發(fā)，比較常用



演示代碼：直接復(fù)制代碼到編輯器，在瀏覽器去測(cè)試這些事件
或者點(diǎn)擊這個(gè)鏈接測(cè)試
 
  
  
    hello
      

  
    
    
  


  
    
    
    
  

    


  
  
七、自定義事件
var EventCenter = {
  on: function(type, handler){
    document.addEventListener(type, handler)
  },
  fire: function(type, data){
    return document.dispatchEvent(new CustomEvent(type, {
      detail: data
    }))
  }
}

EventCenter.on("hello", function(e){
  console.log(e.detail)
})

EventCenter.fire("hello", "你好")

常見事件類型	解析
click	單擊
dblclick	雙擊
focus	焦點(diǎn)，比如表單input把光標(biāo)放上去開始輸入的時(shí)刻
blur	失去焦點(diǎn)，比如輸入完成切換到下一個(gè)輸入框時(shí)，就失去了焦點(diǎn)
keyup	按鍵按下松開的時(shí)候觸發(fā)，
change	比如input失去焦點(diǎn)并且值發(fā)生了改變
submit	表單提交的時(shí)候觸發(fā)
scroll	頁(yè)面滾動(dòng)的時(shí)候觸發(fā)，注意使用函數(shù)節(jié)流
resize	頁(yè)面面積變化觸發(fā)，注意使用函數(shù)節(jié)流
DOMContentLoaded	DOM 結(jié)構(gòu)解析完成，不用等圖片解析
load	頁(yè)面所有資源（圖片css 等）加載完成觸發(fā)，觸發(fā)時(shí)間比較晚
mouseover	鼠標(biāo)放上去觸發(fā)，注意進(jìn)入元素的子元素會(huì)重復(fù)觸發(fā)
mouseout	鼠標(biāo)拿出去觸發(fā)，注意離開元素的子元素會(huì)重復(fù)觸發(fā)
mouseenter	鼠標(biāo)進(jìn)入觸發(fā)，進(jìn)入子元素不會(huì)觸發(fā)，比較常用
mouseleave	鼠標(biāo)離開觸發(fā)，離開子元素不會(huì)觸發(fā)，比較常用