2. 程式人生 > >HTML DOM Event 物件

HTML DOM Event 物件

阿新 • • 發佈：2018-12-01

Event 物件

Event 物件代表事件的狀態，比如事件在其中發生的元素、鍵盤按鍵的狀態、滑鼠的位置、滑鼠按鈕的狀態。

事件通常與函式結合使用，函式不會在事件發生前被執行！

事件控制代碼(Event Handlers)

HTML 4.0 的新特性之一是能夠使 HTML 事件觸發瀏覽器中的行為，比如當用戶點選某個 HTML 元素時啟動一段 JavaScript。下面是一個屬性列表，可將之插入 HTML 標籤以定義事件的行為。

屬性 此事件發生在何時…
onabort 影象的載入被中斷。
onblur 元素失去焦點。
onchange 域的內容被改變。
onclick 當用戶點選某個物件時呼叫的事件控制代碼。
ondblclick 當用戶雙擊某個物件時呼叫的事件控制代碼。
onerror 在載入文件或影象時發生錯誤。
onfocus 元素獲得焦點。
onkeydown 某個鍵盤按鍵被按下。
onkeypress 某個鍵盤按鍵被按下並鬆開。
onkeyup 某個鍵盤按鍵被鬆開。
onload 一張頁面或一幅影象完成載入。
onmousedown 滑鼠按鈕被按下。
onmousemove 滑鼠被移動。
onmouseout 滑鼠從某元素移開。
onmouseover 滑鼠移到某元素之上。
onmouseup 滑鼠按鍵被鬆開。
onreset 重置按鈕被點選。
onresize 視窗或框架被重新調整大小。
onselect 文字被選中。
onsubmit 確認按鈕被點選。
onunload 使用者退出頁面。

滑鼠 / 鍵盤屬性

屬性 描述
altKey 返回當事件被觸發時，“ALT” 是否被按下。
button 返回當事件被觸發時，哪個滑鼠按鈕被點選。
clientX 返回當事件被觸發時，滑鼠指標的水平座標。
clientY 返回當事件被觸發時，滑鼠指標的垂直座標。
ctrlKey 返回當事件被觸發時，“CTRL” 鍵是否被按下。
metaKey 返回當事件被觸發時，“meta” 鍵是否被按下。
relatedTarget 返回與事件的目標節點相關的節點。
screenX 返回當某個事件被觸發時，滑鼠指標的水平座標。
screenY 返回當某個事件被觸發時，滑鼠指標的垂直座標。
shiftKey 返回當事件被觸發時，“SHIFT” 鍵是否被按下。

IE 屬性

除了上面的滑鼠/事件屬性，IE 瀏覽器還支援下面的屬性：

屬性 描述
cancelBubble 如果事件控制代碼想阻止事件傳播到包容物件，必須把該屬性設為 true。
fromElement 對於 mouseover 和 mouseout 事件，fromElement 引用移出滑鼠的元素。
keyCode 對於 keypress 事件，該屬性聲明瞭被敲擊的鍵生成的 Unicode 字元碼。對於 keydown 和 keyup 事件，它指定了被敲擊的鍵的虛擬鍵盤碼。虛擬鍵盤碼可能和使用的鍵盤的佈局相關。
offsetX,offsetY 發生事件的地點在事件源元素的座標系統中的 x 座標和 y 座標。
returnValue 如果設定了該屬性，它的值比事件控制代碼的返回值優先順序高。把這個屬性設定為 fasle，可以取消發生事件的源元素的預設動作。
srcElement 對於生成事件的 Window 物件、Document 物件或 Element 物件的引用。
toElement 對於 mouseover 和 mouseout 事件，該屬性引用移入滑鼠的元素。
x,y 事件發生的位置的 x 座標和 y 座標，它們相對於用CSS動態定位的最內層包容元素。

標準 Event 屬性

下面列出了 2 級 DOM 事件標準定義的屬性。

屬性 描述
bubbles 返回布林值，指示事件是否是起泡事件型別。
cancelable 返回布林值，指示事件是否可擁可取消的預設動作。
currentTarget 返回其事件監聽器觸發該事件的元素。
eventPhase 返回事件傳播的當前階段。
target 返回觸發此事件的元素（事件的目標節點）。
timeStamp 返回事件生成的日期和時間。
type 返回當前 Event 物件表示的事件的名稱。

標準 Event 方法

下面列出了 2 級 DOM 事件標準定義的方法。IE 的事件模型不支援這些方法：

方法 描述
initEvent() 初始化新建立的 Event 物件的屬性。
preventDefault() 通知瀏覽器不要執行與事件關聯的預設動作。
stopPropagation() 不再派發事件。

相關推薦

HTML DOM Event 物件

Event 物件 Event 物件代表事件的狀態，比如事件在其中發生的元素、鍵盤按鍵的狀態、滑鼠的位置、滑鼠按鈕的狀態。 事件通常與函式結合使用，函式不會在事件發生前被執行！ 事件控制代碼(Event Handlers) HTML 4.0 的新特性之一是能夠使 HTML 事件

HTML DOM Event

回車 屬性列表 頁面 觸發 lur alert doc 失去 鼠標 HTML 事件觸發瀏覽器中的動作（action），比如當用戶點擊某個 HTML 元素時啟動一段 JavaScript。下面是一個屬性列表，這些屬性可插入 HTML 標簽來定義事件動作。 oncli

JavaScript之HTML DOM Event

當滑鼠在button上點選時，會在button上觸發一個click事件。但是button是div的一個子元素， 在button裡點選相當於在div裡點選，是否click事件也會觸發在div上？如果click事件也觸發在div上， 會不會共用同一個事件物件？如果click事件也觸發在div上，誰的

HTML DOM FileUpload 物件

FileUpload 物件 在 HTML 文件中 <input type="file"> 標籤每出現一次，一個 FileUpload 物件就會被建立。 該元素包含一個文字輸入欄位，用來輸入檔名，還有一個按鈕，用來開啟檔案選擇對話方塊以便圖形化選擇檔案。 該元素的 va

08 DOM 新增和刪除元素、HTML DOM常用物件

正課: 1. 新增/刪除元素 2. ***HTML DOM常用物件    select/option    table/行分組/tr/td    form 1. 新增/刪除元素:   新增: 3步:      1. 建立新的空元素:          var a=docum

html dom window物件

html主頁面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> &

Javascript DOM Event物件方法詳解

  Event 物件代表事件的狀態，比如事件在其中發生的元素、鍵盤按鍵的狀態、滑鼠的位置、滑鼠按鈕的狀態。事件通常與函式結合使用，函式不會在事件發生前被執行！ 事件分為三個階段：   事件捕獲 --&

HTML文件物件(DOM)

基本概念 每個載入瀏覽器的 HTML 文件都會成為 Document 物件。 Document 物件使我們可以從指令碼中對 HTML 頁面中的所有元素進行訪問。 Document 物件是 Window 物件的一部分 當瀏覽器開啟一個HTML文件時，瀏覽器解析HTML文件的標記，並建立表示這

JavaScript HTML DOM 物件

除了內建的 JavaScript 物件以外，你還可以使用 JavaScript 訪問並處理所有的 HTML DOM 物件。 更多 JavaScript 物件 點選以下連結，可以獲得以下物件的更多資訊，包括它們的集合、屬性、方法以及事件。 物件

HTML DOM 之 DOM物件：Document Object Model (文件物件模型)

思維導圖 HTML DOM 簡介     HTML 文件物件模型（HTML Document Object Model）定義了訪問和處理 HTML 文件的標準方法。     在繼續學習之前，您需要對下面的知識有基本的瞭解：      

HTML DOM 物件的屬性和方法

getElementById(id) ———— 獲取帶有指定id的節點元素。 getElementByTagName(tagename）———– 獲取相應標籤元素的子元素集合，它允許吧萬用字元作為它的引數，“”*“”一般是放在引號中以區分乘號。返回值是偽陣列。 getElementByClassName(c

JavaScript HTML DOM節點型別之Document型別（Document物件屬性和Document物件集合屬性）

ocument物件使我們可以用JavaScript對 HTML 頁面中的所有元素進行訪問。要訪問 HTML 頁面中元素，除可以用Document物件中的方法外，還可以通過Document物件的屬性。Document物件的屬性和方法中有的可返回單個Element元素物件，有

JS HTML DOM物件和指令碼函式的互呼叫(字串標識)

從目標物件到script函式的呼叫： Js引擎會根據字串值，搜尋上下文，獲取指定型別名字的目標物件，對目標物件執行函式。 當然onclick=message()也是可以呼叫的(js函式是非字串形式)。 <input type="button"value="View m

HTML DOM item() 方法

child best ner == asc ctype sre 回文 代碼 一直不知道javascript還有類似jQ裏面eq()的函數，原來原生javascript的item()有類似功能： 由於是原生javascript,先補習下children和childNodes

HTML DOM addEventListener() 方法

innerhtml err 版本號 list 更多 use run afa 手冊 定義和用法 addEventListener() 方法用於向指定元素添加事件句柄。 提示： 使用 removeEventListener() 方法來移除 addEventListener()

核心DOM和html DOM的區別

技術分享 row 標簽 node splay out mov ... tex DOM分為三部分： （1）核心DOM：遍歷DOM樹、添加新節點、刪除節點、修改節點 （2）HTML DOM：以一種簡便的方法訪問DOM樹 （3）XML DOM：準用於操作XML文檔 核心D

HTML DOM 屬性

使用 tab 簡單方法 htm 文本節點 undefined text 大寫 null innerHTML 屬性 獲取元素內容的最簡單方法是使用 innerHTML 屬性。 innerHTML 屬性對於獲取或替換 HTML 元素的內容很有用。 實例 下面的代碼獲取 id="

JavaScript HTML DOM

文檔 pre tel mod 實例 最簡 nts model images 通過 HTML DOM，可訪問 JavaScript HTML 文檔的所有元素。 HTML DOM （文檔對象模型） 當網頁被加載時，瀏覽器會創建頁面的文檔對象模型（Document Object

JavaScript HTML DOM 元素（節點）

enc javascrip item pan 效果 demo 移動元素 成功 append 在文檔對象模型 (DOM) 中，每個節點都是一個對象。DOM 節點有三個重要的屬性 ： 1. nodeName : 節點的名稱 2. nodeValue ：節點的值 3. no

JavaScript HTML DOM - 改變CSS

head char document ctype .cn body pre 語法 logs 改變 HTML 樣式 //語法document.getElementById(id).style.property=new style <p id="p2">He