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
그래서 당신은 얼마나 많은 사람들이 있을지 계산할 것입니다.하지만 지금은 단지 그들 중 많은 사람들이 있다는 것을 알고 있습니다. 아마도 드래그 앤 드롭과 같은 것들을 항상 사용할 수있는 5 개 또는 6 개의 아마 보통 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
그래서 간단한 응용 프로그램을 가지고 있으며, 새로운 파일에서 그 나이를하도록 요청했습니다. 그리고 나는 정기적 인 상용구를 추가하려고합니다. 그리고 이것은 To Do리스트가 될 수 없습니다.

13
00:01:31,920 --> 00:01:37,950
우리는 새로운 것을 추가 할 수 없거나 3 ~ 4 명의 동맹국을 가진 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
그래서 우리는 파일을 만들 필요가 있지만 자바 스크립트를 실제로 작성하기 전에 바로 지금 보여 드리겠습니다.

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 first ally ECOs 문서를 사용할 것이고 쿼리 선택기 동맹을 할 것이고 이것은 쿼리 선택기를 모두 수행하지 않았기 때문에 이것이 내게 거짓말을하게한다는 것을 기억하고 내 이벤트 리스너를 추가 할 것입니다 먼저 동맹국에.

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
그래서 우리는이 요소를 떠날 때 Mouse라고 부릅니다. 그래서 우리는 먼저 똑같은 것을 할 것입니다.

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
우리는 3 명의 동맹국과 함께 목록을 제공 할 수 있도록 모든 거짓말 쟁이들에 대한 문서화 된 질의 문을 매우 바꿀 것입니다.

57
00:06:05,400 --> 00:06:11,170
그리고 불행하게도 우리는 작동하지 않는 이벤트 리스너 만이 거짓말을 할 수 없습니다.

58
00:06:11,160 --> 00:06:14,860
우리는 for 루프를 4 개의 0과 같게 할 필요가 있습니다.

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
그래서 여기에 먼저 들어가기보다는 이벤트 리스너를 추가 할 것입니다.

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
그래서 우리는 this를 this라는 단어로 바꿀 수 있습니다.

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
그러나 마우스 오버 대신 마우스를 놓고 Green으로가는 대신 검정색으로 돌아갈 것입니다. 그러면 우리는 이것을 없애고 새로 고침 할 수 있습니다.

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
나는 숭고하고 새로운 파일을 만들겠습니다. 나는 이것을 Cs와 같이 저장하려고합니다. 그리고 우리가하는 첫 번째 일은 우리 수업을 정의하는 것입니다.

92
00:09:10,950 --> 00:09:24,450
텍스트 장식을 사용하여 취소 선 효과를 부여하고 그 선을 설정하고 불투명도를 0.5로 변경하여 저장합니다.

93
00:09:24,820 --> 00:09:33,990
그리고 당연히 당신은 이것을 평가하기 위해 링크해야 할 필요가 있습니다. 그 사람과 태그를 달아서 Del의 가장 귀중한 태그와 같은 파일을 저장하면 저장됩니다.

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
몇 가지 작은 변경 사항이 있습니다. 그러나 자바 스크립트 파일로 돌아 가면 첫 번째 것은 수동으로 여기에서 색상을 변경하는 것입니다.

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
그리고 나서 우리는 자바 스크립트로 갈 것입니다.

105
00:10:13,990 --> 00:10:21,250
그리고 우리가하고 싶은 모든 것 위에 마우스를 가져 가면이 클래스 목록에 선택 항목이 추가되었다고 말할 수 있습니다.

106
00:10:23,160 --> 00:10:38,170
그리고 이것은 우리가 javascript가 개별 스타일을 조작하기를 원하지 않는 아이디어의 분리로 되돌아옵니다. 자바 스크립트를 사용하여 C S의 일부를 켜고 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
여기에 요약하면 두 개의 새로운 이벤트 인 마우스 오버와 마우스가 보입니다.