js中（event）事件物件

• 什麼是事件物件？

• 就是當你觸發了乙個事件以後，對該事件的一些描述資訊

• 例如：

° 你觸發乙個點選事件的時候，你點在哪個位置了，座標是多少

° 你觸發乙個鍵盤事件的時候，你按的是哪個按鈕

• 每乙個事件都會有乙個對應的物件來描述這些資訊，我們就把這個物件叫做 事件物件

• 瀏覽器給了我們乙個 黑盒子，叫做 window.event ，就是對事件資訊的所有描述

• 這個玩意很好用，但是一般來說，好用的東西就會有 相容性問題  ，在 ie低版本裡面這個東西好用，但是在 高版本ie 和 chrome 裡面不好使了

• 我們就得用另一種方式來獲取 事件物件，在每乙個事件處理函式的行參位置，預設第乙個就是 事件物件

var box = document.queryselector('.box')

console.log(box)
box.onclick = function
fn1(e)

box.onclick = function

(e) 

• 是相對於瀏覽器視窗來計算的，從瀏覽器可視區域左上角開始,即是以瀏覽器滑動條此刻的滑動到的位置為參考點,隨滑動條移動 而變化

var box = document.queryselector('.box')

box.onclick = function
(e) 

•是相對於整個頁面的座標點，不管有沒有滾動，都是相對於頁面拿到的座標點 從頁面左上角開始,即是以頁面為參考點,不隨滑動條移動而變化

var box = document.queryselector('.box')

box.onclick = function
(e) 

• 大致分為幾類，瀏覽器事件 / 滑鼠事件 / 鍵盤事件 / 表單事件 / 觸控事件

• addeventlistener : 非 ie 7 8 下使用

• 語法： 元素.addeventlistener('事件型別'， 事件處理函式， 冒泡還是捕獲)

var box = document.queryselector('.box')

box.addeventlistener('click', function
() ,
false
) box.addeventlistener('click', function
() ,
false)

° 先列印 我是第乙個事件 再列印 我是第二個事件

° 注意： 事件型別的時候不要寫 on，點選事件就是 click，不是 onclick

• attachevent ：ie 7 8 下使用

• 語法： 元素.attachevent('事件型別'， 事件處理函式)

box.attachevent('onclick', function

() )
box.attachevent('onclick', function
() )

° 先列印 我是第二個事件 再列印 我是第乙個事件

° 注意： 這個需要些on方法

• 事件傳播也稱為事件流，指的是事件的流向，事件的執行順序。比如在乙個大盒子裡有乙個小盒子，都給他們繫結點選事件。點選小盒子大盒子的事件也會被觸發

• 這個就叫事件的傳播

° 當元素觸發乙個事件的時候，其父元素也會觸發相同的事件，父元素的父元素也會觸發相同的事件

° 也就是說，頁面上任何乙個元素觸發事件，都會一層一層最終導致 window 的相同事件觸發，前提是各 層級元素得有註冊相同的事件，不然不會觸發

• 在事件傳播的過程中，有一些注意的點：

1. 只會傳播同類事件

2.只會從點選元素開始按照 html 的結構逐層向上元素的事件會被觸發

3.內部元素不管有沒有該事件，只要上層元素有該事件，那麼上層元素的事件就會被觸發

• 冒泡

° 就是從事件 目標 的事件處理函式開始，依次向外，直到 window 的事件處理函式觸發

° 也就是從下向上的執行事件處理函式

• 捕獲

° 就是從 window 的事件處理函式開始，依次向內，只要事件 目標 的事件處理函式執行

° 也就是從上向下的執行事件處理函式

• 如果想只觸發當前點選物件的事件，不想讓外層的事件觸發 ，可以使用不冒泡e.cancelbubble=true或不傳播 e.stoppropagation()

var box = document.queryselector('.box')

var atr = document.queryselector('.atr')
box.onclick = function
(e) 
atr.onclick = function
(e) 

• 因為我們的冒泡機制，點選子元素的時候，也會同步觸發父元素的相同事件 ，所以我們就可以把子元素的事件委託給父元素來做

• 點選子元素的時候，不管子元素有沒有點選事件，只要父元素有點選事件，那麼就可以觸發父元素的點選事件

var box = document.queryselector('.box')

var atr = document.queryselector('.atr')
atr.onclick = function
(e) 

• target 這個屬性是事件物件裡面的屬性，表示你點選的目標

• 當你觸發點選事件的時候，你點選在哪個元素上，target 就是哪個元素

• 這個 target 也不相容，在 ie 下要使用 srcelement

var box = document.queryselector('.box')

var atr = document.queryselector('.atr')
atr.onclick = function
(e) 

• 並且在事件內不，我們也可以拿到你點選的到底是哪個物件

• 這個時候，我們就可以把 li 的事件委託給 box 父級來做

var box = document.queryselector('.box')

var atr = document.queryselector('.atr')
atr.onclick = function
(e) 
}

1.提高效能和效率

2. 減少事件註冊，節省記憶體占用

3. 未來元素無需再次註冊事件

4.後面新增的元素也會有事件

預設行為

• 預設行為，就是不用我們註冊，它自己就存在的事情

° 比如我們點選滑鼠右鍵的時候，會自動彈出乙個選單

° 比如我們點選 a 標籤的時候，我們不需要註冊點選事件，他自己就會跳轉頁面

• 這些不需要我們註冊就能實現的事情，我們叫做預設事件

• 有的時候，我們不希望瀏覽器執行預設事件

º 那麼我們就要把 a 標籤原先的預設事件阻止，不讓他執行預設事件

• 我們有兩個方法來阻止預設事件

º e.preventdefault() : 非 ie 使用

° e.returnvalue = false ：ie 使用

• 我們阻止預設事件的時候也要寫乙個相容的寫法

var oa = document.queryselector('a')

a.addeventlistener('click', function
(e) )

JS事件物件event

事件物件 事件引數物件，event物件 1,什麼是事件物件 任何乙個事件觸發後都會包含乙個event物件 event物件中包含與當前事件相關的一些屬性和方法。2,獲取event物件 1，在html中繫結事件 標記 on事件名 btn event eg function btn event 注意 1，...

js 事件物件event

在觸發dom上的某個事件時，會產生乙個事件物件event。這個物件中包含著所有與事件有關的資訊。包括導致事件的元素，事件的型別以及其他與特定事件相關的資訊。我是div div class son son div div script varbox document.queryselector box...

js事件物件event

js的事件物件 即我們函式中經常會用到的 event event 物件代表事件的狀態，比如事件在其中發生的元素 鍵盤按鍵的狀態 滑鼠的位置 滑鼠按鈕的狀態。事件通常與函式結合使用，函式不會在事件發生前被執行！通常我們用得比較多的 就是在標籤上 寫onclick fn 屬性 描述 altkey 返回當...