深入解析JS中的事件物件Event

事件發生以後，會產生一個事件物件（Event），代表事件的狀態。以下這篇文章就來帶大家深入了解JS中的事件物件Event，對它做一個詳細的解讀，希望對大家有幫助！

一、什麼是事件物件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(&#39;div&#39;);
var p = document.querySelector(&#39;p&#39;);

function callback(event) {
  var tag = event.currentTarget.tagName;
  console.log(&#39;Tag: &#39; + tag); // 没有任何输出
}

div.addEventListener(&#39;click&#39;, callback, false);

var click = new Event(&#39;click&#39;);
p.dispatchEvent(click);

在上面程式碼中，p元素發出一個click事件，該事件預設不會冒泡。 div.addEventListener方法指定在冒泡階段監聽，因此監聽函式不會觸發。如果寫成div.addEventListener('click', callback, true)，那麼在「捕獲階段」可以監聽到這個事件。

另一方面，如果這個事件在div元素上觸發。

div.dispatchEvent(click);

那麼，不管div元素是在冒泡階段監聽，還是在捕獲階段監聽，都會觸發監聽函數。因為這時div元素是事件的目標，不存在是否冒泡的問題，div元素總是會接收到事件，因此導致監聽函數生效。

二、Event 屬性

  我們在前面提到，根據觸發方式的不同event 物件會具有不同的屬性，我們可以將其大體分為四個部分：

通用屬性 (無論是透過鍵盤或滑鼠觸發都擁有的屬性)

• bubbles 事件是否會冒泡，布林值；

• cancelable 事件是否具有預設行為，布林值;
    預設行為指的是瀏覽器中規定的一些行為，例如<a> 標籤點擊後會跳轉鏈接，<form> 標籤內按回車會自動提交等等。

• currentTarget 事件處理程序目前正在處理事件的那個元素，傳回一個Element 物件；

• defaultPrevented 事件是否取消了預設行為，布林值；

• detail 傳回一個包含事件詳細資訊的數字
  在click 、 mousedown 和mouseup 事件中，該數字表示目前的點擊次數， dblclick 事件中，該數字一直為 2 。在鍵盤事件和滑鼠經過事件中，該數字一直為0。

• eventPhase 返回一个代表事件处理程序发生时所在阶段的数字；
    0表示当前阶段未发生其他事件；1表示当前事件在捕获阶段发生；2表示当前事件处于目标阶段；3表示当前事件处于冒泡阶段；

• isTrusted 表示该事件是由用户行为触发的，还是由 JS 代码触发的，布尔值；
    当事件是由用户行为（点击等）触发时，值为 true ，当事件是通过 EventTarget.dispatchEvent() 派发的时候，这个属性的值为 false 。

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

    document.querySelector(&#39;ul&#39;).addEventListener("click", fn1, false)

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

    function fn1() {
        console.log(this);		// 打印当前事件对象
        console.log(event.eventPhase);		// 打印
    }</script>

  点击列表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 坐标；

三、Event 方法

• initEvent() 初始化新创建的 Event 对象的属性；
• preventDefault() 阻止触发事件元素的默认行为；
• stopPropagation() 阻止事件冒泡；

  如果想要阻止事件元素的默认行为，例如点击 <a> 标签时执行点击事件，不要跳转链接，需要在事件处理程序中调用 preventDefault 方法：

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

  如果想要阻止事件冒泡，例如点击子元素标签时执行子元素的点击事件，而不想要执行父级元素的事件处理程序，则需要调用 stopPropagation 方法：

<ul>
	<li>不要触发 ul 的点击事件处理程序</li>
</ul>
<script>
	document.querySelector("ul").onclick = function () {
		alert("事件冒泡，触发 ul 的点击事件")
	}

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

其他相关方法

• addEventListener() 给目标元素注册监听事件；
• createEvent() 创建一个 Event 对象；
• dispatchEvent() 将事件发送到目标元素的监听器上；
• handleEvent() 把任意对象注册为事件处理程序；
• initMouseEvent() 初始化鼠标事件对象的值；
• initKeyboardEvent() 初始化键盘事件对象的值；
• initMutationEvent() 初始变动事件和 HTML 事件对象的值；
• initCustomEvent() 初始自定义事件对象的值；
• removeEventListener() 删除目标元素上的某个监听事件；

---

另外关于 createEvent 方法，根据传入参数的不同，会返回不同的 event 对象：

• MouseEvents 创建鼠标事件对象，返回的对象中包含 initMouseEvent() 方法；
• KeyboardEvent 创建键盘事件对象，返回的对象中包含 initKeyEvent() 方法；
• KeyEvents 在 firefox 中创建键盘事件对象需要传入该参数；
• MutationEvents 模拟变动事件和 HTML 事件的事件对象，返回的对象中包含 initMutationEvent 方法；
• CustomEvent 创建自定义事件对象，返回的对象中包含 initCustomEvent() 方法；

四、模拟事件

4.1 模拟鼠标事件

  我们可以通过 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 方法时自动赋值；

4.2 模拟键盘事件

  同样需要先使用 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);

4.3 模拟其他事件

  如果想要模拟其他事件，诸如 submit、focus 等 HTML 和变动事件，则需要通过 MutationEvents 方法来创建事件，通过 initEvent 方法来进行初始化，按照type、bubbles、cancelable、relatedNode、preValue、newValue、attrName、attrChange的顺序传入参数。

<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 原生触发的，它的目的是让开发人员创建自己的事件。要创建新的自定义事件，可以调用 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 对象。

五、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中文網其他相關文章！