javascript event（事件對象）詳解

1. 事件對象

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

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

2. 事件流

2.1 事件流發展史

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

2.2 冒泡

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

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

2.3 捕獲

什么是事件捕獲

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

2.4 事件流

它的由來

由於微軟和網景亂搞,后來必須要為事件傳播機制,制定一個標准,因為事件捕獲是網景公司開發出來的,而事件冒泡是由微軟公司開發出來的,它們都想要自己的技術成為標准,所以導致這兩個公司老是干架,制定標准的人為了不讓它們干架,所以研發了事件流.

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

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 JavaScript事件參數對象event [記錄] JavaScript 中的事件(Event對象、事件源對象、事件流、事件綁定) javascript中window.event事件用法詳解詳解JavaScript中的Event Loop（事件循環）機制 js的event對象詳解 dom事件與event對象總結 js的event事件對象匯總 trigger()的event事件對象之坑 javaScript事件（三）事件對象 JS中的event 對象詳解