搜尋
首頁web前端js教程JavaScript事件處理的方式(三種)_javascript技巧

最近這段時間因為每天要修改網站,為網站做特效,所以看了很多的js接觸事件,自己只會使用一小部分,有時用的時候也比較混亂,現在系統的整理了一下,特此分享到腳本之家平台供大家參考下!

一、什麼是JavaScript事件?

事件(Event)是JavaScript應用跳動的心臟,也是把所有東西黏在一起的膠水,當我們與瀏覽器中Web頁面進行某些類型的互動時,事件就發生了。

事件可能是使用者在某些內容上的點擊、滑鼠經過某個特定元素或按下鍵盤上的某些按鍵,事件還可能是Web瀏覽器中發生的事情,比如說某個Web頁面加載完成,或者是使用者滾動視窗或改變視窗大小。說穿了,事件是文件或瀏覽器中發生的特定互動瞬間!

透過使用JavaScript,你可以監聽特定事件的發生,並規定讓某些事件發生以對這些事件做出回應。

二、事件流

事件流就是描述了頁面中接受事件的順序,在瀏覽器發展的初期,兩大瀏覽器廠商IE和Netscape互掐,出現了一個坑爹的情況,那就是他們對事件流的解釋出現了兩中截然相反的定義。也就是我們所熟悉的:IE的事件冒泡,Netscape的事件捕捉。先來一張圖,簡單的看下結構:

1、事件冒泡

事件冒泡即事件最開始由最具體的元素(文檔中嵌套層次最深的那個節點)接收,然後逐級向上傳播至最不具體的節點(文檔)。拿上面的圖來說明,就是當點擊text部分時,先由text處的元素接收,然後逐級傳播至window,即執行6-7-8-9-10的過程。

2、事件擷取

事件捕獲即事件最早由較不具體的節點接收,而最具體的節點最後接收到事件。同理,在上面的模型中,就是點擊text部分時,先由window接收,然後逐級傳播至text元素,即執行1-2-3-4-5的過程。

具體在程式碼中怎麼表現呢?後面給出!

三、Javascript事件處理程序的3種方式

產生了事件,我們就要去處理他,Javascript事件處理程序主要有3種方式:

1、HTML事件處理程序

也就是我們直接在HTML程式碼中加入事件處理程序,如下面這段程式碼:

<input id="btn" value="按钮" type="button" onclick="showmsg();">
  <script>
   function showmsg(){
   alert("HTML添加事件处理");
   }
  </script> 

從上面的程式碼我們可以看出,事件處理是直接嵌套在元素裡頭的,這樣有一個毛病:就是html程式碼和js的耦合性太強,如果哪一天想要改變js中showmsg,那麼不但要再js中修改,還需要到html中修改,一兩處的修改我們能接受,但是當你的程式碼達到萬行等級的時候,修改起來就需要勞民傷財了,所以,這個方式我們並不推薦使用。

2、DOM0級事件處理程序

即為指定物件新增事件處理,看下面的一段程式碼:

<input id="btn" value="按钮" type="button">
  <script>
    var btn= document.getElementById("btn");
   btn.onclick=function(){
      alert("DOM级添加事件处理");
    } 
    btn.onclick=null;//如果想要删除btn的点击事件,将其置为null即可
  </script> 

從上面的程式碼中,我們能看出,相對於HTML事件處理程序,DOM0級事件,html程式碼和js程式碼的耦合性已經大大降低。但是,聰明的程式設計師還是不太滿足,期望尋找更簡單的處理方式,以下來看第三種處理方法。

3、DOM2級事件處理程序

DOM2也是對特定的物件添加事件處理程序,但是主要涉及兩個方法,用於處理指定和刪除事件處理程序的操作:addEventListener()和 removeEventListener()。它們都接收三個參數:要處理的事件名、作為事件處理程序的函數和一個布林值(是否在捕獲階段處理事件),看下面的一段程式碼:

<input id="btn" value="按钮" type="button">
  <script>
   var btn=document.getElementById("btn");
   btn.addEventListener("click",showmsg,false);//这里我们把最后一个值置为false,即不在捕获阶段处理,一般来说冒泡处
理在各浏览器中兼容性较好
   function showmsg(){
   alert("DOM级添加事件处理程序");
   }
   btn.removeEventListener("click",showmsg,false);//如果想要把这个事件删除,只需要传入同样的参数即可
  </script>

這裡我們可以看到,在加入刪除事件處理的時候,最後一種方法比較直接,也最簡單。但馬海祥提醒大家要注意的是,在刪除事件處理的時候,傳入的參數一定要跟之前的參數一致,否則刪除會失效!

四、事件冒泡與事件擷取的流程與差異

說到這裡,再給大家來一點代碼來說明下事件冒泡和事件捕獲的流程,同時也讓大家能看出二者的區別:

<!doctype html>
  <html lang="en">
  <head>
   <meta charset="UTF-">
   <title>Document</title>
   <style>
   #p{width:px;height:px;border:px solid black;}
   #c{width:px;height:px;border:px solid red;}
   </style>
  </head>
  <body>
   <div id="p">
   i am www.mahaixiang.cn
   <div id="c">i like www.mahaixiang.cn</div>
   </div>
   <script>
   var p = document.getElementById('p');
     var c = document.getElementById('c');
   c.addEventListener('click', function () {
   alert('子节点捕获')
   }, true);
   c.addEventListener('click', function () {
   alert('子节点冒泡')
   }, false);
   p.addEventListener('click', function () {
   alert('父节点捕获')
   }, true);
   p.addEventListener('click', function () {
   alert('父节点冒泡')
   }, false);
   </script>
  </body>
</html> 

運行上面的程式碼,點擊子元素的時候,我們會發現,執行的先後順序是:父節點捕獲--子節點捕獲--子節點冒泡--父節點冒泡。從這個例子中,大家也就明白了,另外,DOM2級事件規定事件包含三個階段:

1、事件捕捉階段;

2、處於目標階段;

3、事件冒泡階段。

首先是捕獲,然後處於目標階段(即來到事件的發出位置),最後才是冒泡,不科學的是,居然木有DOM1級事件處理程序,大家注意下,別鬧出笑話了!

五、補充

1. IE事件處理程序也對應有兩個方法:attachEvent()新增事件,detachEvent()刪除事件,這兩個方法接收相同的兩個參數:事件處理程序名稱與事處理函數。這裡為什麼沒有布林值呢?因為ie8以及更早的版本只支援事件冒泡,所以最後一個參數預設的相當於false來處理! (支援IE事件處理程序的瀏覽器有IE,opera)。

2. 事件對像是用來記錄一些事件發生時的相關資訊的對象,但事件對像只有事件發生時才會產生,並且只能是事件處理函數內部訪問,在所有事件處理函數運行結束後,事件物件就被銷毀!

以上所述是小編給大家介紹的JavaScript事件處理的方式(三種),希望對大家有幫助!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
在JavaScript中替換字符串字符在JavaScript中替換字符串字符Mar 11, 2025 am 12:07 AM

JavaScript字符串替換方法詳解及常見問題解答 本文將探討兩種在JavaScript中替換字符串字符的方法:在JavaScript代碼內部替換和在網頁HTML內部替換。 在JavaScript代碼內部替換字符串 最直接的方法是使用replace()方法: str = str.replace("find","replace"); 該方法僅替換第一個匹配項。要替換所有匹配項,需使用正則表達式並添加全局標誌g: str = str.replace(/fi

自定義Google搜索API設置教程自定義Google搜索API設置教程Mar 04, 2025 am 01:06 AM

本教程向您展示瞭如何將自定義的Google搜索API集成到您的博客或網站中,提供了比標準WordPress主題搜索功能更精緻的搜索體驗。 令人驚訝的是簡單!您將能夠將搜索限制為Y

8令人驚嘆的jQuery頁面佈局插件8令人驚嘆的jQuery頁面佈局插件Mar 06, 2025 am 12:48 AM

利用輕鬆的網頁佈局:8 ESTISSEL插件jQuery大大簡化了網頁佈局。 本文重點介紹了簡化該過程的八個功能強大的JQuery插件,對於手動網站創建特別有用

構建您自己的Ajax Web應用程序構建您自己的Ajax Web應用程序Mar 09, 2025 am 12:11 AM

因此,在這裡,您準備好了解所有稱為Ajax的東西。但是,到底是什麼? AJAX一詞是指用於創建動態,交互式Web內容的一系列寬鬆的技術。 Ajax一詞,最初由Jesse J創造

什麼是這個&#x27;在JavaScript?什麼是這個&#x27;在JavaScript?Mar 04, 2025 am 01:15 AM

核心要點 JavaScript 中的 this 通常指代“擁有”該方法的對象,但具體取決於函數的調用方式。 沒有當前對象時,this 指代全局對象。在 Web 瀏覽器中,它由 window 表示。 調用函數時,this 保持全局對象;但調用對象構造函數或其任何方法時,this 指代對象的實例。 可以使用 call()、apply() 和 bind() 等方法更改 this 的上下文。這些方法使用給定的 this 值和參數調用函數。 JavaScript 是一門優秀的編程語言。幾年前,這句話可

10張移動秘籍用於移動開發10張移動秘籍用於移動開發Mar 05, 2025 am 12:43 AM

該帖子編寫了有用的作弊表,參考指南,快速食譜以及用於Android,BlackBerry和iPhone應用程序開發的代碼片段。 沒有開發人員應該沒有他們! 觸摸手勢參考指南(PDF)是Desig的寶貴資源

通過來源查看器提高您的jQuery知識通過來源查看器提高您的jQuery知識Mar 05, 2025 am 12:54 AM

jQuery是一個很棒的JavaScript框架。但是,與任何圖書館一樣,有時有必要在引擎蓋下發現發生了什麼。也許是因為您正在追踪一個錯誤,或者只是對jQuery如何實現特定UI感到好奇

如何創建和發布自己的JavaScript庫?如何創建和發布自己的JavaScript庫?Mar 18, 2025 pm 03:12 PM

文章討論了創建,發布和維護JavaScript庫,專注於計劃,開發,測試,文檔和促銷策略。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

倉庫:如何復興隊友
1 個月前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
1 個月前By尊渡假赌尊渡假赌尊渡假赌

熱工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

將Eclipse與SAP NetWeaver應用伺服器整合。

Atom編輯器mac版下載

Atom編輯器mac版下載

最受歡迎的的開源編輯器

mPDF

mPDF

mPDF是一個PHP庫,可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件,並處理不同的語言。與原始腳本如HTML2FPDF相比,它的速度較慢,並且在使用Unicode字體時產生的檔案較大,但支援CSS樣式等,並進行了大量增強。支援幾乎所有語言,包括RTL(阿拉伯語和希伯來語)和CJK(中日韓)。支援嵌套的區塊級元素(如P、DIV),

SecLists

SecLists

SecLists是最終安全測試人員的伙伴。它是一個包含各種類型清單的集合,這些清單在安全評估過程中經常使用,而且都在一個地方。 SecLists透過方便地提供安全測試人員可能需要的所有列表,幫助提高安全測試的效率和生產力。清單類型包括使用者名稱、密碼、URL、模糊測試有效載荷、敏感資料模式、Web shell等等。測試人員只需將此儲存庫拉到新的測試機上,他就可以存取所需的每種類型的清單。