1. 程式人生 > >JS高階 事件物件

JS高階 事件物件

事件物件

1.常用的事件:onclick onmouseover onmouseout

2.每個元素 身上的事件是天生自帶的,不需要我們去定義,只需要我們給這個事件繫結一個方法,當事件觸發的時候就會執行這個方法。

3.時間繫結的方法:

1.div.onclick=function(){}DOM0級事件繫結

2.div.addEventListener()或div.addatchEvent()DOM2級事件繫結。

二者的區別:

onclick是這個元素私有的屬性,天生自帶的,二addEventListener()是公有的屬性,從 EventTarget(事件源)物件上 繼承來的。

IE低版本的attachEvent是共有的

DIV.click存在事件冒泡沒有捕獲機制 

div.addEventListener()可有冒泡 可有捕獲

div.attachEvent()只有冒泡機制 

4.div.addEventListener()和div.attachEvent()的區別

1.前者有冒泡和捕獲機制,後者只有冒泡機制

2.事件名前者不帶on後者帶on

3.前者this指向當前元素,後者指向window

4.前者是標準瀏覽器的寫法,後者是IE8以下

Arguments

沒一個函式都有一個Arguments物件,他是這個函式所有引數構造的集合

Arguments陣列中有一個元素叫mouseevent

所以,每個時間的方法中瀏覽器都給他一個引數叫mouseevent.我們所有滑鼠的資訊都臨時儲存在mouseeveent物件上

mouseevent有相容性:

標準瀏覽器可以直接讀取,但是IE不行 

解決辦法:

div.onclick=function(ev){

var ev=ev||window.event

}

event物件的相容性:

clientX和clientY是滑鼠 到瀏覽器視窗左上角的距離座標

pageX和pageY是滑鼠到網頁左上角的距離座標,但是IE低版本沒有這個屬性

在IE喜愛怎樣算pageY的值 用clientY+scrollTop

事件源 點選那個元素,那個元素就是事件源

標準瀏覽器的事件源是ev.target

IE6-8沒有這個助興 但是IE有ev.srcElement標準瀏覽器時間原始

阻止事件冒泡相容性 :

1.event.cancelBubble=true

2.event.stopPropagation?event.stopPropagation():event.cancelBubble=true;

阻止事件預設行為相容性:

比如a的href

href為空會自動重新整理頁面

Href為#錨點跳轉

href為javascript:;阻止預設行為的發生

Event.preventDefault?Event.preventDefault():event.returnValue=false