當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

WebAPI(part12)--事件高级

發布時間：2023/12/19 编程问答 30 豆豆

生活随笔收集整理的這篇文章主要介紹了 WebAPI(part12)--事件高级小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

學習筆記，僅供參考，有錯必究

文章目錄

- 事件高級
- - 注冊事件
  - - addEventListener 事件監聽方式
    - attachEvent事件監聽方式
    - 案例
  - 刪除事件(解綁事件)
  - - 刪除事件的方式
    - 案例
  - DOM事件流
  - 事件對象
  - - 案例
    - 事件對象的常見屬性和方法
    - target和this的區別
    - 阻止默認行為
    - 阻止冒泡
  - 事件委托
  - - 事件委托原理
  - 常用鼠標事件
  - - 禁止選中文字
    - 獲得鼠標在頁面中的坐標
  - 常用鍵盤事件

事件高級

注冊事件

給元素添加事件，稱為注冊事件或者綁定事件. 注冊事件有兩種方式：傳統方式和方法監聽.

addEventListener 事件監聽方式

EventTarget.addEventListener(type, listener, useCapture);

該方法將指定的監聽器注冊到eventTarget(目標對象)上,當該對象觸發指定的事件時，就會執行事件處理函數.

該方法接受3個參數：

type: 表示監聽事件類型的字符串;
listener: 事件處理函數，事件發生時，會調用該監聽函數;
useCapture: 布爾值，默認為false

attachEvent事件監聽方式

EventTarget.attachEvent(eventNameWithOn, callback);

EventTarget.attachEvent()方法將指定的監聽器注冊到eventTarget上，當該對象觸發指定的事件時，指定的回調函數就會被執行.

該方法接收兩個參數：

eventNameWithOn: 事件類型字符串，比如onclick、onmouseover，這里要帶on
callback: 事件處理函數，當目標觸發事件時回調函數被調用.

案例

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head> <body><button>按鈕1</button><button>按鈕2</button><script>var btns = document.querySelectorAll("button");// 傳統方式注冊btns[0].onclick = function() {alert("A 彈出1");}btns[0].onclick = function() {alert("A 彈出2");}// 事件偵聽注冊事件 addEventListener// 里面的事件類型是字符串必定加引號而且不帶on// 同一個元素同一個事件可以添加多個偵聽器（事件處理程序）btns[1].addEventListener("click", function() {alert("B 彈出1");})btns[1].addEventListener("click", function() {alert("B 彈出2");})</script> </body> </html>

刪除事件(解綁事件)

刪除事件的方式

案例

DOM事件流

視頻地址：DOM事件流代碼驗證 .

事件流描述的是從頁面中接收事件的順序。事件發生時會在元素節點之間按照特定的順序傳播，這個傳播過程即DOM事件流。

比如我們給一個div注冊了點擊事件：

捕獲階段
當前目標階段
冒泡階段

事件冒泡：IE最早提出，事件開始時由最具體的元素接收，然后逐級向上傳播到到DOM最頂層節點的過程。
事件捕獲：網景最早提出，由DOM最頂層節點開始，然后逐級向下傳播到到最具體的元素接收的過程。

注意：

Js代碼中只能執行捕獲或者冒泡其中的一個階段。
onclick 和 attachEvent 只能得到冒泡階段。

事件對象

案例

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 100px;height: 100px;background-color: red;}</style></head> <body><div>我是div-A</div><div>我是div-B</div><script>var div = document.querySelectorAll("div");div[0].onclick = function(event) {console.log(event);}div[1].addEventListener("click", function(e) {console.log(e);})//1.event就是一個事件對象寫到監聽函數的小括號里面當形參來看//2.事件對象只有有了事件才會存在，它是系統給我們自動創建的，不需要我們傳遞參數//3.事件對象是我們事件的一系列相關數據的集合跟事件相關的比如鼠標點擊里面就包含了鼠標的相關信息，鼠標坐標啊，如果是鍵盤事件里面就包含的鍵盤事件的信息比如判斷用戶按下了那個鍵//4.這個事件對象我們可以自己命名比如event、evt、e// 5.事件對象也有兼容性問題 ie678通過 window.event</script> </body> </html>

事件對象的常見屬性和方法

target和this的區別

e.target返回的是觸發事件的對象（元素），而this返回的是綁定事件的對象（元素）

阻止默認行為

<body><a href="https://www.baidu.com/">百度</a><a href="https://www.csdn.net/">CSDN</a><script>var a = document.querySelectorAll("a");a[0].addEventListener("click", function(e) {e.preventDefault();})a[1].onclick = function(e) {// 我們可以用return false的方法阻止默認事件發生，但是return后的代碼不會執行.return false;alert("彈出");}</script></body>

阻止冒泡

視頻地址：阻止事件冒泡

部分代碼：

事件委托

事件委托也稱為事件代理，在jQuery里面稱為事件委派.

事件委托原理

不是每個子節點單獨設置事件監聽器，而是事件監聽器設置在其父節點上，然后利用冒泡原理影響設置每個子節點.
比如，給ul注冊點擊事件，然后利用事件對象的target來找到當前點擊的li，因為點擊li，事件會冒泡到ul上，ul有注冊事件，就會觸發事件監聽器.