1
00:00:00,210 --> 00:00:02,150
OK，我們會回來的。

2
00:00:02,400 --> 00:00:10,520
早在介紹的JavaScript我提到的用於學習JavaScript的一個重要原因是，我們可以用它來使我們的網頁互動。

3
00:00:10,680 --> 00:00:17,920
這是當用戶點擊一個按鈕或輸入東西或打箭頭鍵或無論他們做什麼，我們如何能夠運行代碼。

4
00:00:18,090 --> 00:00:24,880
我們可具有在給定的時間點不正好在頁面的開始執行執行了相應的代碼。

5
00:00:25,410 --> 00:00:28,290
因此，要做到這一點，我們需要談論DOM事件。

6
00:00:28,320 --> 00:00:31,250
所以這個視頻將是介紹DOM事件。

7
00:00:31,260 --> 00:00:36,300
從概念上設置起來，然後又語法的過程。

8
00:00:36,300 --> 00:00:38,660
因此，正如我提到的事件比比皆是。

9
00:00:38,670 --> 00:00:47,330
想想當你與網頁交互時發生的，你可以點擊的東西就像一個按鈕，你可以將鼠標懸停在一個鏈接和一些可能彈出不同的事情有關。

10
00:00:47,370 --> 00:00:50,320
你可以拖放在某些頁面元素。

11
00:00:50,550 --> 00:00:56,650
你可能希望從用戶雙擊運行，或者實際上這個網頁有幾個例子的代碼。

12
00:00:56,670 --> 00:01:03,550
這張幻燈片點com是一個網站，我打左，右箭頭鍵更改幻燈片。

13
00:01:03,690 --> 00:01:10,050
因此，一些代碼正在運行時，我打左箭頭鍵或右箭頭鍵或當我點擊在這裡。

14
00:01:10,590 --> 00:01:16,860
這也是一個事件，它是做一些它的運行一些代碼，正在改變當前的幻燈片。

15
00:01:16,950 --> 00:01:20,930
所以問題是事件是所有的地方，他們是真正令人興奮的。

16
00:01:20,920 --> 00:01:35,070
這是我最喜愛的主題教之一，因為現在我們可以讓我們的網頁互動，我們可以採取我們已經學習改變顏色變化的文字，然後我們就可以真正做事情的時候，特別是發生操縱的東西。

17
00:01:35,070 --> 00:01:38,340
所以這真的解鎖操縱宿舍的潛力。

18
00:01:38,370 --> 00:01:49,050
這是我們要如何讓遊戲中，它是我們如何會讓形式驗證器井字我們要做出一個非常酷的顏色選擇器的遊戲，所有這些事件造成的。

19
00:01:49,050 --> 00:02:07,590
因此，這些事件的工作方式是，我們實際上是將它們連接到特定的元素，所以我們選擇喜歡的第一個按鈕或第二H-1或輸入，其中一個類型等於文本和元素再附上一份事件偵聽器以所選元素。

20
00:02:07,920 --> 00:02:21,990
因此，作為一個例子，我們可能會被監聽上點擊一個按鈕，我們可以聽上我們可以聆聽到一個文本輸入按鍵事件的H1懸停事件，我們將更多地談到這些事件之間的差異。

21
00:02:21,990 --> 00:02:30,170
有這麼多不同類型的JavaScript，但最重要的是，我們必須有一個被監聽某個給定元素上的一個事件的事件。

22
00:02:30,180 --> 00:02:34,890
所以就像之前的時候我就說說選擇，然後操作這些仍然適用。

23
00:02:34,920 --> 00:02:43,740
我們需要選擇的東西，然後出現這種情況是我們添加事件偵聽器，我們選擇的那件事的操作。

24
00:02:43,740 --> 00:02:49,400
有一個特別的方法，我們要使用所有這些被稱為附加事件偵聽器的時間。

25
00:02:49,650 --> 00:03:03,070
因此，在事件監聽器是我們使用，一旦我們選擇喜歡的第一個按鈕或輸入類型，因為密碼的元素，我們有選擇的話，我們呼籲其添加事件偵聽器和我們給出兩個參數的東西。

26
00:03:03,330 --> 00:03:06,950
第一個是我們想要監聽事件的類型。

27
00:03:07,350 --> 00:03:12,790
第二個參數是我們希望當事件發生時運行的代碼。

28
00:03:13,260 --> 00:03:14,330
因此，這裡是一個例子。

29
00:03:14,400 --> 00:03:22,060
我選擇頁面上的第一個按鈕並不重要所在的按鈕或它的外觀或任何東西只是任何按鈕。

30
00:03:22,350 --> 00:03:30,540
然後我打電話給在事件偵聽器點擊按鈕，然後第二個說法是，所有的方式去這裡的功能。

31
00:03:30,750 --> 00:03:33,690
而這種代碼是不是馬上運行。

32
00:03:33,690 --> 00:03:35,910
記住，這就是所謂的回調。

33
00:03:35,910 --> 00:03:38,140
這個代碼不立即執行。

34
00:03:38,430 --> 00:03:42,000
它只運行一次此事件。

35
00:03:42,000 --> 00:03:46,390
所以一旦你點擊的JavaScript中去調用它背面的按鈕。

36
00:03:46,440 --> 00:03:51,630
這個功能說嘿它是你的眼前一亮，回來這裡準備好讓你執行。

37
00:03:51,630 --> 00:03:56,040
然後該代碼運行，我們得到勸告不要登錄有人單擊按鈕。

38
00:03:56,250 --> 00:04:05,290
因此，只要一個按鈕，很快就與我們選擇點擊特定的按鈕上運行該功能將運行。

39
00:04:05,910 --> 00:04:07,540
因此，這裡的另一個例子。

40
00:04:07,830 --> 00:04:26,910
這種情況下，我有標記在這裡一個按鈕和一個段落，我選擇了他​​們兩個與柯瑞選擇和我把它們都保存到變量，然後所有我們要做的就是添加點擊偵聽器，按鈕的添加事件偵聽器，點擊，然後第二個參數是回調函數。

41
00:04:26,910 --> 00:04:42,260
而我們要去每當按鈕被點擊更改段落文本內容是某人單擊按鈕做的，你可以看到，當我點擊該按鈕，它改變了從沒有人點擊我和某人有單擊按鈕。

42
00:04:42,930 --> 00:04:50,790
所以，現在我打算使用我們的Dom演示頁，讓我們通過這種H-1在這裡開始做一個快速演示。

43
00:04:50,810 --> 00:04:53,700
當用戶點擊它改變顏色。

44
00:04:53,780 --> 00:04:58,310
因此，要做到這一點，我們需要通過選擇H-1始終啟動。

45
00:04:58,810 --> 00:05:00,510
因此，我們有一大堆的選擇那裡。

46
00:05:00,530 --> 00:05:09,070
我將只使用queery選擇文檔查詢選擇H-1確保我們擁有它。

47
00:05:09,310 --> 00:05:10,460
好吧。

48
00:05:10,460 --> 00:05:14,920
然後，我們只是寫H-1中添加事件偵聽器。

49
00:05:15,010 --> 00:05:16,790
記得有兩個參數。

50
00:05:16,940 --> 00:05:19,910
第一個是我們正在偵聽該事件。

51
00:05:20,060 --> 00:05:24,050
我們會花更多的時間談論不同事件的不同選項。

52
00:05:24,050 --> 00:05:30,050
現在我們只是在做點擊第二個是我們要運行時用戶點擊的代碼。

53
00:05:30,310 --> 00:05:37,060
所以功能和剛開始很簡單，只是做了一個提醒用戶點擊時。

54
00:05:37,160 --> 00:05:44,330
因此，我們會做一個警示每一個被點擊就這樣。

55
00:05:44,750 --> 00:05:46,990
現在，讓我們來回車。

56
00:05:47,120 --> 00:05:48,700
沒有馬上改變。

57
00:05:49,190 --> 00:05:52,910
但現在，如果我點擊一個，這樣我會關閉這個。

58
00:05:52,910 --> 00:05:54,570
如果我點擊頁面上的任何地方。

59
00:05:54,590 --> 00:05:56,400
除了H-1沒有任何反應。

60
00:05:56,620 --> 00:06:01,150
當我點擊H-1雖然它告訴我，H-1是正確的。

61
00:06:01,430 --> 00:06:02,510
所以這是非常重要的。

62
00:06:02,500 --> 00:06:15,290
它僅適用於H-1但這並不意味著我可以在這裡走了過來，然後單擊因為記得，如果我檢查一下了H-1去所有的方式在屏幕上。

63
00:06:15,500 --> 00:06:30,190
所以，只是要記住的罰款對於我們在這種情況下，但它偶爾會彈出那裡的東西表現得有點不同可能比你他們想要和需要使用它們綜援可能縮短階段之一，或者改變您的反正監聽。

64
00:06:30,640 --> 00:06:35,130
因此，而不是僅僅提醒讓我們嘗試做別的事情。

65
00:06:35,330 --> 00:06:54,260
如果我只是打向上箭頭add事件偵聽器，點擊更改代碼在這裡，我做類似H-1這種風格的背景平等相待，讓我們做的橙色橙色背景，我回車。

66
00:06:54,250 --> 00:07:06,030
同樣沒有馬上發生變化，但是當我點擊要注意哪些情況首先發生的事情是，它仍然在H-1被點擊警告說。

67
00:07:06,170 --> 00:07:10,360
然後當我關閉它，然後改變是橙色。

68
00:07:10,730 --> 00:07:14,840
因此，這裡的教訓是，我們可以有一個給定的元素不止一個監聽器。

69
00:07:14,840 --> 00:07:28,890
當我們點擊該H-1，我們添加的第一個監聽器監聽一個點擊它運行了一個警報，然後我們又增加了聽眾事後也聽了一點擊，但它改變背景顏色。

70
00:07:28,910 --> 00:07:31,200
所以，當我點擊他們兩個運行。

71
00:07:31,390 --> 00:07:42,190
和多數民眾總是會發生的，現在如果我點擊我再次得到警報和它改成當然，你沒有看到，因為這已經是橘橙但你要相信我。

72
00:07:42,290 --> 00:07:45,000
它保持了又一遍地其更改為橙色。

73
00:07:45,670 --> 00:07:48,560
好吧，我我要去刷新，擺脫這一切的。

74
00:07:48,590 --> 00:07:52,720
我也想加入一個監聽到UL做一個快速演示。

75
00:07:52,880 --> 00:08:04,300
所以讓我們做一個轉儲文件查詢選擇UL，記住我們有三個盟友，而不只是一個UL認證。

76
00:08:04,490 --> 00:08:08,500
所以我要告訴你，當我們設置這樣的父元素上會發生什麼。

77
00:08:08,510 --> 00:08:11,850
好吧，我不打算使用一個變量只是要在這裡做到這一點。

78
00:08:12,130 --> 00:08:14,640
堅定的監聽器。

79
00:08:15,250 --> 00:08:16,140
點擊。

80
00:08:16,550 --> 00:08:17,930
所以這是第一個參數。

81
00:08:17,930 --> 00:08:25,560
第二個就是我們要就這樣運行的功能。

82
00:08:25,880 --> 00:08:27,410
而且我要開始。

83
00:08:27,680 --> 00:08:35,720
我們只是做記錄以及是點擊一個控制台，你知道。

84
00:08:35,810 --> 00:08:37,210
這是被動語態。

85
00:08:37,250 --> 00:08:38,050
餿主意。

86
00:08:38,300 --> 00:08:39,270
讓我們做。

87
00:08:39,460 --> 00:08:43,550
你點擊了UL得多好。

88
00:08:43,880 --> 00:08:44,520
好。

89
00:08:44,720 --> 00:08:48,430
因此，讓我們保持開放的控制台，讓我們點擊UL。

90
00:08:48,980 --> 00:08:50,420
但是，我們如何將點擊油。

91
00:08:50,450 --> 00:08:53,090
由於該井有它內部的三個盟友。

92
00:08:53,120 --> 00:08:55,290
UL的是這整個事情就在這裡。

93
00:08:55,320 --> 00:09:00,890
因此，任何快不要緊，我在剛才的地方都行之有效其盟友。

94
00:09:01,040 --> 00:09:02,820
你可以看到數量遞增在這裡。

95
00:09:02,930 --> 00:09:07,150
就做好了任何快速它會執行這個控制台點日誌。

96
00:09:08,120 --> 00:09:14,290
因此，讓我們刷新一次，這一次讓我們說，我想改變自己的盟友。

97
00:09:14,300 --> 00:09:17,540
當我點擊一個單獨的盟友我想要的東西發生。

98
00:09:17,960 --> 00:09:19,400
有這樣做的幾種方法。

99
00:09:19,420 --> 00:09:26,360
而且我們要開始僅僅是附加一個監聽器，每個盟友抬起頭最簡單的一種。

100
00:09:26,360 --> 00:09:32,940
我們最終將做的是附加一個監聽器UL，然後該偵聽器內。

101
00:09:32,990 --> 00:09:39,250
我們要檢測哪些具體躺在裡面的UL被點擊上的所有一個Lessner。

102
00:09:39,250 --> 00:09:55,570
不過現在我們要添加一個單獨的監聽器，每一個謊言，所以我們需要通過選擇盟軍開始讓我們的盟友等於文檔點queery選擇所有的盟友確保我們有他們所有。

103
00:09:55,570 --> 00:09:59,040
那麼好吧，我們需要為循環做。

104
00:09:59,210 --> 00:10:02,190
因此，對於VAR我等於零。

105
00:10:02,410 --> 00:10:04,880
請記住，我說我們會做這一切的時候。

106
00:10:04,880 --> 00:10:14,740
所以我不到盟友長度加我加就這樣。

107
00:10:15,050 --> 00:10:20,600
然後這裡裡面我們實際上是將一個偵聽器添加到每一個人的盟友。

108
00:10:20,840 --> 00:10:21,940
所以，看起來像這樣。

109
00:10:21,960 --> 00:10:39,220
伊利斯我這樣為我們提供了具體的盟友，事件偵聽器點擊功能就是這樣，做這一點。

110
00:10:39,770 --> 00:10:41,920
然後，我們需要的代碼運行。

111
00:10:42,320 --> 00:10:49,250
讓我們改變被點擊了盟友的顏色，讓我們只是改變它是紫色的。

112
00:10:49,250 --> 00:10:51,250
因此，我們有一些不同的選擇。

113
00:10:51,290 --> 00:10:54,600
我需要做的是指被點擊的盟友。

114
00:10:54,800 --> 00:11:05,320
所以，我能做到這一點的盟友我雖然因為有這樣做的更簡單的方法就是用這個關鍵字，它不是一個真正的偉大的解決方案。

115
00:11:05,680 --> 00:11:23,100
因此，一個聽眾的關鍵字這裡面指的是被點擊的項目，或者是在徘徊的項目或項目的按鍵發生在哪裡，以前權利在事件無論任何的選擇有雲的元素是什麼這指。

116
00:11:23,140 --> 00:11:30,640
所以，我可以寫那種顏色等於紫色此點的風格。

117
00:11:31,000 --> 00:11:33,140
而實際上這件事情更加明顯。

118
00:11:33,230 --> 00:11:34,150
這是一個小的字體。

119
00:11:34,150 --> 00:11:36,670
因此，讓我們做的粉紅色就這樣。

120
00:11:37,040 --> 00:11:38,500
我回車。

121
00:11:38,500 --> 00:11:46,020
沒有立即發生，但如果我點擊的盟友，你可以看到它的變化是粉紅色。

122
00:11:47,410 --> 00:11:53,960
如果我一直點擊不斷變化粉色你就不能告訴。

123
00:11:54,080 --> 00:12:03,670
所以這裡選擇了一堆東西通過他們單獨循環，並添加事件監聽到他們每個人的這種模式真的很常見的。

124
00:12:03,710 --> 00:12:11,170
我們要看到它在，我們在未來的幾個項目，所有的時間。

125
00:12:11,270 --> 00:12:20,830
我會在這裡提到的最後一件事是，你並不總是需要使用像我們在這裡做你寫帶括號的功能，你不給它一個名稱的匿名函數。

126
00:12:20,990 --> 00:12:22,330
你不必這樣做。

127
00:12:22,370 --> 00:12:25,790
您可以單獨申報像我在這裡做了一個名為功能。

128
00:12:26,090 --> 00:12:33,890
職能轉變文本，然後所有我們需要做的是說按鈕添加事件偵聽器，或者單擊，然後我們給它更改文本。

129
00:12:34,070 --> 00:12:39,890
請注意，我們沒有括號後來因為我會立即執行函數，它是我們想要的不是。

130
00:12:40,180 --> 00:12:51,100
所以，我們只是通過這個功能我們基本上傳遞的內容，以這個快速聽者的價值，並說這是我要你當用戶點擊這個按鈕運行函數。

131
00:12:51,190 --> 00:12:52,810
但不要運行它只是還沒有。

132
00:12:52,820 --> 00:12:55,350
因此，這兩個將工作完全一樣的。

133
00:12:55,370 --> 00:12:57,030
這只是一個偏好的問題。

134
00:12:57,190 --> 00:13:00,830
在大多數情況下有，我們可能稍後會遇到一些差異。

135
00:13:00,880 --> 00:13:02,980
我更喜歡用這個。

136
00:13:03,230 --> 00:13:10,160
當我不會用匿名函數的唯一情況是，如果我需要到別的地方重新使用該代碼時鐘聽眾之外。

137
00:13:10,150 --> 00:13:22,600
所以，如果我想單獨運行它自己或我想，而不是運行它的另一個快速監聽而不是重複這個功能我想給它一個名稱，然後複製流向何方我用它兩倍的名字。

138
00:13:23,060 --> 00:13:30,650
行，所以接下來你會得到一個機會做快速使用威斯納的部分，我們已經在過去幾年視頻學到的東西一些簡單的練習。