js筆記19 事件物件
1.常用的事件
onmouseover onmouseout onmousedown onmousemove onmouseup onclick onchange onfocus onblur等等
2.每個元素身上的事件都是天生自帶的,不需要我們去定義,只需要我們給這個事件繫結一個方法,當事件觸發的時候就會執行這個方法
3.事件繫結的方法
(1)div.onclick=function(){} DOM0級事件繫結
(2)div.addEventListener()或div.attachListener() DOM2級事件繫結
二者的區別
onclick是這個元素私有的屬性,天生自帶的,而addEventListener()是共有的屬性,從EventTarget(事件源)物件上繼承來的
ie低版本的attachEvent是公有的
div.onclick 存在事件冒泡機制沒有捕獲的機制
div.addEventListener() 可有冒泡可有捕獲
div.attachEvent() 只有冒泡機制
4.div.addEventListener和div.attchEvent的區別
(1)前者有冒泡機制和捕獲機制,後者只有冒泡機制
(2)事件名前者不帶on後者帶on
(3)前者的this指向當前元素,後者指向window
(4)前者是標準瀏覽器的寫法,後者是ie8以下
5.arguments
每個函式都有一個arguments物件,他是這個函式所有引數構造的集合
上面的控制檯是arguments陣列中有一個元素叫mouseevent
所有,每個事件的方法中瀏覽器都給他一個引數叫mouseevent。我們所有滑鼠的資訊都臨時儲存在這個mouseevent物件上
mouseevent 有相容性
標準瀏覽器可以直接獲取,但是ie不行
解決辦法
event物件的相容性
clientX和clientY是滑鼠到瀏覽器視窗左上角的距離座標
pageX和pageY是滑鼠到網頁左上角的距離座標,但是ie低版本沒有這個屬性
在ie下怎麼算pageY的值?
用clientY+scrollTop
6.事件源
點選那個元素,那個元素就是事件源
標準瀏覽器的事件源是ev.target
ie6-8沒有這個屬性,但是ie有ev.srcElement
7.阻止事件冒泡相容性
(1)event.cancelBubble=true
(2)event.stopPropagation?event.stopPropagetion():event.cancelBubble=true
8.阻止事件預設行為相容性
比如a的href
href為空 會自動重新整理頁面
href為# 錨點跳轉
href為javascript:; 阻止預設行為發生
event.preventdefault?event.preventDefault():event.returnValue=false
9.事件委託
如果子元素身上繫結大量相同的事件,我們儘量採用事件委託,所有子元素吧自己的事件委託給父級了
原理:採用事件冒泡機制完成
為什麼使用事件委託?
傳統的for迴圈繫結事件,會增加大量的dom操作(事件),影響頁面的效能,採用事件委託就是把所有的事件給予一個元素上
事件委託和傳統的事件繫結的優勢
傳統的事件繫結對新增的元素不起作用,事件委託起作用
傳統的事件繫結,有多少元素js就需要繫結多少事件,事件委託只需要一個事件
案例
傳統寫法
事件委託
10.並不是所有的事件都存在事件冒泡
onmouseenter onmouseleave就沒有事件冒泡機制
所以我們做跟隨滑鼠的時候儘量用著兩個事件,不要onmouseover onmouseout