DOM事件

DDreach 發布于2019-08-23 17:16 / 1332人閱讀

摘要：語法事件執行腳本在元素上綁定事件。最后這個布爾值參數如果是，表示在捕獲階段調用事件處理程序如果是，表示在冒泡階段調用事件處理程序。

注：部分參考來源：JavaScript 高級程序設計（第3版）
注：部分參考來源：慕課網

什么是事件

事件就是文檔或瀏覽器窗口中發生的一些特定的交互瞬間。

事件流

事件流描述的是從頁面中接收事件的順序。

IE的事件流是事件冒泡流。

Netscape Communicator 的事件流是事件捕獲流。

事件冒泡

IE的事件流叫做事件冒泡。

單擊頁面中的

，這個click事件按照下圖順序傳播：

事件捕獲

Netscape Communicator 團隊的事件流叫做事件捕獲。

單擊頁面中的

，這個click事件按照下圖順序傳播：

HTML事件

直接在HTML元素標簽內添加事件、執行腳本。

語法：

在HTML元素上綁定事件。

執行腳本可以是一個函數的調用

缺點：HTML代碼和javaScript代碼緊密耦合。

DOM0級事件

語法：ele.事件 = 執行腳本

功能：在DOM對象上綁定事件

說明：執行腳本可以是一個匿名函數，也可以是一個函數的調用

開始

DOM2級事件

定義了兩個方法：addEventListener()、removeEventListener()

3個參數：要處理的事件名、作為事件處理程序的函數和一個布爾值。最后這個布爾值參數如果是true，表示在捕獲階段調用事件處理程序；如果是false，表示在冒泡階段調用事件處理程序。

按鈕

事件類型

UI事件

焦點事件

鼠標事件

滾輪事件

文本事件

鍵盤事件

合成事件

變動事件

onload：頁面加載時觸發	onclick：鼠標點擊時觸發
onmouseover：鼠標滑過時觸發	Donmouseout：鼠標離開時觸發
onfoucs：獲得焦點時觸發	onblur：失去焦點時觸發
onchange：域的內容改變時發生

小例子：當腳本放在head之間時，加 onload

小例子： onfoucs、onblur

小例子：onchange


    請選擇顏色：

鍵盤事件與keyCode屬性

onkeydown：在用戶按下一個鍵盤按鍵時發生	onkeypress：在鍵盤按鍵被按下并釋放一個鍵時發生
onkeyup：在鍵盤按鍵被松開時發生	keyCode：返回onkeypress、onkeydown或onkeyup 事件觸發的鍵的值的字符代碼，或鍵的代碼

小例子：keyCode

document.onkeypress = function(event){
    console.log(event.keyCode);
}

小例子：onkeyup



    您還可以輸入30/30

事件委托

事件委托利用了事件冒泡，只指定一個事件處理程序，就可以管理某一類型的所有事件。即：利用冒泡機制將一類事件觸發盡可能高的委托給其父節點或祖先節點來觸發事件處理函數，這樣只需要定義一個函數，訪問一次DOM對象，減少了內存的占用以及訪問DOM元素的時間，降低了性能的消耗。如：li-->ul

不好的地方，請多多指教

云服務器 GPU云服務器 DOM事件 dom事件管理 dom事件冒泡 DOM元素事件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/104074.html

DOM 事件深入淺出（一）

摘要：本文就將帶大家深入淺出地了解事件的那些屬性和方法。針對不同級別的，我們的事件處理方式也是不一樣的。當然其優點是不需要操作來完成事件的綁定。文章地址事件深入淺出二。在項目開發時，我們時常需要考慮用戶在使用產品時產生的各種各樣的交互事件，比如鼠標點擊事件、敲擊鍵盤事件等。這樣的事件行為都是前端DOM事件的組成部分，不同的DOM事件會有不同的觸發條件和觸發效果。本文就將帶大家深入淺出地了解...

macg0406 2019-08-20 11:31 評論0 收藏0
原生js之DOM事件相關

摘要：而由于級標準中并沒有定義事件相關的內容，所以事件級別只包括級，級和級三種。此屬性返回當前事件所綁定的對象。自定義事件可以綁定到任意元素上，此處選擇只是為了演示方便。前端學習的東西有很多，現代前端開發，前端工程化的東西要懂，基礎的原生js也要懂，畢竟，框架都是有生命周期的，更替非常快，然而卻有這么一個框架，它是最輕量的前端框架，每個瀏覽器都內置，它叫vanilla.js。好吧，其實va...

learning 2019-08-22 13:51 評論0 收藏0
讀書筆記(05) - 事件 - JavaScript高級程序設計

摘要：而事件分為個級別級事件處理程序，級事件處理程序和級事件處理程序。級中沒有規范事件的相關內容，所以沒有級事件處理。 showImg(https://segmentfault.com/img/bVburYR?w=499&h=400); HTML依托于JavaScript來實現用戶與WEB網頁之間的動態交互，接收用戶操作并做出相應的反饋，而事件在此間則充當橋梁的重要角色。日常開發中，經常會...

tinylcy 2019-08-23 13:58 評論0 收藏0
整理DOM事件相關知識點

摘要：事件相關內容當用戶與瀏覽器發生的一些交互時如果希望去獲得用戶行為就需要借助事件來完成事件部分內容在中重要性不言而喻羅列需要了解與事件相關的知識如下這也是面試中遇到的問題事件的級別事件模型事件流事件處理程序描述事件捕獲冒泡的具體流程對象常見的 DOM事件相關內容當用戶與瀏覽器發生的一些交互時, 如果希望去獲得用戶行為, 就需要借助事件來完成. 事件部分內容在 JS中重要性不言而喻. ...

shenhualong 2019-08-02 15:26 評論0 收藏0
整理DOM事件相關知識點

摘要：事件相關內容當用戶與瀏覽器發生的一些交互時如果希望去獲得用戶行為就需要借助事件來完成事件部分內容在中重要性不言而喻羅列需要了解與事件相關的知識如下這也是面試中遇到的問題事件的級別事件模型事件流事件處理程序描述事件捕獲冒泡的具體流程對象常見的 DOM事件相關內容當用戶與瀏覽器發生的一些交互時, 如果希望去獲得用戶行為, 就需要借助事件來完成. 事件部分內容在 JS中重要性不言而喻. ...

red_bricks 2019-08-23 18:25 評論0 收藏0