事件物件,arguments、事件的相容問題
一、事件物件
1、每個元素身上是天生存在的,不需要我們去定義,只需要我們給這個事件繫結一個方法,當事件觸發的時候,就會執行這個方法
2、事件繫結的方法:
(1)、DOM0級繫結:div . onclick=function() { }
(2)、DOM2級繫結:div . addEventLister() || div . attachEvent()
二者的區別:
(1)、onclick是這個元素私有的屬性,而addEventLister()是公有的屬性,從EventTarget(事件源)物件上繼承來的
IE低版本的attchaEvent是公有的
(2)、div . onclick存在事件冒泡機制,沒有捕獲機制
div . addEventListener()可有冒泡,可有捕獲
div . attachEvent()只有冒泡機制
attachEvent()和addEventListener()的區別
(1)、attachEvent只用在Ie8以下,addEventListener()適合標準瀏覽器
(2)、attachEvent的事件名帶on,而addEventListener事件名不帶on
(3)、attachEvent函式裡面的this是window,而addEventListener函式裡面的this是指當前元素物件
(4)、attachEvent只有冒泡沒有捕獲,addEventListener可有冒泡也可有捕獲
二、Arguments
每個函式都有一個arguments物件,它是這個函式所有引數構造的集合,它是一個數組
上面的控制檯是arguments陣列中有一個元素叫mouseevent;
所以,每個事件的方法中,瀏覽器都會給它一個引數叫mouseevent。我們所有的滑鼠的訊息都臨時存在這個mouseevent
三、事件的相容問題
mouseevent有相容性:
Event物件的相容性:
clientX和clientY是瀏覽器滑鼠到瀏覽器視窗左上角的距離位標
pageX和pageY是滑鼠到網頁左上角的距離,但是Ie低版本沒有這個屬性
在Ie怎麼算pageY的值:用clientY+scrollTop
事件源相容性:
事件源:點選那個元素,那個元素就是事件源
標準瀏覽器的事件源是ev . target
Ie6-8 沒有這個屬性,但是Ie有ev . scrElement
阻止事件冒泡的相容性:
event . stoppropagation?event . stoppagation : event.cancelBubble=true;
阻止事件預設行為的相容性:
event . prevenDefault?event . prevenDefault : event.returnvalue=false;