每個事件函式天生有一個引數叫event，它是事件物件，如果想修改event的名稱，事件函式的第一個引數就是用來修改的
<div id="div"></div>
var oDiv = document.getElementById("div");
oDiv.onclick = function() {
console.dir(arguments);
};
document.body.onclick = function(e) {
console.dir(e); //MouseEvent
當我們觸發#div的點擊行為的時候，會執行對應系結的方法
不僅僅把系結的方法執行了，而且瀏覽器還默認的給這個方法傳遞了一個引數值，叫做MouseEvent，叫做滑鼠事件物件，是一個物件屬性型別的值
-
它是一個物件資料型別的值，里面包含了很多的屬性名和屬性值，這些都是用來記錄當前滑鼠的相關資訊的，
滑鼠移動的坐標：
page:針對于整個頁面的左頂點 常用
console.log("page",e.pageX,e.pageY);client:針對于可視視窗的左頂點 不常用
console.log("client",e.clientX,e.clientY);offset:針對于父元素的左頂點 常用于拖拽
console.log("offset",e.offsetX,e.offsetY);案例：跟隨滑鼠移動
<script> //事件元素:大白板 //事件型別:onmousemove //事件物件:獲取滑鼠的坐標,將坐標賦值給box的left和top // (一個元素要在頁面發生位移，本質就是在修改left和top) var oTiger = document.querySelector("#tiger"); //給整個頁面系結：滑鼠移動事件 document.onmousemove = function(evt){ //兼容的方式獲取event物件 var e = evt || event; // 滑鼠在頁面的位置 = 滾動條滾動的距離 + 可視區域的坐標， //注意，如果想通過 style.left 來設定屬性，一定要給 box1開啟絕對定位， oTiger.style.left = e.pageX - oTiger.offsetWidth/2 + "px"; oTiger.style.top = e.pageY - oTiger.offsetHeight/2 + "px"; } -
MouseEvent，往上找是UIEvent，然后是Event，最后是Object，這是它的原型鏈 -
MouseEvent記錄的是頁面中唯一一個滑鼠每一次觸發時候的相關資訊，和到底是在哪個元素上觸發的沒有關系事件物件本身的獲取存在兼容問題
標準瀏覽器中是瀏覽器給方法傳遞的引數，
我們只需要定義形參e就可以獲取到，
而IE6~8中瀏覽器不會給方法傳遞引數e，我們如果需要的話，
在IE6，7，8下只能用
window.event中獲取查找
var e = evt || event;
- event 使用前提，必須有事件 不同的物件產生的事件不同
- event 代表事件的狀態，例如觸發event物件的元素、滑鼠的位置及狀態、按下的鍵等等，
- event 物件只在事件發生的程序中才有效，
- event 的某些屬性只對特定的事件有意義，比如，
fromElement和toElement屬性只對onmouseover和onmouseout事件有意義，
傳進來這個e，在iE9以上才有
在IE6，7，8時，e是不會傳進去的
window.event谷歌下也有，IE6，7，8下也有，但是火狐下沒有window.event
所以IE6，7，8下只能用window.event
而IE9，谷歌，火狐等標準瀏覽器，e都是可以用的
oDiv.onclick = function (e) {
console.dir(e);
//->IE6，7，8下是存在window.event里面的
console.dir(window.event);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/538473.html
標籤：JavaScript
上一篇：淺拷貝與深拷貝
下一篇：ES6