javascript 的 事件型別（事件） JavaScript中常用的事件
阿新 • • 發佈：2018-12-22
事件通常與函式配合使用，這樣就可以通過發生的事件來驅動函式執行。
事件是文件或者瀏覽器視窗中發生的，特定的互動瞬間。
事件是使用者或瀏覽器自身執行的某種動作，如click,load和mouseover都是事件的名字。
事件是javaScript和DOM之間互動的橋樑。
你若觸發，我便執行——事件發生，呼叫它的處理函式執行相應的JavaScript程式碼給出響應。
典型的例子有：頁面載入完畢觸發load事件；使用者單擊元素，觸發click事件。
事件流描述的是從頁面中接收事件的順序。
事件發生時會在元素節點與根節點之間按照特定的順序傳播，路徑所經過的所有節點都會收到該事件，這個傳播過程即DOM事件流。
事件傳播的順序對應瀏覽器的兩種事件流模型：捕獲型事件流和冒泡型事件流。
冒泡型事件流：事件的傳播是從最特定的事件目標到最不特定的事件目標。即從DOM樹的葉子到根。【推薦】
捕獲型事件流：事件的傳播是從最不特定的事件目標到最特定的事件目標。即從DOM樹的根到葉子。
事件捕獲的思想就是不太具體的節點應該更早接收到事件，而最具體的節點最後接收到事件。
<html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <div id="myDiv">Click me!</div> </body> </html>
上面這段html程式碼中，單擊了頁面中的<div>元素，
在冒泡型事件流中click事件傳播順序為<div>—》<body>—》<html>—》document
在捕獲型事件流中click事件傳播順序為document—》<html>—》<body>—》<div>
note:
1）、所有現代瀏覽器都支援事件冒泡，但在具體實現中略有差別：
IE5.5及更早版本中事件冒泡會跳過<html>元素(從body直接跳到document)。
IE9、Firefox、Chrome、和Safari則將事件一直冒泡到window物件。
2）、IE9、Firefox、Chrome、Opera、和Safari都支援事件捕獲。儘管DOM標準要求事件應該從document物件開始傳播，但這些瀏覽器都是從window物件開始捕獲事件的。
3）、由於老版本瀏覽器不支援，很少有人使用事件捕獲。建議使用事件冒泡。
DOM標準採用捕獲+冒泡。兩種事件流都會觸發DOM的所有物件，從document物件開始，也在document物件結束。
DOM標準規定事件流包括三個階段：事件捕獲階段、處於目標階段和事件冒泡階段。
- 事件捕獲階段：實際目標（<div>）在捕獲階段不會接收事件。也就是在捕獲階段，事件從document到<html>再到<body>就停止了。上圖中為1~3.
- 處於目標階段：事件在<div>上發生並處理。但是事件處理會被看成是冒泡階段的一部分。
- 冒泡階段：事件又傳播迴文檔。
note:
1）、儘管“DOM2級事件”標準規範明確規定事件捕獲階段不會涉及事件目標，但是在IE9、Safari、Chrome、Firefox和Opera9.5及更高版本都會在捕獲階段觸發事件物件上的事件。結果，就是有兩次機會在目標物件上面操作事件。
2）、並非所有的事件都會經過冒泡階段 。所有的事件都要經過捕獲階段和處於目標階段，但是有些事件會跳過冒泡階段：如，獲得輸入焦點的focus事件和失去輸入焦點的blur事件。
更多詳情見：http://www.cnblogs.com/starof/p/4066381.html
JavaScript中常用的事件
1.onclick事件
點選事件（onclick並不是js中的方法，onclick只是瀏覽器提供js的一個dom介面，讓js可以操作dom，所以onclick大小寫都是沒問題的，比如HTML程式碼就不用區分大小寫）
例：
<%@pagelanguage="Java"import="java.util.*"pageEncoding="UTF-8"%> <!DOCTYPEHTMLPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>JavaScript的一些常用方法</title> <scripttype="text/javascript"> functionmyFunction(){ alert("測試onclick點選事件"); } </script> </head> <body> <center> <buttononclick="myFunction()">點選這裡</button> </center> </body> </html> onclick通常在下列基本物件中產生： button(按鈕物件)、checkbox(複選框)、radio(單選框)、reset buttons(重置按鈕)、submit buttons(提交按鈕) 2.onload事件 可以body執行，<bodyonload="alert(123)"></body>,其中onload後面可以寫一個方法，如：onload="test()",然後在JavaScript中寫一個test()方法，則在頁面一開始載入的時候會先呼叫這個方法 <%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%> <!DOCTYPEHTMLPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>JavaScript的一些常用方法</title> <scripttype="text/javascript"> functiontest(){ alert("測試onload方法"); } </script> </head> <bodyonload="test()"> </body> </html> 注意：此方法只能寫在<body>標籤之中 3.onchange事件 事件在內容改變的時候觸發，和jQuery中的change()方法一樣 當內容改變時觸發。可用於文字框、列表框等物件，該事件一般用於響應使用者修改內容帶來的其他改變操作。 說明：當用戶向一個文字框中輸入文字時，不會觸發onchange事件，只有使用者輸入結束後，單擊文字框以外的區域，使文字框失去焦點時才觸發該事件，如果是下拉框，則選擇結束後即觸發。 <%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%> <!DOCTYPEHTMLPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>JavaScript的一些常用方法</title> <scripttype="text/javascript"> functionupperCase(){ varx = document.getElementById("fname").value; document.getElementById("fname").value = x.toUpperCase(); } </script> </head> <body> <p> <labelfor="name">使用者名稱：</label> <inputtype="text"id="fname"onchange="upperCase()"value=""/> </p> </body> </html> 說明：上例實際效果是，當輸入框失去焦點時內容轉成大寫。出現這種情況是由於input必須是失去焦點才會檢測到內容發生改變。而change事件通常是用於下拉選單select標籤。 4.onblur事件和onfocus事件 當前元素失去焦點時觸發該事件，對應的是onfocus事件：得到焦點事件 <%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%> <!DOCTYPEHTMLPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>JavaScript的一些常用方法</title> <scripttype="text/javascript"> functionchkvalue(txt) { if(txt.value=="") alert("文字框裡必須填寫內容!"); } functionsetStyle(x){ document.getElementById(x).style.background="yellow" } </script> </head> <body> 失去焦點： <inputtype="text"name="name"value=""size="30"onblur="chkvalue(this)"><br> 得到焦點： <inputtype="text"id="name"value=""size="30"onfocus="setStyle(this.id)"> </body> </html> 5.onscroll事件 視窗滾動事件：當頁面滾動時呼叫函式。此事件寫在方法的外面，且函式名後面不加括號，例如window.onscroll=move 例： <%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%> <!DOCTYPEHTMLPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>JavaScript的一些常用方法</title> <scripttype="text/javascript"> functionmove() { alert("頁面滾動時呼叫"); } window.onscroll = move; </script> </head> <body> 測試onscroll方法<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR> 測試onscroll方法<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR> 測試onscroll方法<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR> 測試onscroll方法<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR> </body> </html> 6.onsubmit事件 屬於<form>表單元素，寫在<form>表單標籤內。語法：onsubmit=”return 函式名()” 例： <%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%> <!DOCTYPEHTMLPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>JavaScript的一些常用方法</title> <scripttype="text/javascript"> functionmove() { alert("測試onsubmit........"+testForm.name.value); } </script> </head> <body> <formaction=""method="post"name="testForm"onsubmit="returnmove()"> <inputtype="text"name="name"value=""> <br> <inputtype="submit"name="submit"value="測試onsubmit"/> </form> </body> </html> 2.滑鼠相關事件 1.onmousemove和onmouseout和onmouseover事件 Onmouseover:滑鼠移動到某物件範圍的上方時，觸發事件呼叫函式。注意：在同一個區域中，無論怎樣移動都只觸發一次函式。 Onmouseout:滑鼠離開某物件範圍時，觸發事件呼叫函式。 Onmousemove:滑鼠移動到某物件範圍的上方時，觸發事件呼叫函式。注意：在同一個區域中，只要滑鼠動一次就觸發一次事件。 例： <%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%> <!DOCTYPEHTMLPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>JavaScript的一些常用方法</title> <scripttype="text/javascript"> functionbigImg(x) { x.style.height="180px"; x.style.width="180px"; } functionnormalImg(x) { x.style.height="128px"; x.style.width="128px"; } </script> </head> <body> <imgonmousemove="bigImg(this)"onmouseout="normalImg(this)"border="0"src="images/defaultAvatar.gif"alt="Smiley"> </body> </html> 2.onmouseup和onmousedown Onmouseup:當滑鼠鬆開時觸發事件 Onmousedown:當滑鼠按下鍵時觸發事件 例： <%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%> <!DOCTYPEHTMLPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>JavaScript的一些常用方法</title> <scripttype="text/javascript"> functionmouseDown(){ document.getElementById("p1").style.color="red"; } functionmouseUp(){ document.getElementById("p1").style.color="green"; } </script> </head> <body> <pid="p1"onmousedown="mouseDown()"onmouseup="mouseUp()"> 請點選文字！mouseDown()函式當滑鼠按鈕在段落上被按下時觸發。此函式把文字顏色設定為紅色。mouseUp() 函式在滑鼠按鈕被釋放時觸發。mouseUp() 函式把文字的顏色設定為綠色。 </p> </body> </html>
常用的事件主要有:
(1)單擊事件:onclick。使用者單擊滑鼠按鍵時產生的事件，同時。nclick指定的事件處理程式或程式碼將被呼叫執行.
(2)改變事件:onchange。當text或textarea元素內的字元值改變或select表格選項狀態改變時發生該事件。
(3)選中事件:onselect。當text或textarea物件中的文字被選中時會引發該事件。如:
<ipnut type="text" value="預設資訊”onselect=alert(”您選中T文字框中的文字”)>
(4)獲得焦點事件:onfocus。使用者單擊text或textarea以及select物件，即游標落在文字框或選擇框時會產生該事件。如:
<select name= "zhengjian" onfocus=alert(”我成為焦點”)>
(5)失去焦點事件:onblur.失去焦點事件正好與獲得焦點事件相對，當text或textarea以及select物件不再擁有焦點而退出後臺時，引發該事件。
(6)載人檔案事件:onload,’當頁面檔案載人時產生該事件。onload的一個作用就是在首次載人一個頁面檔案時檢測cookie的值，並用一個變數為其賦值，使它可以被原始碼使用，本事件是window的事件，但是在HTML中指定事件處理程式時，一般把它寫在<body>標記中。如:
<body onload=alert(”正在載入頁面，請等待一”)>
(7)解除安裝檔案事件:onunload。與載人檔案事件。nload正好相反，當Web頁面退出時引發的事件，並可更新。ookie的狀態。如:
<body onunload=confirm(”你確定要離開本頁?”)>
(8)滑鼠鎮蓋事件:onmouseover, onmouseover是當滑鼠位於元素上方時所引發的事件。如:
<input type= "boutton" value=”按鈕”onmouseover= "window. status=‘請您注意下面的狀態列·;return true">
(9)滑鼠離開事件:onmouseout, onmouseout是當滑鼠離開元素時引發的事件。如果和滑鼠覆蓋事件同時使用，可以建立動態按鈕的效果。
(10)一般事件。
ondbclick:滑鼠雙擊事件。
onkeypress:當鍵盤上的某個鍵被按下並且釋放時觸發的事件，要求頁面內必須有啟用的物件。
onkeydown:當鍵盤上某個鍵被按下時觸發的事件，要求頁面內必須有啟用的物件。
onkeyup:當鍵盤上某個鍵被放開時觸發的事件，要求頁面內必須有啟用的物件。
(11)頁面相關事件。
onabort:圖片在下載時被使用者中斷時觸發的事件。
onbeforeunload:當前頁面的內容將要被改變時觸發的事件。
DOM事件流
- “DOM2級事件”規定的事件流包括三個階段：事件捕獲階段、處於目標階段和事件冒泡階段。首先發生的是事件捕獲，為截獲事件提供了機會。然後是實際的目標接收到事件。最後一個階段是冒泡階段。（事件處理中“處於目標階段”被看成冒泡階段的一部分）。
- IE9、Safari、Chrome、Firefox和Opera9.5及更高版本都會在捕獲階段觸發事件物件上的事件，就是有兩個機會在目標物件上面操作事件。（儘管DOM2級事件規範明確要求捕獲階段不涉及事件目標）。
事件處理程式
HTML 事件處理程式
簡單來講，HTML 事件處理程式是直接在HTML中繫結事件，如下
<input type="button" value="Click Me" onclick="alert("Clicked")" />注意事項：
- 不能在其中使用未經轉義的HTML語法字元，如
&、“”、<、>，因為這是在HTML中繫結的，會造成瀏覽器解析DOM結構錯誤。 -
擴充套件函式作用域，來看下面的程式碼：
<!-- 輸出 "Click Me、lzh" --> <form method="post"> <input type="text" name="username" value="lzh"> <input type="button" value="Click Me" onclick="alert(value);alert(username.value);"> </form>如果當前元素是一個表單輸入元素，瀏覽器內部大概是這樣實現的：
function () { with (document) { with (this.form) { with (this) { //元素屬性值 } } } }form元素，呼叫username會報錯，所以不論是服務端渲染還是Ajax請求回來資料再渲染，最好還是把form結構寫完整。
擴充套件作用域有三個缺點：
- 函式被呼叫時還沒定義會報錯，只好
try{}catch(ex){}，分離的寫法可以在DOMContentLoaded之後再繫結。 - 擴充套件的作用域鏈在不同瀏覽器中會導致不同的結果。
- HTML 與 JavaScript 程式碼緊密耦合，如果要更換事件處理程式，需要改動 HTML 程式碼和 JavaScript程式碼。
DOM0級事件處理程式
- 每個元素（包括
window和document）都有自己的事件處理程式屬性，這些屬性通常全部小寫。使用 DOM0 級指定的事件處理程式被認為是元素的方法。this引用當前元素。通過this可以訪問元素的任何屬性和方法。DOM0 級事件處理程式在冒泡階段被處理。
var btn = document.getElementById("myBtn"); btn.onclick = function () { alert(this.id); //"myBtn" };DOM2級事件處理程式
addEventListener()包含三個引數，要處理的事件名、事件處理函式、布林值，布林值為true，表示在捕獲階段呼叫事件處理程式，反之在冒泡階段呼叫。- DOM2 級事件處理程式中的
this也指向addEventListener的那個元素。- 可以新增多個事件處理程式，按新增順序依次呼叫。
removeEventListener無法移除匿名函式的事件處理程式。
var btn = document.getElementById("myBtn"); var handler = function () { alert(this.id); }; btn.addEventListener("click", handler, false); //這裡省略了其他程式碼 btn.removeEventListener("click", handler, false); // 有效！
- IE9、Firefox、Safari、Chrome 和Opera 支援DOM2 級事件處理程式。
IE事件處理程式
attachEventdetachEvent接收兩個引數，事件處理程式名稱、事件處理程式函式。由於IE8及更早版本只支援事件冒泡，所以該事件處理程式只支援事件冒泡。- 老版本的Opera支援這種方法，但現在Opera已經改用blink核心，IE11已經不支援這種方法，注意 IE9 就已經支援 DOM2 級事件處理程式了。
- 特別要注意：第一個引數包含on，比如onclick。
- 區別於DOM0 級事件處理程式，
this指向 'window'。- 也可以新增多個事件處理程式。
跨瀏覽器的事件處理程式
var EventUtil = {
addHandler: function(element, type, handler){ if (element.addEventListener){ element.addEventListener(type, handler, false); } else if (element.attachEvent){ element.attachEvent("on" + type, handler); } else { element["on" + type] = handler; } }, removeHandler: function(element, type, handler){ if (element.removeEventListener){ element.removeEventListener(type, handler, false); } else if (element.detachEvent){ element.detachEvent("on" + type, handler); } else { element["on" + type] = null; } } };
- 存在問題：
- IE事件處理程式 中的
this指向window。- 只支援 DOM0 級的瀏覽器不能多次新增事件處理程式，不過這種瀏覽器應該不多了，即使是IE8 也支援attachEvent。
- 會不會有一些事件，在瀏覽器支援 DOM2 級事件處理程式的情況下，那些事件只能用
on + name的形式呢？ 之前一直懷疑 (1).xhr.onreadystatechange()和 (2).DOMNodeInserted事件，這裡我多慮了，經過驗證，(1).是支援 DOM2 級事件的，(2).天生就是 DOM2 級的。這裡只是為了打消我的疑慮，記錄下來。
事件物件
DOM 中的事件物件
- 相容 DOM 的瀏覽器會將一個
event物件傳入事件處理程式， IE9 及更高版本可以。無論指定事件處理程式時使用什麼方法（DOM0 級 DOM2 級），HTML 事件處理程式可以通過訪問event變數得到event物件。- event 中的屬性和方法都是隻讀的
- 常用屬性：
target事件的目標currentTarget繫結事件的元素，與 'this' 的指向相同stopPropagation()取消事件的進一步捕獲或冒泡。如果bubbles為true，則可以使用這個方法stopImmediatePropagation()取消事件的進一步捕獲或冒泡，同時阻止任何事件處理程式被呼叫（DOM3級事件中新增）preventDefault()取消事件的預設行為，比如點選連結跳轉。如果cancelable是true，則可以使用這個方法type被觸發的事件型別eventPhase呼叫事件處理程式的階段：1表示捕獲階段，2表示“處於目標”，3表示冒泡階段
thistargetcurrentTarget舉例：
document.body.onclick = function(event){ alert(event.currentTarget === document.body); //true alert(this === document.body); //true alert(event.target === document.getElementById("myBtn")); //true };
- 通過
event.type與switch case組合，可以通過一個函式處理多個事件。- 只有在事件處理程式執行期間，
event物件才會存在；一旦事件處理程式執行完成，event物件就會被銷燬。
IE 中的事件物件
- DOM0 級的事件處理程式，
event作為window的一個屬性存在。（從 IE9 開始，event 可以從引數中獲得）attachEvent新增的事件處理程式，event作為引數傳入，也可以通過window來訪問event物件。- HTML 事件處理程式依然可以通過訪問
event變數得到event物件。- 屬性和方法：
cancelBubble設定trueorfalse可以取消事件冒泡returnValue設定trueorfalse可以取消事件的預設行為。srcElement事件的目標（與DOM中的target相同）
- 注意事項：
attachEvent中的event.srcElement === this嗎？ 答案是否定的，因為前面說到過attachEvent中this指向window, DOM0 級、DOM2 級 事件處理程式this才指向event.target / window.event.srcElement
跨瀏覽器的事件物件
var EventUtil = {
getEvent: function(event){ return event ? event : window.event; // window.event DOM0級時IE }, getTarget: function(event){ return event.target || event.srcElement; // event.srcElement for IE }, preventDefault: function(event){ if (event.preventDefault){ event.preventDefault(); } else { event.returnValue = false; // IE } }, stopPropagation: function(event){ if (event.stopPropagation){ event.stopPropagation(); } else { event.cancelBubble = true; // IE } } };事件型別
- DOM3 級事件規定了幾類事件；HTML5 也定義了一組事件；還有一些事件沒有規範，瀏覽器的實現不一致。
- DOM3 級事件模組在 DOM2 級事件模組基礎上重新定義了這些事件，也添加了一些新事件。包括 IE9 在內的所有主流瀏覽器都支援 DOM2 級事件。IE9 也支援 DOM3 級事件。
這裡只總結一些常見的事件型別
UI事件型別
- load 事件，當頁面完全載入後（包括所有影象、JavaScript 檔案、CSS 檔案等外部資源），就會觸發
window上面的 load 事件。
EventUtil.addHandler(window, "load", function(){ var image = document.createElement("img"); EventUtil.addHandler(image, "load", function(event){ event = EventUtil.getEvent(event); alert(EventUtil.getTarget(event).src); }); document.body.appendChild(image); image.src = "smile.gif"; //在此之前要先指定事件處理程式 });
- script 元素也會觸發 load 事件，據此可以判斷動態載入的 JavaScript 檔案是否載入完畢。與影象不同，只有在設定了 script 元素的 src 屬性並將該元素新增到文件後，才會開始下載 JavaScript 檔案
- IE8 及更早版本不支援 script 元素上的 load 事件。
- 在不屬於 DOM 文件的影象（包括未新增到文件的 img 元素和 Image 物件）上觸發 load 事件時，IE8 及之前版本不會生成 event 物件。IE9 修復了這個問題。
- resize 事件
- 瀏覽器視窗大小發生變化時會觸發該事件，這個事件在
window上觸發，IE、Safari、Chrome 和 Opera 會在瀏覽器視窗變化了 1 畫素時就觸發 resize 事件，然後隨著變化不斷重複觸發。Firefox 則只會在使用者停止調整視窗大小時才會觸發。- 注意不要在這個事件的處理程式中加入大計算量的程式碼，或者採用函式節流的方式優化效能。
- 瀏覽器視窗最小化或最大化時也會觸發 resize 事件。
- scroll 事件
- 該事件在 window 上發生，此處和書上講的有點不一樣，webkit 核心或 blink 核心的瀏覽器（Chrome、Opera、Safari）可以通過 document.body.scrollTop 獲取頁面被捲去的高度，而 Trident、Gecko （IE、火狐）可以通過 document.documentElement.scrollTop來獲取該值。
- 另外標準模式、混雜模式這兩種方法還有出入，此處不討論。
- 所以最好通過
document.body.scrollTop + document.documentElement.scrollTop的方式獲取 scrollTop 的值，因為兩者之一會等於0，或者使用document.body.scrollTop || document.documentElement.scrollTop，兩者效果一致。
焦點事件
- 這裡忽略 DOMFocusIn、DOMFocusOut，因為只有 Opera 支援這個事件，且 DOM3 級事件廢棄了它們。
- blur：在元素失去焦點時觸發。這個事件不會冒泡；所有瀏覽器都支援它。
- focus：在元素獲得焦點時觸發。這個事件不會冒泡；所有瀏覽器都支援它。
- focusin：與 focus 等價，但它冒泡。
- focusout：與 blur 等價，也冒泡。
- 支援 focusin、focusout 的瀏覽器有：IE5.5+、Safari 5.1+、Opera 11.5+和Chrome。但只支援 DOM2 級事件處理程式
- Firefox 不支援 focusin、focusout
- blur、focusout 的事件目標是失去焦點的元素；focus、focusin 的事件目標是獲得焦點的元素
滑鼠與滾輪事件
click在使用者單擊住滑鼠按鈕或按下回車鍵時觸發。 觸發順序 mousedown mouseup click，如果 mousedown、mouseup 其中之一被取消，就不會觸發 click 事件。dblclick觸發順序 mousedown mouseup click mousedown mouseup click dblclick， 如果中間有事件被取消，dblclick 也不會被觸發mousedown使用者按下了任意滑鼠按鈕時觸發。mouseup使用者釋放按鈕時觸發mouseenter在滑鼠游標從元素外部首次移動到元素範圍之內時觸發。不冒泡，而且在游標移動到後代元素上不會觸發。DOM2 級事件並沒有定義這個事，但 DOM3 級事件將它納入了規範。IE、Firefox9+和Opera支援這個事件。mouseleave在位於元素上方的滑鼠游標移動到元素範圍之外時觸發。不冒泡，而且在游標移動到後代元素上不會觸發。DOM2 級事件並沒有定義這個事，但 DOM3 級事件將它納入了規範。IE、Firefox9+ 和 Opera 支援這個事件。mouseover在滑鼠指標位於一個元素外部，然後使用者將其首次移入另一個元素邊界之內時觸發。不能通過鍵盤觸發這個事件。mouseout在滑鼠指標位於一個元素上方，然後使用者將其移入另一個元素時觸發。又移入的另一個元素可能位於前一個元素的外部，也可能是這個元素的子元素。不能通過鍵盤觸發這個事件。
- 用程式碼說明一下 mouseenter、mouseleave 和 mouseover、mouseout 的區別：
<!DOCTYPE html> <html lang="zh-cn"> <head> <title>test1</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="test1.css"> </head> <body> <div class="mouseover"> <div class="sub-mouseover"> </div> </div> <div class="mouseenter"> <div class="sub-mouseenter"> </div> </div> <script src="test1.js"></script> </body> </html>.wrap {
width: 200px; height: 100px; } .mouseover { background: pink; } .mouseenter { margin-top: 30px; background: gray; } .sub-mouseover, .sub-mouseenter { width: 100px; height: 50px; background: #AE81FF; }var div1 = document.querySelector(".mouseover"), div2 = document.querySelector(".mouseenter"); div1.addEventListener("mouseover", function(){ console.log("div1 mouseover"); }); div1.addEventListener("mouseout", function(){ console.log("div1 mouseout"); }) div2.addEventListener("mouseenter", function(){ console.log("div2 mouseenter"); }) div2.addEventListener("mouseleave", function(){ console.log("div2 mouseleave"); })-
效果圖
-
滑鼠由左側從上到下依次經過所有 div 的情況，輸出
div1 mouseoverdiv1 mouseoutdiv1 mouseoverdiv1 mouseoutdiv2 mouseenterdiv2 mouseleave
mousemove當滑鼠指標在元素內部移動時重複地觸發。不能通過鍵盤觸發這個事件。- 除了 mouseenter、mousedleave，所有滑鼠事件都會冒泡，取消滑鼠事件將會影響瀏覽器的預設行為，也會影響其它事件，因為滑鼠事件與其它事件是密不可分的。
- 關於
dblclickIE8 及之前版本中的實現有一個小bug，因此在雙擊事件中，會跳過第二個mousedown 和click事件，其順序如下：mousedownmouseupclickmouseupdblclick，但還是會觸發dblclick事件- 客戶區座標位置：滑鼠事件中的
event都有clientXclientY屬性，表示在視口中客戶區的座標位置，這些值不包括頁面滾動的距離，因此這個位置並不表示滑鼠在頁面上的位置：
- 頁面座標位置：pageX、pageY，這兩個屬性表示滑鼠游標在頁面中的位置，在頁面沒有滾動的情況下，pageX 和 pageY 的值與 clientX、clientY 的值相等。IE8 及更早版本不支援事件物件上的頁面座標，不過使用客戶區座標和滾動資訊可以計算出來。這時候需要用到document.body（混雜模式）或document.documentElement（標準模式）中的scrollLeft 和scrollTop 屬性。計算過程如下所示：
var div = document.getElementById("myDiv"); EventUtil.addHandler(div, "click", function(event){ event = EventUtil.getEvent(event); var pageX = event.pageX, pageY = event.pageY; if (pageX === undefined){ pageX = event.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft); } if (pageY === undefined){ pageY = event.clientY + (document.body.scrollTop || document.documentElement.scrollTop); } alert("Page coordinates: " + pageX + "," + pageY); });<