事件及事件物件

2022-06-18 14:54:12 字數 1910 閱讀 4463

一、事件物件event

事件觸發會生成事件物件event,event物件是跟事件相關的資料集合,比如點選事件中觸發事件的元素、滑鼠的位值等。input輸入事件中使用者按下了哪個鍵等。

事件物件中常用的屬性

1、event.type

事件型別

2、event.target

觸發事件的目標元素,ie< 8不可用

3、event.srcelement

觸發事件的目標元素,ie < 8 專用

4、event.currenttarget

繫結事件的目標元素,ie < 8不可用,相當於繫結的事件處理函式中的this

5、event.pagex/y

觸發事件時,滑鼠距離頁面的上左邊距,ie < 9不可用

6、event.clientx/y

觸發事件時,滑鼠距離頁面可視區域的上左邊距

7、event.screenx/y

觸發事件時滑鼠距離螢幕的上左邊距

8、event.offsetx/y

觸發事件時滑鼠距離觸發事件的元素的內填充邊(padding edge)在x/y軸的偏移量。

9、event.key/keucode

鍵盤事件中鍵盤的按鍵和按鍵的ascii值

10、獲取滑鼠相對於繫結事件的元素的位置

e.pagex/y - 繫結事件的元素距離頁面的左/上邊距(offsetleft/offsettop)

二、阻止冒泡、預設事件 (存在相容性問題)

1、阻止冒泡

event.stoppropagation();

event.cancelbubble = true;ie < 10已廢棄,慎用event

相容寫法:

event.stoppropagation ? event.stoppropagation() : event.cancelbubble = true;

2、阻止預設

event.preventdefault();

event.returnvalue = false ie< 9,即將被廢棄,慎用

相容寫法: 

event.preventdefault ? event.preventdefault() : event.returnvalue = false 

event.defaultprevented返回乙個布林值,表明當前事件是否呼叫了event.preventdefault()方法,如果預設動作被阻止,那麼event.defaultprevented屬性為true,否則為false,ie9以上可用此屬性。

三、鍵盤事件

keyup  鍵盤抬起事件

keydown 鍵盤按下的事件,按著不鬆會一直觸發

keypress和keydown一樣,不同的是獲取的按鍵的ascii值是區分大小寫的,另外無法識別功能鍵。

四、複製黏貼事件

oncut 剪下事件

oncopy 複製事件

onpaste 黏貼事件

五、事件委託

通過監聽乙個父元素,來給不同的子元素繫結事件,減少監聽次數,從而提公升速度。由於事件的冒泡機制, 可以使用事件委託的方式給元素新增事件,多用於ul的監聽事件更改li的情景。

closest

ele.closest()方法用來獲取,匹配特定選擇器且離當前元素最近的祖先元素(也可以是當前元素本身)。如果匹配不到,則返回null。換句話說,方法closet在 元素中檢查每個父類,如果與選擇器匹配,則停止搜尋,並返回祖先,ie不支援此方法。

語法:var ele = element.closet(selectors);

六、「行為型」模式 

我們還可以使用事件委託宣告式的通過特定屬性和類為元素新增「行為」。

模式分為兩步:

1、我們向元素新增乙個特殊屬性

2、用文件範圍級的處理器追蹤事件,如果事件發生在具有特定屬性的元素上——則執行該操作。

事件(3) 事件物件

在觸發dom上的某個事件的時候,會產生乙個事件物件event,這個物件包含著所有與事件有關的資訊,包括導致事件的元素 事件型別等,所有的瀏覽器都支援event物件,但支援方式不同。只有在事件處理程式執行期間,event物件才會存在,一旦執行完成就會別銷毀 1 dom中的事件物件 var btn do...

jQuery事件處理 事件物件及常用外掛程式

昨日重點 一 jquery 事件處理 on 用於事件繫結,目前最好用的事件繫結方法 off 事件解綁 trigger triggerhandler 事件觸發 1 事件處理 on 繫結事件 element.事件名 事件處理函式 1 通過on可以一次性繫結多個事件處理程式 element.on 事件名,...

js 事件 事件物件

關於事件寫了一系列文章 1.事件流 事件捕獲和事件冒泡 2.事件處理程式 3.事件物件 本文介紹事件物件 4.通用的事件偵聽器函式 5.事件迴圈 event loop 6.事件 event delegation 1.事件物件 觸發dom上的某個物件時,會產生乙個事件物件event dom0級事件物件...