事件物件(示例 封裝函式EventUtil )

2022-08-13 02:09:14 字數 2002 閱讀 1407

事件物件

什麼是事件物件?

在觸發dom上的事件時都會產生乙個物件。

事件物件event

1.dom中的事件物件

(1)\type屬性用於獲取事件型別

(2)\target屬性用於獲取事件目標

(3)\stoppropagation()方法用於阻止事件冒泡

(4)\preventdefault()方法用於阻止事件的預設行為

2.ie中的事件物件

(1)\type屬性用於獲取事件型別

(2)\srcelement屬性 用於獲取事件目標

(3)\cancelbubble屬性 true阻止事件冒泡

(4)\returnvalue屬性 false阻止事件的預設行為

封裝函式eventutil():

var eventutil =,

gettype:

function

(event) ,

gettarget:

function

(event) ,

//阻止冒泡

stoppropagation:function

(event)

else

},//阻止事件預設行為;

preventdefault:function

(event)

else

},//新增具柄;

addhandler: function

(element, type, handler)

else

if(element.attachevent)

else

},//刪除具柄;

removehandler: function

(element, type, handler)

else

if(element.detachevent)

else

}};

示例:html:

doctype html

>

<

html

lang

="en"

>

<

head

>

<

meta

charset

="utf-8"

>

<

title

>title

title

>

<

script

src="eventutil.js"

>

script

>

<

script

src="test1.js"

>

script

>

head

>

<

body

>

<

div

id="div"

>

<

input

type

="button"

value

="click1"

id="btn1"

>

<

a href

=""id="a"

a>

div>

body

>

html

>

js:

window.onload = function

() eventutil.addhandler(div,"click",function

() );

eventutil.addhandler(btn1,"click",show);

eventutil.addhandler(a,"click",function

(e) );

eventutil.removehandler(btn1,"click",show);

};

事件物件event

1.e.client 相對於當前頁面 視窗,不是這個元素 可視區域的左頂點 document.onmousemove function e 2.e.screen 相對於計算機螢幕的左頂點 document.body.onclick function e 3.offset 事件觸發時滑鼠距離該元素左邊...

事件物件(event)

再觸發dom上的某個事件時,會產生乙個事件物件event,這個物件中包含著所有與事件有關的資訊。所有瀏覽器都支援event物件,但支援的方式不同。1.事件物件的獲取 event的獲取 event內容重要內容 2.screenx pagex和clientx的區別 3.pagey和pagex的相容寫法 ...

事件Event物件

當事件發生時,會向呼叫函式傳遞乙個event物件,event 物件記錄當前事件發生時的環境資訊。乙個事件只能對應乙個event物件,並且event 物件是短暫存在的。dom中的 event 物件的使用方法 1 在html 標記中,通過事件來呼叫函式,向函式傳遞乙個 event 引數,該引數就是乙個 ...