1
00:00:00,510 --> 00:00:01,810
好歡迎回來。

2
00:00:01,860 --> 00:00:15,640
在這個視頻我想講一點點一些不同類型的事件，所以到目前為止，我們已經遇到的單擊事件，而我們在文本輸入或在比分門將應用多個輸入使用的更改事件。

3
00:00:15,780 --> 00:00:18,930
我打算通過引入M.B.A.事件引用啟動。

4
00:00:18,930 --> 00:00:20,720
所以這是網頁我在這裡。

5
00:00:20,940 --> 00:00:26,790
而這個網頁是對所有由該DOM API識別的不同事件的參考。

6
00:00:26,910 --> 00:00:30,840
如果我們向下滾動，你可能會對剛剛有多少驚訝。

7
00:00:31,260 --> 00:00:41,040
而實際上，我要你在接下來的練習只是寫一些代碼來統計有多少是使用利弊幾何形狀的樂趣實際的例子..

8
00:00:41,310 --> 00:01:04,780
所以，你要指望有多少，但現在只知道有一噸他們與大概有五六個可能高達10真正常用的，將使用所有的時間之類的拖放進行懸停事件的單擊事件也許雙擊按鍵事件但在其他很多比較模糊的人永遠不會使用或也許你會使用他們一次在一個項目中。

9
00:01:05,190 --> 00:01:10,510
但它是很好的了解，這個網頁中存在有，我們可能永遠不會甚至使用如此多的事件。

10
00:01:10,740 --> 00:01:16,980
而這個視頻，我將集中討論兩個事件特別是有這麼徘徊盤旋在用鼠標一個元素做。

11
00:01:17,100 --> 00:01:20,490
而那些被稱為鼠標和鼠標了。

12
00:01:20,790 --> 00:01:31,910
所以我有一個簡單的應用程序，我打算讓這就是所謂的做那個年紀他在我的新的文件，我只是要加我經常樣板，這不會是一個完整的任務列表。

13
00:01:31,920 --> 00:01:37,950
我們將不能夠添加新的或者說我們要做的是有一個UL三個或四個盟友。

14
00:01:38,070 --> 00:01:51,060
像貓洗東西餵貓咪，我們會做飼料貓狗和保存。

15
00:01:51,060 --> 00:01:54,340
因此，我們有我們的三個做的，這就是我們所需要的現在。

16
00:01:54,630 --> 00:01:55,530
而我想做的事情。

17
00:01:55,530 --> 00:01:58,590
我會在瀏覽器中打開此了。

18
00:01:58,590 --> 00:02:05,190
我希望能夠點擊，這應該是灰色不可用做項目，也許刪除線它把一條線通過它。

19
00:02:05,340 --> 00:02:09,250
但我也希望能夠懸停，我想知道我在上空盤旋哪一個。

20
00:02:09,270 --> 00:02:12,960
因此，正如我懸停在其中的一個，我得到這個漂亮的用戶反饋。

21
00:02:12,960 --> 00:02:21,640
也許你將不得不改變它的顏色或大膽將僅使其綠色，也有使用這些懸停事件，這麼多好的效果，你可以做你的用戶開始。

22
00:02:21,810 --> 00:02:26,870
所以，我會表明，現在才可以實際編寫任何JavaScript雖然我們需要使我們的文件。

23
00:02:26,940 --> 00:02:31,010
所以，我要保存新文件和我會打電話給它做的。

24
00:02:31,180 --> 00:02:32,200
是。

25
00:02:32,520 --> 00:02:51,520
和往常一樣，我有我的警報連接保存回到這裡和我們的腳本在底部添加和我們的源等於見鬼斑點J.S.我們會保存或刷新，我們得到了我們的警覺。

26
00:02:51,630 --> 00:02:53,190
這意味著，它的工作。

27
00:02:53,850 --> 00:03:00,100
讓我們在我提到，我們需要做的第一件事就是選擇的東西，才可以操縱第一個事件。

28
00:03:00,120 --> 00:03:03,050
所以我要去只是做給第一個謊言開始。

29
00:03:03,180 --> 00:03:19,560
所以我將使用VAR第一盟友的ECO文件，我會做一個查詢選擇盟友，記住這一點給我的第一個謊言，因為我沒有做的查詢選擇所有，然後我要加我的事件監聽器首先盟友。

30
00:03:19,740 --> 00:03:30,060
所以我們就先盟友添加事件偵聽器和我們正在傾聽不點擊它的鼠標事件。

31
00:03:30,060 --> 00:03:32,350
然後，我們給我們的回調函數。

32
00:03:33,300 --> 00:03:38,650
而且鼠標懸停作品它會立即啟用，我們開始徘徊在東西的方式。

33
00:03:38,790 --> 00:03:47,880
所以，如果我用這最後的盟友工作我的鼠標移到它會馬上解僱而現在，第二個和現在，這第一個。

34
00:03:47,880 --> 00:03:50,760
所以這是什麼時候的懸停開始。

35
00:03:50,910 --> 00:04:06,950
所以首先我要補充事件偵聽器鼠標懸停和我們只是做一個記錄，而不是回調鼠標，如果我們刷新打開我們的控制台記得我們只是它做的第一盟友和我們走，我們得到一個鼠標懸停。

36
00:04:07,080 --> 00:04:11,610
它也注意到它不是不斷地射擊，每一次很重要的。

37
00:04:11,660 --> 00:04:16,050
你知道我們在這一點時，我們在一個元素懸停實際開始的。

38
00:04:16,080 --> 00:04:21,770
所以，讓我們不經常你知道不斷地記錄或任何代碼是我們在回調這是很有用的。

39
00:04:21,780 --> 00:04:24,530
它只是發生在我們鼠標移到最初。

40
00:04:24,900 --> 00:04:29,660
因此，而不是僅僅取消改變盟友的顏色記錄讓我們的工作。

41
00:04:29,670 --> 00:04:30,640
讓我們為綠色。

42
00:04:30,720 --> 00:04:32,880
因此，當你將鼠標懸停在它變為綠色。

43
00:04:32,880 --> 00:04:50,800
因此，我們需要做的顏色等於綠色第一的盟友點的風格和我們保存刷新，現在看我會讓他大一點，讓這裡做大這一點，如刷新我開始我的鼠標在它變為綠色。

44
00:04:51,240 --> 00:04:55,300
然後當我離開它保持綠色這是我們想要的不是。

45
00:04:55,410 --> 00:04:57,110
我們只是希望這是一個懸停效果。

46
00:04:57,150 --> 00:04:59,460
所以，當我懸停在盟友變成綠色。

47
00:04:59,490 --> 00:05:07,380
但是，當我停下來，又回到被黑要做到這一點，我們確實需要另一個事件，該事件在我們的懸停結束將閃光。

48
00:05:07,410 --> 00:05:13,940
所以，當我們離開這個元素，這就是所謂的鼠標出這麼我們打算做同樣的事情第一個盟友。

49
00:05:14,090 --> 00:05:18,280
但在事件Lessner鼠標了。

50
00:05:19,680 --> 00:05:27,960
然後我們的回調函數，我們只是做第一蒼蠅式的進攻色彩，並將其設置回黑色。

51
00:05:28,080 --> 00:05:39,590
就這樣，如果我們刷新你可以看到它走向綠色，然後鼠標移出追溯到黑色和鼠標移到綠色等。

52
00:05:40,020 --> 00:05:46,960
所以，現在我們得到這個小懸停效果，顯示我們什麼我們正在上空盤旋基本上選擇哪個做。

53
00:05:46,950 --> 00:05:50,130
所以，現在讓我們這對每一個謊言工作。

54
00:05:50,160 --> 00:05:52,230
這只是我們需要做一些小的改動。

55
00:05:52,260 --> 00:05:55,460
而其中第一個就是我們需要選擇的所有盟友。

56
00:05:55,510 --> 00:06:05,070
要改變非常變量要遠遠謊言記錄查詢所有信盟友，這樣給我們的三個盟友名單。

57
00:06:05,400 --> 00:06:11,170
然後當然很遺憾，我們不能僅僅做到這一點就在於，一個事件偵聽器不起作用。

58
00:06:11,160 --> 00:06:14,860
我們需要為我們的等於零的循環四個插座一個。

59
00:06:15,090 --> 00:06:18,950
我不到就在於該鏈接。

60
00:06:19,080 --> 00:06:20,710
加上加號。

61
00:06:20,870 --> 00:06:30,990
並希望你開始覺得舒服些這樣添加事件或操作什麼，而不是我們選擇了一堆它們的循環，然後通過我們環和我們做一些個別。

62
00:06:31,180 --> 00:06:36,470
就像我說的前真正的共同模式的一些影片真正重要的是我們開始變得舒服。

63
00:06:36,490 --> 00:06:40,550
所以，在這裡，而不是在做內第一個else我想補充事件偵聽器。

64
00:06:40,650 --> 00:06:45,760
我們正在與盟國支架眼睛工作，所以這是我們每一個人的盟友。

65
00:06:45,930 --> 00:06:51,950
然後我要去只是複製此代碼，並有一個與此代碼的問題。

66
00:06:51,960 --> 00:06:55,090
我的意思是它會工作，但它不會在我們想要的方式工作。

67
00:06:55,360 --> 00:07:00,450
會發生什麼事是我們要添加事件監聽到每個盟友的盟友。

68
00:07:00,960 --> 00:07:06,430
但是，當我們將鼠標放在任何人我們只改變第一個盟友點式的黑色。

69
00:07:06,540 --> 00:07:09,800
而實際上，因為第一個謊言，不再被定義它不會工作。

70
00:07:09,810 --> 00:07:10,860
我們改變名稱。

71
00:07:11,040 --> 00:07:12,740
但是，這不是我們想要的反正。

72
00:07:12,750 --> 00:07:17,220
我們希望它是被上空盤旋鼠標在事件發生的盟友。

73
00:07:17,440 --> 00:07:21,110
因此，我們可以改變這個字這一點。

74
00:07:21,270 --> 00:07:28,020
記住的關鍵詞此，而不是一個事件偵聽器是指產品或該事件被觸發的元件。

75
00:07:28,260 --> 00:07:33,210
所以這個風格，但彩色屏幕相同，然後我們就再次重複這個代碼。

76
00:07:33,850 --> 00:07:48,780
但是，而不是鼠標，我們會做一個老鼠出來，而不是去綠色，我們將回到黑色，然後我們就可以擺脫這種和刷新，我們走吧。

77
00:07:48,880 --> 00:07:50,710
我們有我們可愛的小懸停效果。

78
00:07:51,060 --> 00:07:56,210
因此，他們將談論是增加點擊監聽器的最後一件事情只是為了讓這一點更加完整。

79
00:07:56,230 --> 00:08:07,150
所以，同樣的事情就像我以為有事件監聽器點擊添加或一個回調函數。

80
00:08:07,480 --> 00:08:10,610
什麼我們要在這裡做的是使用一類。

81
00:08:10,830 --> 00:08:12,910
所以我打算先只添加類。

82
00:08:12,900 --> 00:08:20,290
它不存在，但我會說這確實類列表，並會做切換的切換起始類列表。

83
00:08:20,560 --> 00:08:22,680
而我們就調用類的完成。

84
00:08:23,110 --> 00:08:29,930
所以問題是，我可以在其中的一個點擊，它應該變成灰色，並有刪除的效果。

85
00:08:30,030 --> 00:08:38,720
而且即使我沒有做定義一個類，它仍然增加，所以我可以告訴你，打開控制台，讓我們檢查的這一個呢。

86
00:08:39,070 --> 00:08:48,470
然後讓我們實際點擊它，你可以看到或點擊您可以通過顏色的綠色和黑色的變化在這裡作為一個懸停的方式看到的第一個。

87
00:08:48,490 --> 00:08:52,920
但是，當我點擊這個第一個你可以看到它增加了類來完成。

88
00:08:52,920 --> 00:08:55,740
然後我再次點擊，它就會消失。

89
00:08:55,750 --> 00:08:58,070
所以，現在我們只需要定義完成的類。

90
00:08:58,330 --> 00:08:59,290
因此，讓我們做這件事情。

91
00:08:59,380 --> 00:09:10,310
我去了昇華，使一個新的文件，我要拯救這是做的就是將c SS，我們做的第一件事是定義我們的類來完成。

92
00:09:10,950 --> 00:09:24,450
而且我打算給它，我們用文字裝飾做了刪除線效果，我們設置該行通過，改變它的透明度，以便不透明度為0.5和保存。

93
00:09:24,820 --> 00:09:33,990
然後，當然，你需要鏈接這也開始評估或老化的他與他們一樣的文件標籤由於的gutsiest我們，我們可以節省。

94
00:09:34,000 --> 00:09:35,440
現在讓我們來測試一下。

95
00:09:35,660 --> 00:09:36,830
您刷新頁面。

96
00:09:36,850 --> 00:09:37,470
我徘徊。

97
00:09:37,500 --> 00:09:41,520
因此，得到的是兩個事件改變顏色黑色和綠色。

98
00:09:41,520 --> 00:09:45,360
現在我可以點擊，我們得到一個刪除線的效果。

99
00:09:45,540 --> 00:09:47,900
而該行通過為好。

100
00:09:48,120 --> 00:09:56,590
有一些小的變化我會做但是，如果我們回到我們的JavaScript文件中的第一個是，而不是在此手動改變顏色。

101
00:09:56,640 --> 00:09:58,350
更改它是綠色和黑色。

102
00:09:58,600 --> 00:10:00,800
我認為它仍然是更好地與我們自己的類來做到這一點。

103
00:10:00,850 --> 00:10:12,060
所以我要做一個新的類，我會打電話給這一個選擇，然後我會當它選定的文本或顏色應該是綠色的就這樣說。

104
00:10:12,310 --> 00:10:13,880
然後我們將使用JavaScript去。

105
00:10:13,990 --> 00:10:21,250
而當我們的鼠標在所有我們想要做的是說加選擇此類名單。

106
00:10:23,160 --> 00:10:38,170
而這又回到關注想法，分離，我們不希望我們的JavaScript的操縱個人風格，而我們可以使用JavaScript來打開我們的C SS和SAS的部分實際上將負責造型。

107
00:10:38,460 --> 00:10:55,040
這樣就會給它選擇的類，當我們將鼠標懸停在當我們離開或者當我們惹出來，我們會做選擇的這個愚蠢類列表刪除，如果我們保存刷新你可以看到它看起來相當不錯。

108
00:10:55,530 --> 00:10:59,460
我們點擊我們得到我們刪除線。

109
00:11:00,080 --> 00:11:00,590
好吧。

110
00:11:00,610 --> 00:11:02,260
有一個小待辦事項清單。

111
00:11:02,740 --> 00:11:05,000
因此，這是做一個稍微更好的方式。

112
00:11:05,050 --> 00:11:06,390
在功能上，它看起來是一樣的。

113
00:11:06,420 --> 00:11:11,720
它只是一個更好的做法是使用類，而不是一次添加和調整樣式之一。

114
00:11:11,740 --> 00:11:16,270
所以，總結一下我們在這裡看到了兩個新的事件鼠標懸停和鼠標了。