日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔！

生活随笔

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

编程问答

WebAPI(part12)--事件高级

發(fā)布時間：2023/12/19 编程问答 27 豆豆
生活随笔 收集整理的這篇文章主要介紹了 WebAPI(part12)--事件高级 小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

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

文章目錄

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

事件高級


注冊事件

給元素添加事件，稱為注冊事件或者綁定事件. 注冊事件有兩種方式：傳統(tǒng)方式和方法監(jiān)聽.

addEventListener 事件監(jiān)聽方式

EventTarget.addEventListener(type, listener, useCapture);

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

該方法接受3個參數(shù)：

  • type: 表示監(jiān)聽事件類型的字符串;
  • listener: 事件處理函數(shù)，事件發(fā)生時，會調(diào)用該監(jiān)聽函數(shù);
  • useCapture: 布爾值，默認為false

attachEvent事件監(jiān)聽方式

EventTarget.attachEvent(eventNameWithOn, callback);

EventTarget.attachEvent()方法將指定的監(jiān)聽器注冊到eventTarget上，當該對象觸發(fā)指定的事件時，指定的回調(diào)函數(shù)就會被執(zhí)行.

該方法接收兩個參數(shù)：

  • eventNameWithOn: 事件類型字符串，比如onclick、onmouseover，這里要帶on
  • callback: 事件處理函數(shù)，當目標觸發(fā)事件時回調(diào)函數(shù)被調(diào)用.

案例

<!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");// 傳統(tǒng)方式注冊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>

刪除事件(解綁事件)


刪除事件的方式

案例

<!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>1</div><div>2</div><script>var divs = document.querySelectorAll('div');divs[0].onclick = function() {alert("彈出1");divs[0].onclick = null;}divs[1].addEventListener("click", fn);function fn() {alert("彈出2");divs[1].removeEventListener("click", fn);}</script> </body> </html>

DOM事件流

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

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

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

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

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

注意：

  • Js代碼中只能執(zhí)行捕獲或者冒泡其中的一個階段。
  • 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就是一個事件對象寫到監(jiān)聽函數(shù)的小括號里面當形參來看//2.事件對象只有有了事件才會存在，它是系統(tǒng)給我們自動創(chuàng)建的，不需要我們傳遞參數(shù)//3.事件對象是我們事件的一系列相關數(shù)據(jù)的集合跟事件相關的比如鼠標點擊里面就包含了鼠標的相關信息，鼠標坐標啊，如果是鍵盤事件里面就包含的鍵盤事件的信息比如判斷用戶按下了那個鍵//4.這個事件對象我們可以自己命名比如event、evt、e// 5.事件對象也有兼容性問題 ie678通過 window.event</script> </body> </html>

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

target和this的區(qū)別

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

<!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</div><ul><li>A1</li><li>A2</li></ul><script>var div = document.querySelector("div");div.addEventListener('click', function(e) {console.log(e.target);console.log(this);})var ul = document.querySelector("ul");ul.addEventListener('click', function(e) {console.log(e.target);console.log(this);})</script></body> </html>

阻止默認行為

<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的方法阻止默認事件發(fā)生，但是return后的代碼不會執(zhí)行.return false;alert("彈出");}</script></body>

阻止冒泡

視頻地址：阻止事件冒泡

部分代碼：

事件委托

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

事件委托原理

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

部分代碼：

常用鼠標事件

禁止選中文字

視頻地址：禁止選中文字

獲得鼠標在頁面中的坐標

視頻地址：獲得鼠標在頁面中的坐標

常用鍵盤事件

總結

以上是生活随笔為你收集整理的WebAPI(part12)--事件高级的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。