JS中的事件對(duì)象Event實(shí)例分析

這篇文章主要講解了“JS中的事件對(duì)象Event實(shí)例分析”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“JS中的事件對(duì)象Event實(shí)例分析”吧！

我們提供的服務(wù)有：網(wǎng)站設(shè)計(jì)、成都網(wǎng)站設(shè)計(jì)、微信公眾號(hào)開(kāi)發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、陵城ssl等。為成百上千企事業(yè)單位解決了網(wǎng)站和推廣的問(wèn)題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的陵城網(wǎng)站制作公司

一、什么是事件對(duì)象 Event

??每一個(gè)事件觸發(fā)時(shí)，都會(huì)產(chǎn)生一個(gè)與之對(duì)應(yīng)的事件對(duì)象 event ，其中包含了觸發(fā)事件的元素、鍵盤(pán)鼠標(biāo)的狀態(tài)、位置等等內(nèi)容。

??每當(dāng)用戶觸發(fā)一個(gè)事件后，JS 就會(huì)自動(dòng)生成一個(gè) event 對(duì)象，根據(jù)觸發(fā)事件的不同，這個(gè)對(duì)象包含的內(nèi)容也不同，比如通過(guò)鼠標(biāo)觸發(fā)點(diǎn)擊事件，會(huì)產(chǎn)生一個(gè) MouseEvent 對(duì)象，其中包含了鼠標(biāo)的位置等內(nèi)容；通過(guò)鍵盤(pán)觸發(fā)事件，會(huì)產(chǎn)生一個(gè) KeyboardEvent 對(duì)象其中包含按鍵相關(guān)的信息。

event 對(duì)象代表事件的狀態(tài)，比如觸發(fā)事件的元素、鍵盤(pán)按鍵的狀態(tài)、鼠標(biāo)的位置、鼠標(biāo)按鍵的狀態(tài)等等；
event 對(duì)象是一個(gè)隱式參數(shù)，并且只在事件發(fā)生的過(guò)程中才有效；
event 對(duì)象根據(jù)觸發(fā)方式的不同會(huì)具有不同的屬性，也就是說(shuō)某些屬性只對(duì)特定事件有效，但所有內(nèi)容都是繼承自 Event 對(duì)象；
event 對(duì)象在 IE 與 Chrome 等瀏覽器表現(xiàn)不盡相同，例如說(shuō) event.target 表示觸發(fā)事件的元素，在 IE 中需要使用 event.srcElement 獲取；

Event對(duì)象本身就是一個(gè)構(gòu)造函數(shù)，可以用來(lái)生成新的實(shí)例。

event = new Event(type, options);

Event構(gòu)造函數(shù)接受兩個(gè)參數(shù)。第一個(gè)參數(shù)type是字符串，表示事件的名稱；第二個(gè)參數(shù)options是一個(gè)對(duì)象，表示事件對(duì)象的配置。該對(duì)象主要有下面兩個(gè)屬性。

bubbles：布爾值，可選，默認(rèn)為false，表示事件對(duì)象是否冒泡。
cancelable：布爾值，可選，默認(rèn)為false，表示事件是否可以被取消，即能否用Event.preventDefault()取消這個(gè)事件。一旦事件被取消，就好像從來(lái)沒(méi)有發(fā)生過(guò)，不會(huì)觸發(fā)瀏覽器對(duì)該事件的默認(rèn)行為。

var ev = new Event(
  'look',
  {
    'bubbles': true,
    'cancelable': false
  }
);
document.dispatchEvent(ev);

上面代碼新建一個(gè)look事件實(shí)例，然后使用dispatchEvent方法觸發(fā)該事件。

注意，如果不是顯式指定bubbles屬性為true，生成的事件就只能在“捕獲階段”觸發(fā)監(jiān)聽(tīng)函數(shù)。

// 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); // 沒(méi)有任何輸出
}

div.addEventListener('click', callback, false);

var click = new Event('click');
p.dispatchEvent(click);

上面代碼中，p元素發(fā)出一個(gè)click事件，該事件默認(rèn)不會(huì)冒泡。div.addEventListener方法指定在冒泡階段監(jiān)聽(tīng)，因此監(jiān)聽(tīng)函數(shù)不會(huì)觸發(fā)。如果寫(xiě)成div.addEventListener('click', callback, true)，那么在“捕獲階段”可以監(jiān)聽(tīng)到這個(gè)事件。

另一方面，如果這個(gè)事件在div元素上觸發(fā)。

div.dispatchEvent(click);

那么，不管div元素是在冒泡階段監(jiān)聽(tīng)，還是在捕獲階段監(jiān)聽(tīng)，都會(huì)觸發(fā)監(jiān)聽(tīng)函數(shù)。因?yàn)檫@時(shí)div元素是事件的目標(biāo)，不存在是否冒泡的問(wèn)題，div元素總是會(huì)接收到事件，因此導(dǎo)致監(jiān)聽(tīng)函數(shù)生效。

二、Event 屬性

??我們?cè)谇懊嫣岬?，根?jù)觸發(fā)方式的不同 event 對(duì)象會(huì)具有不同的屬性，我們可以將其大體分為四部分：

通用屬性 (無(wú)論是通過(guò)鍵盤(pán)還是鼠標(biāo)觸發(fā)都擁有的屬性)

bubbles 事件是否會(huì)冒泡，布爾值；
cancelable 事件是否具有默認(rèn)行為，布爾值；
??默認(rèn)行為指的是瀏覽器中規(guī)定的一些行為，比如 <a> 標(biāo)簽點(diǎn)擊后會(huì)跳轉(zhuǎn)鏈接，<form> 標(biāo)簽內(nèi)按回車(chē)會(huì)自動(dòng)提交等等。
currentTarget 事件處理程序當(dāng)前正在處理事件的那個(gè)元素，返回一個(gè) Element 對(duì)象；
defaultPrevented 事件是否取消了默認(rèn)行為，布爾值；
detail 返回一個(gè)包含事件詳細(xì)信息的數(shù)字
??在 click 、 mousedown 和 mouseup 事件中，該數(shù)字表示當(dāng)前的點(diǎn)擊次數(shù)， dblclick 事件中，該數(shù)字一直為 2 。在鍵盤(pán)事件和鼠標(biāo)經(jīng)過(guò)事件中，該數(shù)字一直為0。
eventPhase 返回一個(gè)代表事件處理程序發(fā)生時(shí)所在階段的數(shù)字；
??0表示當(dāng)前階段未發(fā)生其他事件；1表示當(dāng)前事件在捕獲階段發(fā)生；2表示當(dāng)前事件處于目標(biāo)階段；3表示當(dāng)前事件處于冒泡階段；
isTrusted 表示該事件是由用戶行為觸發(fā)的，還是由 JS 代碼觸發(fā)的，布爾值；
??當(dāng)事件是由用戶行為（點(diǎn)擊等）觸發(fā)時(shí)，值為 true ，當(dāng)事件是通過(guò) EventTarget.dispatchEvent() 派發(fā)的時(shí)候，這個(gè)屬性的值為 false 。

<ul>
    <li>列表1</li>
    <li>列表2</li>
    <li>列表3</li>
    <li>列表4</li></ul><script>
    document.querySelector('ul').addEventListener("click", fn1, true)

    document.querySelector('ul').addEventListener("click", fn1, false)

    document.querySelector("li").addEventListener("click", fn1, true)

    function fn1() {
        console.log(this);		// 打印當(dāng)前事件對(duì)象
        console.log(event.eventPhase);		// 打印
    }</script>

??點(diǎn)擊列表1后，控制臺(tái)打印如下結(jié)果：
JS中的事件對(duì)象Event實(shí)例分析

target 返回觸發(fā)該事件的目標(biāo)節(jié)點(diǎn)，返回一個(gè) Element 對(duì)象；
??target 并不一定與 this 指向相同，this 指向的是當(dāng)前發(fā)生事件的元素，而 target 指向的是觸發(fā)該事件的元素，可以將上方代碼中的 console.log(event.eventPhase); 換成 console.log(event.target); 來(lái)具體體驗(yàn)一下兩者的不同。
??在 IE 瀏覽器中應(yīng)使用 srcElement 來(lái)代替 target。
type 返回觸發(fā)的事件名稱，例 click ，keydown等；

鼠標(biāo)屬性

button 當(dāng)事件被觸發(fā)時(shí)，哪個(gè)鼠標(biāo)按鈕被點(diǎn)擊；
clientX 當(dāng)事件被觸發(fā)時(shí)，鼠標(biāo)指針的 x 軸坐標(biāo)；
clientY 當(dāng)事件被觸發(fā)時(shí)，鼠標(biāo)指針的 y 軸坐標(biāo)；
screenX 當(dāng)事件被觸發(fā)時(shí)，鼠標(biāo)指針的 x 軸坐標(biāo)；
screenY 當(dāng)事件被觸發(fā)時(shí)，鼠標(biāo)指針的 y 軸坐標(biāo)；

鍵盤(pán)屬性

altKey 當(dāng)事件被觸發(fā)時(shí)，“Alt” 是否被按下；
ctrlKey 當(dāng)事件被觸發(fā)時(shí)，“Ctrl” 是否被按下；
metaKey 當(dāng)事件被觸發(fā)時(shí)，“meta” 是否被按下；
shiftKey 當(dāng)事件被觸發(fā)時(shí)，“Shift” 是否被按下；
Location 返回按鍵在設(shè)備上的位置；
charCode 當(dāng)事件被觸發(fā)時(shí)，觸發(fā)鍵值的字母代碼；
key 按下按鍵時(shí)返回按鍵的標(biāo)識(shí)符；
keyCode 返回 keypress 事件觸發(fā)的鍵的值的字符代碼，或者 keydown 或 keyup 事件的鍵的代碼；
which 返回 keypress 事件觸發(fā)的鍵的值的字符代碼，或者 keydown 或 keyup 事件的鍵的代碼；
relatedTarget 返回與事件的目標(biāo)節(jié)點(diǎn)相關(guān)的節(jié)點(diǎn)。

IE屬性

cancelBubble 如果想阻止事件冒泡，必須把該屬性設(shè)為 true；
fromElement 對(duì)于 mouseover 和 mouseout 事件，fromElement 引用移出鼠標(biāo)的元素；
returnValue 等同于 defaultPrevented；
srcElement 等同于 target；
toElement 對(duì)于 mouseover 和 mouseout 事件，該屬性引用移入鼠標(biāo)的元素；
x 事件發(fā)生的位置的 x 坐標(biāo)；
y 事件發(fā)生的位置的 y 坐標(biāo)；

三、Event 方法

initEvent() 初始化新創(chuàng)建的 Event 對(duì)象的屬性；
preventDefault() 阻止觸發(fā)事件元素的默認(rèn)行為；
stopPropagation() 阻止事件冒泡；

??如果想要阻止事件元素的默認(rèn)行為，例如點(diǎn)擊 <a> 標(biāo)簽時(shí)執(zhí)行點(diǎn)擊事件，不要跳轉(zhuǎn)鏈接，需要在事件處理程序中調(diào)用 preventDefault 方法：

<a href="http://baidu.com">百度一下，你就知道</a>
<script>
	document.querySelector("a").onclick = function () {
		event.preventDefault();
		//	do something
	}
</script>

??如果想要阻止事件冒泡，例如點(diǎn)擊子元素標(biāo)簽時(shí)執(zhí)行子元素的點(diǎn)擊事件，而不想要執(zhí)行父級(jí)元素的事件處理程序，則需要調(diào)用 stopPropagation 方法：

<ul>
	<li>不要觸發(fā) ul 的點(diǎn)擊事件處理程序</li>
</ul>
<script>
	document.querySelector("ul").onclick = function () {
		alert("事件冒泡，觸發(fā) ul 的點(diǎn)擊事件")
	}

	document.querySelector("li").onclick = function () {
		event.stopPropagation();
		// do something
	}
</script>

其他相關(guān)方法

addEventListener() 給目標(biāo)元素注冊(cè)監(jiān)聽(tīng)事件；
createEvent() 創(chuàng)建一個(gè) Event 對(duì)象；
dispatchEvent() 將事件發(fā)送到目標(biāo)元素的監(jiān)聽(tīng)器上；
handleEvent() 把任意對(duì)象注冊(cè)為事件處理程序；
initMouseEvent() 初始化鼠標(biāo)事件對(duì)象的值；
initKeyboardEvent() 初始化鍵盤(pán)事件對(duì)象的值；
initMutationEvent() 初始變動(dòng)事件和 HTML 事件對(duì)象的值；
initCustomEvent() 初始自定義事件對(duì)象的值；
removeEventListener() 刪除目標(biāo)元素上的某個(gè)監(jiān)聽(tīng)事件；

另外關(guān)于 createEvent 方法，根據(jù)傳入?yún)?shù)的不同，會(huì)返回不同的 event 對(duì)象：

MouseEvents 創(chuàng)建鼠標(biāo)事件對(duì)象，返回的對(duì)象中包含 initMouseEvent() 方法；
KeyboardEvent 創(chuàng)建鍵盤(pán)事件對(duì)象，返回的對(duì)象中包含 initKeyEvent() 方法；
KeyEvents 在 firefox 中創(chuàng)建鍵盤(pán)事件對(duì)象需要傳入該參數(shù)；
MutationEvents 模擬變動(dòng)事件和 HTML 事件的事件對(duì)象，返回的對(duì)象中包含 initMutationEvent 方法；
CustomEvent 創(chuàng)建自定義事件對(duì)象，返回的對(duì)象中包含 initCustomEvent() 方法；

四、模擬事件

4.1 模擬鼠標(biāo)事件

??我們可以通過(guò) createEvent() 方法可以創(chuàng)建一個(gè)新的 event 對(duì)象，借助 initMouseEvent() 方法來(lái)對(duì)這個(gè)鼠標(biāo)事件對(duì)象的值進(jìn)行初始化，該方法接受十五個(gè)參數(shù)，分別與鼠標(biāo)事件中的各個(gè)屬性一一對(duì)應(yīng)，按照 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");
// 通過(guò) initMouseEvent() 方法初始化鼠標(biāo)事件的 event 對(duì)象
event.initMouseEvent("click", true, true, document.defaultView, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
// 通過(guò) dispatchEvent() 方法來(lái)觸發(fā) oBtn 上綁定的點(diǎn)擊事件，此時(shí)瀏覽器打印的 event 對(duì)象為自定義的 event
oBtn.dispatchEvent(event);

??初始化事件對(duì)象時(shí)，最重要的是前四個(gè)參數(shù)，因?yàn)闉g覽器在觸發(fā)事件時(shí)，這四個(gè)參數(shù)是必須的，而剩余的參數(shù)只有在事件處理程序中才會(huì)被使用，target 會(huì)在執(zhí)行 dispatchEvent 方法時(shí)自動(dòng)賦值；

4.2 模擬鍵盤(pán)事件

??同樣需要先使用 createEvent() 方法可以創(chuàng)建一個(gè)新的 event 對(duì)象，但需要使用 initKeyEvent 來(lái)對(duì)鍵盤(pán)事件對(duì)象的值進(jìn)行初始化，該方法接收八個(gè)參數(shù)，分別于鍵盤(pán)事件對(duì)象中的各個(gè)屬性一一對(duì)應(yīng)，按照 type、bubbles、cancelable、view、key、location、modifiers、repeat的順序傳入即可。但在 firefox 中，需要按照 type、bubbles、cancelable、view、ctrlKey、altKey、shiftKey metaKey keyCode charCode ` 的順序傳入十個(gè)參數(shù)

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);

4.3 模擬其他事件

??如果想要模擬其他事件，諸如 submit、focus 等 HTML 和變動(dòng)事件，則需要通過(guò) MutationEvents 方法來(lái)創(chuàng)建事件，通過(guò) initEvent 方法來(lái)進(jìn)行初始化，按照type、bubbles、cancelable、relatedNode、preValue、newValue、attrName、attrChange的順序傳入?yún)?shù)。

<input type="text">

<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>

4.4 自定義 DOM 事件

??自定義事件不是由 DOM 原生觸發(fā)的，它的目的是讓開(kāi)發(fā)人員創(chuàng)建自己的事件。要?jiǎng)?chuàng)建新的自定義事件，可以調(diào)用 createEvent("CustomEvent")，返回的對(duì)象有一個(gè)名為 initCustomEvent() 的方法，接收 type、bubbles、cancelable、detail 四個(gè)參數(shù)。

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);

??上方代碼創(chuàng)建了一個(gè)自定義事件，事件名為 myEvent ，該事件可以向上冒泡，不可以執(zhí)行在瀏覽器中的默認(rèn)行為， detail 屬性的值為 自定義事件myEvent，可以在綁定該事件的元素或者元素的父級(jí)元素上綁定事件處理程序來(lái)查看 event 對(duì)象。

五、Event的兼容性處理

??主要考慮到 IE 瀏覽器與 Chrome 等瀏覽器事件對(duì)象的區(qū)別，針對(duì)下面四個(gè)屬性，需要進(jìn)行特殊處理：

獲得 event 對(duì)象
var event = event || window.event;
獲得 target 對(duì)象
var target = event.target || event.srcElement;
阻止瀏覽器默認(rèn)行為
event.preventDefault ? event.preventDefault() : (event.returnValue = false);
阻止事件冒泡
event.stopPropagation ? event.stopPropagation() : (event.cancelBubble = true)。

感謝各位的閱讀，以上就是“JS中的事件對(duì)象Event實(shí)例分析”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)JS中的事件對(duì)象Event實(shí)例分析這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！

網(wǎng)站題目：JS中的事件對(duì)象Event實(shí)例分析
文章轉(zhuǎn)載：http://bm7419.com/article10/pcojgo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供虛擬主機(jī)、建站公司、網(wǎng)站改版、品牌網(wǎng)站設(shè)計(jì)、網(wǎng)頁(yè)設(shè)計(jì)公司、搜索引擎優(yōu)化

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

JS中的事件對(duì)象Event實(shí)例分析

一、什么是事件對(duì)象 Event

二、Event 屬性

三、Event 方法

四、模擬事件

4.1 模擬鼠標(biāo)事件

4.2 模擬鍵盤(pán)事件

4.3 模擬其他事件

4.4 自定義 DOM 事件

五、Event的兼容性處理

一、什么是事件對(duì)象 Event

三、Event 方法

四、模擬事件

五、Event的兼容性處理