1
00:00:00,510 --> 00:00:01,810
よろしくお願いします。

2
00:00:01,860 --> 00:00:07,110
 

3
00:00:07,110 --> 00:00:14,070
このビデオでは、これまで、さまざまな種類のイベントについて少し話したいと思いますが、これまでのところ、クリックイベントと、スコアキーパーアプリのテキスト入力または数値入力で使用した変更イベントが発生しました。

4
00:00:14,070 --> 00:00:15,640
 

5
00:00:15,780 --> 00:00:18,930
私はMを導入することから始めるつもりです。 B. A. イベント参照。

6
00:00:18,930 --> 00:00:20,720
それは私がここにいるWebページです。

7
00:00:20,940 --> 00:00:26,790
また、このWebページは、DOM APIによって認識されるすべてのさまざまなイベントへの参照です。

8
00:00:26,910 --> 00:00:30,840
私たちが下にスクロールすると、そこにいくつあるかだけで驚くかもしれません。

9
00:00:31,260 --> 00:00:36,570
そして、実際には、次の練習で、いくつのコードがあるのか​​を数えるだけで、短所のジオメトリを使用するという楽しい実践的な例があります。

10
00:00:36,570 --> 00:00:41,040
 

11
00:00:41,310 --> 00:00:45,990
 

12
00:00:45,990 --> 00:00:53,490
 

13
00:00:53,520 --> 00:01:00,120
だからあなたは何人あるかを数えようとしていますが、今はちょうど1トンがあることを知っています。ドラッグアンドドロップのようなものを常時使用する10個までの多分おそらく5〜ホバリングイベントのクリックイベントはキープレスイベントをダブルクリックすることもありますが、そうでない場合は、あまり使われないものが決して使用されません。

14
00:01:00,120 --> 00:01:04,780
しかし、このWebページには、決して使用することのない非常に多くのイベントが存在することがわかります。

15
00:01:05,190 --> 00:01:09,660
 

16
00:01:09,660 --> 00:01:10,510
 

17
00:01:10,740 --> 00:01:15,240
そして、このビデオでは、マウスを使って要素をホバリングするようなホバリングと関係がある特に2つのイベントに焦点を当てます。

18
00:01:15,240 --> 00:01:16,980
そしてそれらはマウスオーバーとマウスアウトと呼ばれています。

19
00:01:17,100 --> 00:01:20,490
だから私は単純なアプリケーションを持っています。私は新しいファイルでその年齢にするよう呼び出されています。私は定期的な定型文を追加するだけです。これは完全なTo

20
00:01:20,790 --> 00:01:26,550
Doリストにはなりません。

21
00:01:26,580 --> 00:01:31,910
私たちは新しいものを追加することはできませんし、3〜4人の味方を持つULを持つことになるでしょう。

22
00:01:31,920 --> 00:01:37,950
物事を洗う猫は猫を食べるようなものです。私たちは犬を飼って救います。

23
00:01:38,070 --> 00:01:51,060
だから私たちは3つのことをしており、それだけで今必要なのです。

24
00:01:51,060 --> 00:01:54,340
そして私がしたいこと。

25
00:01:54,630 --> 00:01:55,530
私はこれをブラウザで開くつもりです。

26
00:01:55,530 --> 00:01:58,590
 

27
00:01:58,590 --> 00:02:04,380
私はクリックすることができるようにしたいと思うし、それはアイテムを行うには灰色でなければならないかもしれないし、たぶんそれがそれを通る行を打つ。

28
00:02:04,380 --> 00:02:05,190
しかし、私はまた、ホバーできるようにしたいと私は私がホバリングしているかを知りたい。

29
00:02:05,340 --> 00:02:09,250
だから私はこれらのいずれかの上にカーソルを置くと、この素晴らしいユーザーのフィードバックを得る。

30
00:02:09,270 --> 00:02:12,960
 

31
00:02:12,960 --> 00:02:18,210
たぶんあなたはそれを色や太字に変更するだけで、それは緑色にすることによって開始され、これらのホバーイベントを使用して、あなたのユーザーのためにできる多くの素晴らしい効果があります。

32
00:02:18,210 --> 00:02:21,640
だから私はファイルを作る必要があるのに、実際にjavascriptを書く前にこれを表示します。

33
00:02:21,810 --> 00:02:26,400
だから私は新しいファイルを保存するつもりです。私はそれを呼び出すでしょう。

34
00:02:26,940 --> 00:02:31,010
はい。

35
00:02:31,180 --> 00:02:32,200
 

36
00:02:32,520 --> 00:02:44,580
そして、いつものように私は警戒を繋げてここに戻って、下のスクリプトを追加しました。私たちの情報源は、デュースドットJに等しいです。 S. 私たちは救いやリフレッシュを行い、警告を発する。

37
00:02:44,580 --> 00:02:51,520
それはそれが働いていることを意味します。

38
00:02:51,630 --> 00:02:53,190
 

39
00:02:53,850 --> 00:02:58,710
私が言及したその最初のイベントに行きましょう。私たちが最初にやるべきことは、操作する前に何かを選択することです。

40
00:02:58,770 --> 00:03:00,100
だから私は最初の嘘にそれをやって始めます。

41
00:03:00,120 --> 00:03:03,050
 

42
00:03:03,180 --> 00:03:12,810
だから私は最初の味方のECOドキュメントを使用するつもりです。私はクエリセレクタを実行します。これはクエリセレクタをすべて実行しなかったので、これは私に最初の嘘を与えたことを思い出してから、イベントリスナーを追加します最初の味方へ

43
00:03:12,810 --> 00:03:18,210
 

44
00:03:18,270 --> 00:03:19,560
 

45
00:03:19,740 --> 00:03:27,750
そこで、まずイベントリスナーを追加して、リスンしているイベントをマウスでクリックしないようにしました。

46
00:03:28,290 --> 00:03:30,060
それからコールバック関数を与えます。

47
00:03:30,060 --> 00:03:32,350
マウスオーバーが動作する方法は、何かの上にマウスを乗せるようになるとすぐに開始されます。

48
00:03:33,300 --> 00:03:38,650
 

49
00:03:38,790 --> 00:03:46,170
だから私がこの最後の同盟国と一緒に働いていたら、私の上にマウスを置いて、今、今、もう一人、今、そしてこの最初の人に火を付けるでしょう。

50
00:03:46,170 --> 00:03:47,880
それはホバリングがいつ始まるかについてです。

51
00:03:47,880 --> 00:03:50,760
 

52
00:03:50,910 --> 00:03:57,570
 

53
00:03:59,130 --> 00:04:05,730
最初はイベントリスナーのマウスオーバーを追加し、コールバックマウスの代わりにログを作成し、コンソールを開くと最初の同盟者にしか行かなかったことを記憶しています。そこでマウスオーバーします。

54
00:04:05,730 --> 00:04:06,950
また、毎回連続して発砲しているわけではないことに注意することも重要です。

55
00:04:07,080 --> 00:04:11,610
これ以上のことは、要素の上にカーソルを置くと実際に始まります。

56
00:04:11,660 --> 00:04:16,050
 

57
00:04:16,080 --> 00:04:20,610
それは、コールバックでコードが何であっても、常にロギングしていることを常に知っているわけではないので便利です。

58
00:04:20,610 --> 00:04:21,770
最初にマウスオーバーすると発生します。

59
00:04:21,780 --> 00:04:24,530
だから、単にロギングをキャンセルするのではなく、同盟国の色を変更しようとします。

60
00:04:24,900 --> 00:04:29,660
緑にしましょう。

61
00:04:29,670 --> 00:04:30,640
その上にマウスを置くと緑色に変わります。

62
00:04:30,720 --> 00:04:32,880
 

63
00:04:32,880 --> 00:04:43,870
だから私たちは最初の同盟のドットスタイルを行う必要があります。色は緑と同じです。私たちはリフレッシュを保存して、私は彼をもう少し大きくし、これをもう少し大きくして、

64
00:04:43,880 --> 00:04:49,950
 

65
00:04:49,950 --> 00:04:50,800
そして私が離れて行くと、それは私たちが望むものではない緑のままです。

66
00:04:51,240 --> 00:04:55,300
これをホバー効果にしたいだけです。

67
00:04:55,410 --> 00:04:57,110
だから私が味方に乗ると緑色に変わります。

68
00:04:57,150 --> 00:04:59,460
 

69
00:04:59,490 --> 00:05:05,010
しかし、私はそれを停止するときにそれは黒になることを実際に別のイベントが必要とそのイベントは私たちのホバーが終わったときに起動します。

70
00:05:05,010 --> 00:05:07,380
だから我々はこの要素を残して、それはマウスと呼ばれるので、我々は最初に同じことをやろうとしている。

71
00:05:07,410 --> 00:05:13,730
しかし、イベントLessnerマウスアウト。

72
00:05:14,090 --> 00:05:18,280
そしてコールバック関数を呼び出すと、最初のフライスタイルの攻撃カラーを作成して黒に戻します。

73
00:05:19,680 --> 00:05:27,510
 

74
00:05:28,080 --> 00:05:37,130
ちょうどそのようにして、私たちがリフレッシュすれば、それは緑色になることがわかり、次にマウスが緑色の上に黒とマウスに戻ります。

75
00:05:37,130 --> 00:05:39,590
 

76
00:05:40,020 --> 00:05:45,000
だから今我々はホバリングしているものが基本的に選択されていることを示すこの小さなホバー効果を得る。

77
00:05:45,190 --> 00:05:46,960
それでは、これをすべての単一の嘘のために働かせましょう。

78
00:05:46,950 --> 00:05:50,130
それは我々がする必要があるいくつかの小さな変更です。

79
00:05:50,160 --> 00:05:52,230
そして最初のものはすべての同盟国を選ぶ必要があるということです。

80
00:05:52,260 --> 00:05:55,460
 

81
00:05:55,510 --> 00:06:02,940
3つの同盟国とのリストを私たちに与えるので、遠い嘘であることが非常に変わることになるでしょう。

82
00:06:02,940 --> 00:06:05,070
そして残念ながら、残念なことに、うまく行かないイベントリスナーだけでは、このことを行うことはできません。

83
00:06:05,400 --> 00:06:10,690
forループを実行する必要があります。

84
00:06:11,160 --> 00:06:14,860
私はそのリンクに嘘をつきません。

85
00:06:15,090 --> 00:06:18,950
プラスプラス。

86
00:06:19,080 --> 00:06:20,710
 

87
00:06:20,870 --> 00:06:25,150
 

88
00:06:25,140 --> 00:06:30,100
そして、うまくいけば、イベントを追加したり、ループの代わりに何かを操作したりして、イベントを追加するのが少し楽になり始めたら、それらのバンドルを選択してからループし、個別に何かをやります。

89
00:06:30,090 --> 00:06:30,990
 

90
00:06:31,180 --> 00:06:35,490
私は、いくつかのビデオを前に言ったように、本当に共通のパターンは本当に重要なので、私たちはそれに慣れ始める。

91
00:06:35,500 --> 00:06:36,470
だからここの内部ではなく、まずはイベントリスナーを追加します。

92
00:06:36,490 --> 00:06:40,550
私たちは、同盟国と協力して、私たちの個人味方に目を向けています。

93
00:06:40,650 --> 00:06:45,760
そして、私はこのコードをコピーして、このコードに問題があります。

94
00:06:45,930 --> 00:06:51,950
私はそれが動作することを意味しますが、私たちが望むように動作しません。

95
00:06:51,960 --> 00:06:55,090
イベントリスナーを各同盟国に追加しています。

96
00:06:55,360 --> 00:07:00,450
しかし、私たちがその上にマウスを乗せたとき、私たちは最初のアライ・ドット・スタイルの黒色を変えているだけです。

97
00:07:00,960 --> 00:07:06,430
最初の嘘はもう定義されていないので、実際にはうまくいきません。

98
00:07:06,540 --> 00:07:09,800
名前を変更しました。

99
00:07:09,810 --> 00:07:10,860
しかし、それは私たちが望んでいたものではありません。

100
00:07:11,040 --> 00:07:12,740
マウスオーバーイベントが発生したことを肩を並べた味方になることを願っています。

101
00:07:12,750 --> 00:07:17,220
ですから、これを「これ」という言葉に変更することができます。

102
00:07:17,440 --> 00:07:21,110
 

103
00:07:21,270 --> 00:07:26,400
イベントリスナーの代わりにこのキーワードが、イベントがトリガーされたアイテムまたは要素を参照することを覚えておいてください。

104
00:07:26,400 --> 00:07:28,020
だから、このスタイルは同じ色ですが、このコードをもう一度複製します。

105
00:07:28,260 --> 00:07:33,210
 

106
00:07:33,850 --> 00:07:41,940
しかし、マウスの代わりにマウスを出すと、グリーンに行く代わりに黒に戻り、その後これを取り除き、リフレッシュしてそこに行くことができます。

107
00:07:42,630 --> 00:07:48,780
私たちは、ちょっとしたホバー効果を持っています。

108
00:07:48,880 --> 00:07:50,710
彼らが最後に話すのは、これをもう少し完了させるためにクリックリスナーを追加することです。

109
00:07:51,060 --> 00:07:55,830
だから私はイベントリスナーのクリックまたはコールバック関数を持っていたと思ったのと同じこと。

110
00:07:56,230 --> 00:08:07,150
ここでやることはクラスを使うことです。

111
00:08:07,480 --> 00:08:10,610
だからクラスを最初に追加するつもりです。

112
00:08:10,830 --> 00:08:12,910
 

113
00:08:12,900 --> 00:08:19,520
それは存在しませんが、私はこれがクラスリストを行い、トグルする開始クラスリストを切り替えると言うつもりです。

114
00:08:19,600 --> 00:08:20,290
そして、私たちはクラスを完成と呼ぶだけです。

115
00:08:20,560 --> 00:08:22,680
だから、私はこれらのうちの1つをクリックすることができ、グレーアウトして取り消し線効果を持たせる必要があります。

116
00:08:23,110 --> 00:08:29,930
そして、クラスが定義されていないにもかかわらず、まだ追加されているので、コンソールを開いて、これらのうちの1つを調べてみましょう。

117
00:08:30,030 --> 00:08:35,920
 

118
00:08:35,910 --> 00:08:38,720
 

119
00:08:39,070 --> 00:08:44,080
そして、実際にそれをクリックしてみましょう。最初のものを見るかクリックすることができます。緑色と黒色が色分けされています。

120
00:08:44,080 --> 00:08:48,470
しかし、この最初のボタンをクリックすると、クラスが追加されたことがわかります。

121
00:08:48,490 --> 00:08:52,920
それから、もう一度クリックして消えます。

122
00:08:52,920 --> 00:08:55,740
だから今はクラスを定義するだけです。

123
00:08:55,750 --> 00:08:58,070
それでは、今やってみましょう。

124
00:08:58,330 --> 00:08:59,290
 

125
00:08:59,380 --> 00:09:07,350
私は昇華して新しいファイルを作成し、これを保存するつもりです。それはC Sです。最初に行うのは、クラスの定義です。

126
00:09:07,360 --> 00:09:10,310
 

127
00:09:10,950 --> 00:09:16,960
そして、私はテキストデコレーションで行う取り消し線効果を与え、その線を設定し、不透明度を変更して不透明度を0にします。 5と保存します。

128
00:09:16,950 --> 00:09:24,450
 

129
00:09:24,820 --> 00:09:30,160
そして、もちろん、これをリンクして評価するか、彼と一緒にファイルを保存する必要があります。これは、Dueの巨大なタグのようなものです。保存することができます。

130
00:09:30,900 --> 00:09:33,990
さあ、それを試してみましょう。

131
00:09:34,000 --> 00:09:35,440
あなたはページをリフレッシュします。

132
00:09:35,660 --> 00:09:36,830
私はホバー。

133
00:09:36,850 --> 00:09:37,470
ですから、黒と緑の色を変える2つのイベントがあります。

134
00:09:37,500 --> 00:09:41,520
そしてクリックすると、取り消し線効果が得られます。

135
00:09:41,520 --> 00:09:45,360
そして、この線も通り抜​​ける。

136
00:09:45,540 --> 00:09:47,900
 

137
00:09:48,120 --> 00:09:53,550
私はいくつかの小さな変更がありますが、私たちがjavascriptファイルに戻った場合は、ここで手動で色を変更するのではなく、最初のものがあります。

138
00:09:53,560 --> 00:09:56,590
それを緑と黒に変更する。

139
00:09:56,640 --> 00:09:58,350
私は自分のクラスでそれをやる方がまだ良いと思う。

140
00:09:58,600 --> 00:10:00,800
 

141
00:10:00,850 --> 00:10:07,240
だから、私は新しいクラスを作るつもりです。私はこれを選択して呼ぶつもりです。それから、選択されたテキストや色が緑のようになるはずです。

142
00:10:07,240 --> 00:10:12,060
そして、私たちはJavascriptで行くつもりです。

143
00:10:12,310 --> 00:10:13,880
そして、私たちが望むすべての上にマウスを置くと、このクラスリストが選択されたと言えます。

144
00:10:13,990 --> 00:10:21,250
 

145
00:10:23,160 --> 00:10:29,340
そして、これは、私たちがJavaScriptを使って個々のスタイルを操作するのではなく、JavaScriptを使用してC

146
00:10:29,350 --> 00:10:36,250
Sの一部をオンにすることができ、SASが実際にスタイリングを担当するという懸念の分離に戻ってきます。

147
00:10:36,250 --> 00:10:38,170
 

148
00:10:38,460 --> 00:10:44,550
だから私たちが上にマウスを置いたときに選択されたクラスを与え、私たちが出て行ったり、私たちが混乱したときに、このダムクラスリストを削除したり、リフレッシュを保存すれば、

149
00:10:44,560 --> 00:10:55,040
私たちはクリックストライクをクリックします。

150
00:10:55,530 --> 00:10:59,460
大丈夫。

151
00:11:00,080 --> 00:11:00,590
リストには少ししかありません。

152
00:11:00,610 --> 00:11:02,260
これはやや良い方法です。

153
00:11:02,740 --> 00:11:05,000
機能的には同じように見えます。

154
00:11:05,050 --> 00:11:06,390
スタイルを追加して調整するのではなく、クラスを使用する方が良い方法です。

155
00:11:06,420 --> 00:11:11,720
だからここでまとめてみると、マウスオーバーとマウスが2つの新しいイベントを見た。

156
00:11:11,740 --> 00:11:16,270
また、このキーワードを使用したループの代わりにイベントを設定する方法もいくつかあります

157
00:11:16,530 --> 00:11:21,690