事件對象是用來記錄一些事件發(fā)生時(shí)的相關(guān)信息的對象。事件對象只有事件發(fā)生時(shí)才會(huì)產(chǎn)生，并且只能是事件處理函數(shù)內(nèi)部訪問，在所有事件處理函數(shù)運(yùn)行結(jié)束后，事件對象就被銷毀！

• W3C DOM把事件對象作為事件處理函數(shù)的第一個(gè)參數(shù)傳入進(jìn)去
• IE將事件對象作為window對象的一個(gè)屬性（相當(dāng)于全局變量）

originalEvent對象

在一次偶然的使用中，我發(fā)現(xiàn)當(dāng)使用on()函數(shù)并且傳入第二個(gè)選擇器參數(shù)時(shí),e.touches[0]的訪問為undefined，打印e發(fā)現(xiàn)，它的事件對象不是原生的事件對象。經(jīng)查閱發(fā)現(xiàn)它是jquery事件對象。

$(window).on("touchstart","body",function(e){
  console.log(e)
})

上面例子中event中有一個(gè)originalEvent屬性，而這才是真正的touch事件。jQuery.Event 是一個(gè)構(gòu)造函數(shù)，其創(chuàng)建一個(gè)可讀寫的jQuery事件對象，并在event 對象保留了對這個(gè)原生事件對象 event 的引用($event.originalEvent)。我們綁定的事件處理程序所處理的事件對象都是 $event。該方法也可以傳遞一個(gè)自定義事件的類型名，用于生成用戶自定義事件對象。

touch事件

touchmove: 當(dāng)手指在屏幕上滑動(dòng)的時(shí)候連續(xù)地觸發(fā)。
touchstart: 當(dāng)手指觸摸屏幕時(shí)候觸發(fā)，即使已經(jīng)有一個(gè)手指放在屏幕上也會(huì)觸發(fā)
touchend: 當(dāng)手指從屏幕上離開的時(shí)候觸發(fā)。

TouchEvent對象

每一個(gè)touch事件的觸發(fā)都會(huì)產(chǎn)生一個(gè)TouchEvent對象，以下是TouchEvent對象三個(gè)比較常用的重要屬性

touches 當(dāng)前位于屏幕上的所有手指的一個(gè)列表。
targetTouches 特定于事件目標(biāo)的Touch對象的數(shù)組。[當(dāng)前手指]
changeTouches 表示自上次觸摸以來發(fā)生了什么改變的Touch對象的數(shù)組。

在這里，我用js寫了一個(gè)touch事件，點(diǎn)擊屏幕可觸發(fā),將其事件事件對象在控制臺(tái)打印出，結(jié)果如下（箭頭指向的是上述三個(gè)屬性）：

window.addEventListener("touchstart",function(event){
  console.log(event);
})

觸摸事件對象屬性

touches、targetTou、changeTouches都包含以下屬性值

clientX：觸摸目標(biāo)在視口中的x坐標(biāo)。
clientY：觸摸目標(biāo)在視口中的y坐標(biāo)。
identifier：標(biāo)識(shí)觸摸的唯一ID。
pageX：觸摸目標(biāo)在頁面中的x坐標(biāo)。
pageY：觸摸目標(biāo)在頁面中的y坐標(biāo)。
screenX：觸摸目標(biāo)在屏幕中的x坐標(biāo)。
screenY：觸摸目標(biāo)在屏幕中的y坐標(biāo)。
target：觸摸的DOM節(jié)點(diǎn)目標(biāo)。
還是上面的那個(gè)例子，changeTouches對象在控制臺(tái)輸出如下：

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助。

最新評論