事件發生以後,會產生一個事件物件(Event),代表事件的狀態。以下這篇文章就來帶大家深入了解JS中的事件物件Event,對它做一個詳細的解讀,希望對大家有幫助!
# 每一個事件觸發時,都會產生一個與之對應的事件物件event
,其中包含了觸發事件的元素、鍵盤滑鼠的狀態、位置等等內容。
每當使用者觸發一個事件後,JS 就會自動產生一個event
對象,根據觸發事件的不同,這個物件包含的內容也不同,例如透過滑鼠觸發點擊事件,會產生一個MouseEvent
對象,其中包含了滑鼠的位置等內容;透過鍵盤觸發事件,會產生一個KeyboardEvent
物件其中包含按鍵相關的資訊。
event
物件代表事件的狀態,例如觸發事件的元素、鍵盤按鍵的狀態、滑鼠的位置、滑鼠按鍵的狀態等等;event
物件是一個隱式參數,並且只在事件發生的過程中才有效;event
物件根據觸發方式的差異會具有不同的屬性,也就是說某些屬性只對特定事件有效,但所有內容都是繼承自Event
物件;event
# 物件在IE
與Chrome
等瀏覽器表現不盡相同,例如說event.target
表示觸發事件的元素,在IE
中需要使用 event.srcElement
取得;
Event
物件本身就是一個建構函數,可以用來產生新的實例。
event = new Event(type, options);
Event
建構子接受兩個參數。第一個參數type
是字串,表示事件的名稱;第二個參數options
是一個對象,表示事件對象的配置。該物件主要有下面兩個屬性。
bubbles
:布林值,可選,預設為false,表示事件物件是否冒泡。
cancelable
:布林值,可選,預設為false,表示事件是否可以被取消,即能否用Event.preventDefault()
取消這個事件。一旦事件被取消,就好像從來沒有發生過,不會觸發瀏覽器對該事件的預設行為。
var ev = new Event( 'look', { 'bubbles': true, 'cancelable': false } ); document.dispatchEvent(ev);
上面程式碼新建一個look
事件實例,然後使用dispatchEvent
方法觸發該事件。
注意,如果不是明確指定bubbles
屬性為true
,產生的事件就只能在「捕獲階段」觸發監聽函數。
// HTML 代码为 // <div><p>Hello</p></div> var div = document.querySelector('div'); var p = document.querySelector('p'); function callback(event) { var tag = event.currentTarget.tagName; console.log('Tag: ' + tag); // 没有任何输出 } div.addEventListener('click', callback, false); var click = new Event('click'); p.dispatchEvent(click);
在上面程式碼中,p
元素發出一個click
事件,該事件預設不會冒泡。 div.addEventListener
方法指定在冒泡階段監聽,因此監聽函式不會觸發。如果寫成div.addEventListener('click', callback, true)
,那麼在「捕獲階段」可以監聽到這個事件。
另一方面,如果這個事件在div元素上觸發。
div.dispatchEvent(click);
那麼,不管div
元素是在冒泡階段監聽,還是在捕獲階段監聽,都會觸發監聽函數。因為這時div
元素是事件的目標,不存在是否冒泡的問題,div
元素總是會接收到事件,因此導致監聽函數生效。
我們在前面提到,根據觸發方式的不同event
物件會具有不同的屬性,我們可以將其大體分為四個部分:
通用屬性 (無論是透過鍵盤或滑鼠觸發都擁有的屬性)
bubbles
事件是否會冒泡,布林值;
cancelable
事件是否具有預設行為,布林值;
預設行為指的是瀏覽器中規定的一些行為,例如<a></a>
標籤點擊後會跳轉鏈接,<form></form>
標籤內按回車會自動提交等等。
currentTarget
事件處理程序目前正在處理事件的那個元素,傳回一個Element
物件;
defaultPrevented
事件是否取消了預設行為,布林值;
detail
傳回一個包含事件詳細資訊的數字
在click
、 mousedown
和mouseup
事件中,該數字表示目前的點擊次數, dblclick
事件中,該數字一直為 2 。在鍵盤事件和滑鼠經過事件中,該數字一直為0。
eventPhase
返回一个代表事件处理程序发生时所在阶段的数字;
0表示当前阶段未发生其他事件;1表示当前事件在捕获阶段发生;2表示当前事件处于目标阶段;3表示当前事件处于冒泡阶段;
isTrusted
表示该事件是由用户行为触发的,还是由 JS 代码触发的,布尔值;
当事件是由用户行为(点击等)触发时,值为 true
,当事件是通过 EventTarget.dispatchEvent()
派发的时候,这个属性的值为 false
。
点击列表1后,控制台打印如下结果:
target
返回触发该事件的目标节点,返回一个 Element
对象;
target
并不一定与 this
指向相同,this
指向的是当前发生事件的元素,而 target
指向的是触发该事件的元素,可以将上方代码中的 console.log(event.eventPhase);
换成 console.log(event.target);
来具体体验一下两者的不同。
在 IE
浏览器中应使用 srcElement
来代替 target
。
type
返回触发的事件名称,例 click
,keydown
等;
鼠标属性
button
当事件被触发时,哪个鼠标按钮被点击;clientX
当事件被触发时,鼠标指针的 x 轴坐标;clientY
当事件被触发时,鼠标指针的 y 轴坐标;screenX
当事件被触发时,鼠标指针的 x 轴坐标;screenY
当事件被触发时,鼠标指针的 y 轴坐标;键盘属性
altKey
当事件被触发时,“Alt” 是否被按下;ctrlKey
当事件被触发时,“Ctrl” 是否被按下;metaKey
当事件被触发时,“meta” 是否被按下;shiftKey
当事件被触发时,“Shift” 是否被按下;Location
返回按键在设备上的位置;charCode
当事件被触发时,触发键值的字母代码;key
按下按键时返回按键的标识符;keyCode
返回 keypress
事件触发的键的值的字符代码,或者 keydown
或 keyup
事件的键的代码;which
返回 keypress
事件触发的键的值的字符代码,或者 keydown
或 keyup
事件的键的代码;relatedTarget
返回与事件的目标节点相关的节点。IE属性
cancelBubble
如果想阻止事件冒泡,必须把该属性设为 true
;fromElement
对于 mouseover
和 mouseout
事件,fromElement
引用移出鼠标的元素;returnValue
等同于 defaultPrevented
;srcElement
等同于 target
;toElement
对于 mouseover
和 mouseout
事件,该属性引用移入鼠标的元素;x
事件发生的位置的 x 坐标;y
事件发生的位置的 y 坐标;initEvent()
初始化新创建的 Event
对象的属性;preventDefault()
阻止触发事件元素的默认行为;stopPropagation()
阻止事件冒泡; 如果想要阻止事件元素的默认行为,例如点击 <a></a>
标签时执行点击事件,不要跳转链接,需要在事件处理程序中调用 preventDefault
方法:
<a>百度一下,你就知道</a> <script> document.querySelector("a").onclick = function () { event.preventDefault(); // do something } </script>
如果想要阻止事件冒泡,例如点击子元素标签时执行子元素的点击事件,而不想要执行父级元素的事件处理程序,则需要调用 stopPropagation
方法:
其他相关方法
addEventListener()
给目标元素注册监听事件;createEvent()
创建一个 Event
对象;dispatchEvent()
将事件发送到目标元素的监听器上;handleEvent()
把任意对象注册为事件处理程序;initMouseEvent()
初始化鼠标事件对象的值;initKeyboardEvent()
初始化键盘事件对象的值;initMutationEvent()
初始变动事件和 HTML
事件对象的值;initCustomEvent()
初始自定义事件对象的值;removeEventListener()
删除目标元素上的某个监听事件;另外关于 createEvent
方法,根据传入参数的不同,会返回不同的 event
对象:
MouseEvents
创建鼠标事件对象,返回的对象中包含 initMouseEvent()
方法;KeyboardEvent
创建键盘事件对象,返回的对象中包含 initKeyEvent()
方法;KeyEvents
在 firefox
中创建键盘事件对象需要传入该参数;MutationEvents
模拟变动事件和 HTML 事件的事件对象,返回的对象中包含 initMutationEvent
方法;CustomEvent
创建自定义事件对象,返回的对象中包含 initCustomEvent()
方法; 我们可以通过 createEvent()
方法可以创建一个新的 event
对象,借助 initMouseEvent()
方法来对这个鼠标事件对象的值进行初始化,该方法接受十五个参数,分别与鼠标事件中的各个属性一一对应,按照 type
、bubbles
、cancelable
、view
、detail
、screenX
、screenY
、clientX
、clientY
、ctrlKey
、altKey
、shiftKey
、、metaKey
、button
、relatedTarget
的顺序传入即可:
var oBtn = document.querySelector("button"); // 为 button 绑定事件处理程序 oBtn.addEventListener("click", function () { console.log(event); }) var event = document.createEvent("MouseEvents"); // 通过 initMouseEvent() 方法初始化鼠标事件的 event 对象 event.initMouseEvent("click", true, true, document.defaultView, 0, 0, 0, 0, 0, false, false, false, false, 0, null); // 通过 dispatchEvent() 方法来触发 oBtn 上绑定的点击事件,此时浏览器打印的 event 对象为自定义的 event oBtn.dispatchEvent(event);
初始化事件对象时,最重要的是前四个参数,因为浏览器在触发事件时,这四个参数是必须的,而剩余的参数只有在事件处理程序中才会被使用,target
会在执行 dispatchEvent
方法时自动赋值;
同样需要先使用 createEvent()
方法可以创建一个新的 event
对象,但需要使用 initKeyEvent
来对键盘事件对象的值进行初始化,该方法接收八个参数,分别于键盘事件对象中的各个属性一一对应,按照 type
、bubbles
、cancelable
、view
、key
、location
、modifiers
、repeat
的顺序传入即可。但在 firefox
中,需要按照 type
、bubbles
、cancelable
、view
、ctrlKey
、altKey
、shiftKey
metaKey
keyCode
charCode
` 的顺序传入十个参数
document.onkeydown = function () { console.log(event); } var event = document.createEvent("KeyboardEvent"); event.initKeyboardEvent("keydown", false, false, document.defaultView, "a", 0, "Shift", 0); document.dispatchEvent(event);
如果想要模拟其他事件,诸如 submit
、focus
等 HTML
和变动事件,则需要通过 MutationEvents
方法来创建事件,通过 initEvent
方法来进行初始化,按照type
、bubbles
、cancelable
、relatedNode
、preValue
、newValue
、attrName
、attrChange
的顺序传入参数。
<input> <script> var oInput = document.querySelector("input"); oInput.addEventListener("focus", function () { this.style.background = "#ccc" }) var event = document.createEvent("HTMLEvents"); event.initEvent("focus", true, false); oInput.dispatchEvent(event); </script>
自定义事件不是由 DOM 原生触发的,它的目的是让开发人员创建自己的事件。要创建新的自定义事件,可以调用 createEvent("CustomEvent")
,返回的对象有一个名为 initCustomEvent()
的方法,接收 type
、bubbles
、cancelable
、detail
四个参数。
var oInput = document.querySelector("input"); oInput.addEventListener("myEvent", function () { console.log(event); }) var event = document.createEvent("CustomEvent"); event.initCustomEvent("myEvent", true, false, "自定义事件myEvent"); oInput.dispatchEvent(event);
上方代码创建了一个自定义事件,事件名为 myEvent
, 该事件可以向上冒泡,不可以执行在浏览器中的默认行为, detail
属性的值为 自定义事件myEvent
,可以在绑定该事件的元素或者元素的父级元素上绑定事件处理程序来查看 event
对象。
主要考慮到IE
瀏覽器與Chrome
等瀏覽器事件物件的區別,針對下面四個屬性,需要進行特殊處理:
取得event
物件var event = event || window.event;
獲得target
物件var target = event.target || event.srcElement;
#阻止瀏覽器預設行為event.preventDefault ? event.preventDefault() : (event.returnValue = false);
阻止事件冒泡event.stopPropagation ? event.stopPropagation() : (event.cancelBubble = true);
#【相關推薦:javascript學習教程】
#以上是深入解析JS中的事件物件Event的詳細內容。更多資訊請關注PHP中文網其他相關文章!