HTML DOM教程 21-HTML DOM Event 对象
生活随笔
收集整理的這篇文章主要介紹了
HTML DOM教程 21-HTML DOM Event 对象
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
HTML DOM教程 21-HTML DOM Event 對象
?
1:Event 對象
Event 對象代表事件的狀態，比如事件在其中發生的元素、鍵盤按鍵的狀態、鼠標的位置、鼠標按鈕的狀態。
事件通常與函數結合使用，函數不會在事件發生前被執行！
2:事件句柄 (Event Handlers)
HTML 4.0 的新特性之一是能夠使 HTML 事件觸發瀏覽器中的行為，比如當用戶點擊某個 HTML 元素時啟動一段 JavaScript。下面是一個屬性列表，可將之插入 HTML 標簽以定義事件的行為。
| onabort | 圖像的加載被中斷。 | 4 | 1 | 9 | Yes |
| onblur | 元素失去焦點。 | 3 | 1 | 9 | Yes |
| onchange | 域的內容被改變。 | 3 | 1 | 9 | Yes |
| onclick | 當用戶點擊某個對象時調用的事件句柄。 | 3 | 1 | 9 | Yes |
| ondblclick | 當用戶雙擊某個對象時調用的事件句柄。 | 4 | 1 | 9 | Yes |
| onerror | 在加載文檔或圖像時發生錯誤。 | 4 | 1 | 9 | Yes |
| onfocus | 元素獲得焦點。 | 3 | 1 | 9 | Yes |
| onkeydown | 某個鍵盤按鍵被按下。 | 3 | 1 | No | Yes |
| onkeypress | 某個鍵盤按鍵被按下并松開。 | 3 | 1 | 9 | Yes |
| onkeyup | 某個鍵盤按鍵被松開。 | 3 | 1 | 9 | Yes |
| onload | 一張頁面或一幅圖像完成加載。 | 3 | 1 | 9 | Yes |
| onmousedown | 鼠標按鈕被按下。 | 4 | 1 | 9 | Yes |
| onmousemove | 鼠標被移動。 | 3 | 1 | 9 | Yes |
| onmouseout | 鼠標從某元素移開。 | 4 | 1 | 9 | Yes |
| onmouseover | 鼠標移到某元素之上。 | 3 | 1 | 9 | Yes |
| onmouseup | 鼠標按鍵被松開。 | 4 | 1 | 9 | Yes |
| onreset | 重置按鈕被點擊。 | 4 | 1 | 9 | Yes |
| onresize | 窗口或框架被重新調整大小。 | 4 | 1 | 9 | Yes |
| onselect | 文本被選中。 | 3 | 1 | 9 | Yes |
| onsubmit | 確認按鈕被點擊。 | 3 | 1 | 9 | Yes |
| onunload | 用戶退出頁面。 | 3 | 1 | 9 | Yes |
3:鼠標 / 鍵盤屬性
| altKey | 返回當事件被觸發時，"ALT" 是否被按下。 | 6 | 1 | 9 | Yes |
| button | 返回當事件被觸發時，哪個鼠標按鈕被點擊。 | 6 | 1 | 9 | Yes |
| clientX | 返回當事件被觸發時，鼠標指針的水平坐標。 | 6 | 1 | 9 | Yes |
| clientY | 返回當事件被觸發時，鼠標指針的垂直坐標。 | 6 | 1 | 9 | Yes |
| ctrlKey | 返回當事件被觸發時，"CTRL" 鍵是否被按下。 | 6 | 1 | 9 | Yes |
| metaKey | 返回當事件被觸發時，"meta" 鍵是否被按下。 | No | 1 | 9 | Yes |
| relatedTarget | 返回與事件的目標節點相關的節點。 | No | 1 | 9 | Yes |
| screenX | 返回當某個事件被觸發時，鼠標指針的水平坐標。 | 6 | 1 | 9 | Yes |
| screenY | 返回當某個事件被觸發時，鼠標指針的垂直坐標。 | 6 | 1 | 9 | Yes |
| shiftKey | 返回當事件被觸發時，"SHIFT" 鍵是否被按下。 | 6 | 1 | 9 | Yes |
4: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動態定位的最內層包容元素。 |
5:標準 Event 屬性
下面列出了 2 級 DOM 事件標準定義的屬性。
| bubbles | 返回一個布爾值，指示事件是否是起泡事件類型。 | No | 1 | 9 | Yes |
| cancelable | 返回一個指示布爾值，指示事件是否可擁可取消的默認動作。 | No | 1 | 9 | Yes |
| currentTarget | 返回其事件監聽器觸發該事件的元素。 | No | 1 | 9 | Yes |
| eventPhase | 返回事件傳播的當前階段。 | ? | ? | ? | Yes |
| target | 返回觸發此事件的元素（事件的目標節點）。 | No | 1 | 9 | Yes |
| timeStamp | 返回事件生成的日期和時間。 | No | 1 | 9 | Yes |
| type | 返回當前 Event 對象表示的事件的名稱。 | 6 | 1 | 9 | Yes |
6:標準 Event 方法
下面列出了 2 級 DOM 事件標準定義的方法。IE 的事件模型不支持這些方法：
| initEvent() | 初始化新創建的 Event 對象的屬性。 | No | 1 | 9 | Yes |
| preventDefault() | 通知瀏覽器不要執行與事件關聯的默認動作。 | No | 1 | 9 | Yes |
| stopPropagation() | 終止事件在傳播過程的捕獲、目標處理或起泡階段進一步傳播。調用該方法后，該節點上處理該事件的處理程序將被調用，事件不再被分派到其他節點。 | No | 1 | 9 | Yes |
? 7：onabort 事件
在本例中，如果圖像的加載中斷，我們將調用一個函數：
<html><head>
<script type="text/javascript">
function abortImage()
{
alert('Error: Loading of the image was aborted')
}
</script>
</head>
<body>
<img src="image_w3default.gif" onabort="abortImage()" />
</body>
</html>
8:onblur 事件
8.1 支持該事件的 HTML 標簽： <a>, <acronym>, <address>, <area>, <b>, <bdo>, <big>, <blockquote>,
<button>, <caption>, <cite>, <dd>, <del>, <dfn>, <div>, <dl>, <dt>,
<em>, <fieldset>, <form>, <frame>, <frameset>, <h1> to <h6>, <hr>, <i>,
<iframe>, <img>, <input>, <ins>, <kbd>, <label>, <legend>, <li>,
<object>, <ol>, <p>, <pre>, <q>, <samp>, <select>, <small>, <span>,
<strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>,
<th>, <thead>, <tr>, <tt>, <ul>, <var>
8.2 支持該事件的 JavaScript 對象： button, checkbox, fileUpload, layer, frame, password,
radio, reset, submit, text, textarea, window
8.3 實例
在本例中，我們將在用戶離開輸入框時執行 JavaScript 代碼：
<html><head>
<script type="text/javascript">
function upperCase()
{
var x=document.getElementById("fname").value
document.getElementById("fname").value=x.toUpperCase()
}
</script>
</head>
<body>
輸入您的姓名：
<input type="text" id="fname" onblur="upperCase()" />
</body>
</html> 9：onkeydown 事件
9.1 支持該事件的 JavaScript 對象： document, image, link, textarea
?
9.2 提示和注釋瀏覽器差異：Internet Explorer 使用 event.keyCode 取回被按下的字符，而Netscape/Firefox/Opera 使用 event.which。
9.3 在本例中，用戶無法在輸入框中鍵入數字：
<html><body>
<script type="text/javascript">
function noNumbers(e)
{
var keynum
var keychar
var numcheck
if(window.event) // IE
{
keynum = e.keyCode
}
else if(e.which) // Netscape/Firefox/Opera
{
keynum = e.which
? }
keychar = String.fromCharCode(keynum)
numcheck = /"d/
return !numcheck.test(keychar)
}
</script>
<form>
<input type="text" onkeydown="return noNumbers(event)" />
</form>
</html>
?
轉載于:https://www.cnblogs.com/pricks/archive/2009/05/04/1448979.html
總結
以上是生活随笔為你收集整理的HTML DOM教程 21-HTML DOM Event 对象的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： QQ摘录 “废了！”
- 下一篇： HTML DOM教程 22-HTML D