一、事件物件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級事件物件...