javascript event（事件對象）詳解

時間 2019-11-11

標籤 javascript event 事件對象詳解欄目 JavaScript 简体版

原文原文鏈接

1. 事件對象javascript

1. 事件對象

Event 對象表明事件的狀態，好比事件在其中發生的元素、鍵盤按鍵的狀態、鼠標的位置、鼠標按鈕的狀態。php

何時會產生Event 對象呢?
- 例如: 當用戶單擊某個元素的時候,咱們給這個元素註冊的事件就會觸發,該事件的本質就是一個函數,而該函數的形參接收一個event對象.
事件一般與函數結合使用，函數不會在事件發生前被執行！

2. 事件流

2.1 事件流發展史

事件發展史,這位大神已經寫好了,想去偷瞄兩眼的請點擊這裏

2.2 冒泡

什麼是事件冒泡,
- 官方的定義就是從最特定的事件目標到最不特定的事件目標

意思就是說,假如用戶單擊了一個元素,該元素擁有一個click事件,那麼一樣的事件也將會被它的祖先觸發,這個事件從該元素開始一直冒泡到DOM樹的最上層,這一過程稱爲事件冒泡 css

2.3 捕獲

什麼是事件捕獲

事件捕獲和事件是相反的,也就是說,當用戶觸發了一個事件的時候,這個事件是從DOM樹的最上層開始觸發一直到捕獲到事件源. html

2.4 事件流

它的由來

因爲微軟和網景亂搞,後來必需要爲事件傳播機制,制定一個標準,由於事件捕獲是網景公司開發出來的,而事件冒泡是由微軟公司開發出來的,它們都想要本身的技術成爲標準,因此致使這兩個公司總是幹架,制定標準的人爲了避免讓它們幹架,因此研發了事件流. java

2.5 事件流的寫法以及實現方式

標準實現方式使用關鍵詞addEventListener,假如你想要給某一個元素添加事件,如今就能夠這樣寫element.addEventListener(eventType, fn, false)
- dom對象.addEventListener(事件類型, 回調函數, 事件機制)這裏的事件類型表示你要使用哪一種事件類型好比click, 回調函數裏面寫着觸發此事件你要作什麼事情, 事件機制分爲冒泡和捕獲,若是爲false表示事件冒泡,爲true表示事件捕獲
既然有標準的實現方式,那麼確定也存在着不和諧的寫法,沒辦法誰讓人家牛逼呢,俗話說的好啊兩虎之爭必有一傷,可傷了咱們程序員了.這種不和諧的寫法是
- dom對象.attachEvent(eventType, fn)第一個參數表示事件類型,第二個是回調.這種寫法兼容IE, IE沒有實現事件捕獲,由於在當時他比較厲害,覺得不必…………只是,,,,省略一千字, 如今微軟的瀏覽器已經作得很好了… 只是調侃一下無其餘意圖..
以上的兩種寫法一種是兼容W3C標準的一種是老版IE的寫法,怎麼寫兼容性寫法呢?下面是註冊事件和刪除事件的Code

1.// 註冊時間
2.if(dom.addEventListener) {
3.    dom.addEventListener(eventType, fn);
4.} else {
5.    if(dom.attachEvent) {
6.        dom.attachEvent('on' + eventType, fn);
7.    }
8.}
9.
10.// 下面是刪除事件
11.if(dom.removeEventListener) {
12.    dom.removeEventListener(eventType, fn, false);
13.} else {
14.    if(dom.detachEvent) {
15.        dom.detachEvent("on" + eventType, fn)
16.    }
17.}

冒泡和捕獲的一個小demo

1.<!DOCTYPE html>
2.<html>
3.<head>
4. <meta charset="utf-8">
5. <title>bubble event</title>
6. <style type="text/css">
7. body{margin:0;}
8. #one{
9. width:500px;
10. height:500px;
11. background:rgb(255,0,0);
12. border: 1px solid transparent;
13. }
14. #two{
15. width:400px;
16. height:400px;
17. margin: 0 auto;
18. margin-top: 50px;
19. background:rgb(255,50,50);
20. border: 1px solid transparent;
21. }
22. #three{
23. width:300px;
24. height:300px;
25. margin: 0 auto;
26. margin-top: 50px;
27. background:rgb(255,100,100);
28. border: 1px solid transparent;
29. }
30. #four{
31. width:200px;
32. height:200px;
33. margin: 0 auto;
34. margin-top: 50px;
35. background:rgb(255,150,150);
36. }
37. </style>
38.</head>
39.<body>
40. <div id='one'>
41. <div id='two'>
42. <div id='three'>
43. <div id='four'>
44. </div>
45. </div>
46. </div>
47. </div>
48.
49. <script>
50. var one = document.getElementById('one');
51. var two = document.getElementById('two');
52. var three = document.getElementById('three');
53. var four = document.getElementById('four');
54.
55. var useCapture = false; //false爲冒泡獲取【目標元素先觸發】 true爲捕獲獲取【父級元素先觸發】
56. one.addEventListener('click', function(event) {
57. event || (event = window.event);
58. console.log(event);
59. console.log('one');
60. }, useCapture);
61. two.addEventListener('click', function() {
62. console.log('two');
63. }, useCapture);
64. three.addEventListener('click', function() {
65. console.log('three');
66. }, useCapture);
67. four.addEventListener('click', function() {
68. console.log('four');
69. }, useCapture); 
70.
71. /*
72. false
73. 冒泡
74. 點擊four div
75. 輸出結果：four three two one 
76.
77. true
78. 捕獲
79. 點擊four div
80. 輸出結果： one two three four
81. */
82. </script>
83.</body>
84.</html>

注意: 不論是微軟的寫法仍是標準的寫法,都支持給一個事件綁定多個函數.而且支持動態的添加和刪除事件

3. 關於event對象

在觸發的事件的函數裏面咱們會接收到一個event對象,經過該對象咱們須要的一些參數,好比說咱們須要知道此事件做用到誰身上了,就能夠經過event的屬性target來獲取到(IE暫且不談),或者想阻止瀏覽器的默認行爲能夠經過方法preventDefault()來進行阻止.如下是event對象的一些屬性和方法

屬性	描述
altKey	返回當事件被觸發時，」ALT」是否被按下。
button	返回當事件被觸發時，哪一個鼠標按鈕被點擊。
clientX	返回當事件被觸發時，鼠標指針的水平座標。
clientY	返回當事件被觸發時，鼠標指針的垂直座標。
ctrlKey	返回當事件被觸發時，」CTRL」鍵是否被按下。
metaKey	返回當事件被觸發時，」meta」鍵是否被按下。
relatedTarget	返回與事件的目標節點相關的節點。
screenX	返回當某個事件被觸發時，鼠標指針的水平座標。
screenY	返回當某個事件被觸發時，鼠標指針的垂直座標。
shiftKey	返回當事件被觸發時，」SHIFT」鍵是否被按下。

IE 屬性(除了上面的鼠標/事件屬性，IE 瀏覽器還支持下面的屬性)

屬性	描述
`cancelBubble`	若是事件句柄想阻止事件傳播到包容對象，必須把該屬性設爲 true。
fromElement	對於 mouseover 和 mouseout 事件，fromElement 引用移出鼠標的元素。
keyCode	對於 keypress 事件，該屬性聲明瞭被敲擊的鍵生成的 Unicode 字符碼。對於 keydown 和 keyup
offsetX,offsetY	發生事件的地點在事件源元素的座標系統中的 x 座標和 y 座標。
`returnValue`	若是設置了該屬性，它的值比事件句柄的返回值優先級高。把這個屬性設置爲
`srcElement`	對於生成事件的 Window 對象、Document 對象或 Element 對象的引用。
toElement	對於 mouseover 和 mouseout 事件，該屬性引用移入鼠標的元素。
x,y	事件發生的位置的 x 座標和 y 座標，它們相對於用CSS動態定位的最內層包容元素。

標準 Event 屬性下面列出了 2 級 DOM 事件標準定義的屬性。

屬性和方法	描述
bubbles	返回布爾值，指示事件是不是起泡事件類型。
`cancelable`	返回布爾值，指示事件是否可擁可取消的默認動做。
`currentTarget`	返回其事件監聽器觸發該事件的元素。
eventPhase	返回事件傳播的當前階段。
`target`	返回觸發此事件的元素（事件的目標節點）。
timeStamp	返回事件生成的日期和時間。
`type`	返回當前 Event 對象表示的事件的名稱。
initEvent()	初始化新建立的 Event 對象的屬性。
`preventDefault()`	通知瀏覽器不要執行與事件關聯的默認動做。
`stopPropagation()`	再也不派發事件。

4. Event對象的一些兼容性寫法

得到event對象兼容性寫法
event || (event = window.event);
得到target兼容型寫法
event.target||event.srcElement
阻止瀏覽器默認行爲兼容性寫法
event.preventDefault ? event.preventDefault() : (event.returnValue = false);
阻止冒泡寫法
event.stopPropagation ? event.stopPropagation() : (event.cancelBubble = true);
註冊和刪除事件方法的形式

1.// 綁定事件.
2.function on(id, eventType, fn) {
3.    var dom = this.isString(id) ? this.$id(id) : id;
4.    if(dom.addEventListener) {
5.        dom.addEventListener(eventType, fn);
6.    } else {
7.        if(dom.attachEvent) {
8.            dom.attachEvent('on' + eventType, fn);
9.        }
10.    }
11.},
12.// 解除綁定
13.function un(id, eventType, fn) {
14.    var dom = this.$id(id);
15.    if(dom.removeEventListener) {
16.        dom.removeEventListener(eventType, fn, false);
17.    } else {
18.        if(dom.detachEvent) {
19.            dom.detachEvent("on" + eventType, fn)
20.        }
21.    }
22.
23.}