돌아 오신 걸 환영합니다.
이 비디오에서는 지금까지 텍스트 입력이나 스코어 키퍼 앱의 숫자 입력에 사용 된 클릭 이벤트와 변경 이벤트를 만난 지금까지 여러 유형의 이벤트에 대해 조금 더 이야기하고 싶습니다.
M.B.A. 이벤트 참조를 소개하는 것으로 시작하겠습니다.
그래서 제가 여기에있는 웹 페이지입니다.
그리고이 웹 페이지는 DOM API에 의해 인식되는 모든 다른 이벤트에 대한 참조입니다.
그리고 우리가 아래로 스크롤하면 얼마나 많은 사람들이 있는지 놀랄 것입니다.
그리고 실제로 저는 다음 연습에서 몇 개의 코드를 작성하여 얼마나 많은 것들이 존재하는지 계산해 보도록하겠습니다. 단점의 기하학을 사용하는 재미있는 실용적인 예제입니다.
그래서 당신은 얼마나 많은 사람들이 있을지 계산할 것입니다.하지만 지금은 단지 그들 중 많은 사람들이 있다는 것을 알고 있습니다. 아마도 드래그 앤 드롭과 같은 것들을 항상 사용할 수있는 5 개 또는 6 개의 아마 보통 10 개까지의 것들이있을 것입니다. 유혹 이벤트 클릭 이벤트는 아마도 키 누르기 이벤트를 두 번 클릭합니다. 그렇지 않으면 더 많은 애매한 것들을 사용하지 않거나 프로젝트에서 한 번만 사용할 것입니다.
그러나이 웹 페이지는 우리가 결코 사용할 수 없을만큼 많은 사건이 있다는 것을 아는 것이 좋습니다.
그리고이 비디오에서는 특별히 마우스를 가져 가면 마우스로 요소 위에 마우스를 올려 놓는 것과 관련된 두 가지 이벤트에 집중할 것입니다.
그리고 그것들은 마우스 오버와 마우스 아웃이라고 불립니다.
그래서 간단한 응용 프로그램을 가지고 있으며, 새로운 파일에서 그 나이를하도록 요청했습니다. 그리고 나는 정기적 인 상용구를 추가하려고합니다. 그리고 이것은 To Do리스트가 될 수 없습니다.
우리는 새로운 것을 추가 할 수 없거나 3 ~ 4 명의 동맹국을 가진 UL을 가질 것입니다.
고양이를 씻어 고양이처럼 먹으면 개 고양이에게 먹이를주고 구할 것입니다.
그래서 우리는해야 할 세 가지가 있습니다.
그리고 내가하고 싶은 일.
이걸 브라우저에서 열어 보겠습니다.
나는 클릭 할 수 있기를 원하고 회색으로 항목을해야하고 어쩌면 취소 선을 통해 선을 그어 넣어야합니다.
그러나 나는 또한 공중 선회 할 수 있기를 원하며 나는 어느 선상에 선회하고 있는지 알고 싶다.
그래서이 중 하나를 가리키며 멋진 사용자 의견을 얻습니다.
어쩌면 색상을 변경하거나 굵은 글씨를 녹색으로 만듦으로써 시작할 것이고,이 호버 이벤트를 사용하여 사용자를 위해 할 수있는 많은 좋은 효과가있을 것입니다.
그래서 우리는 파일을 만들 필요가 있지만 자바 스크립트를 실제로 작성하기 전에 바로 지금 보여 드리겠습니다.
그래서 저는 새 파일을 저장하려고합니다. 나는 그것을 호출하도록 할 것입니다.
예.
그리고 언제나처럼 나는 내 경계가 연결되어서 여기로 돌아가서 아래쪽에 스크립트를 추가하고 우리 소스는 듀스 점 J.S.과 같습니다. 저장하거나 새로 고침하고 알림을받습니다.
그것은 그것이 작동 중임을 의미합니다.
제가 언급 한 첫 번째 사건에 대해 생각해 봅시다. 먼저 우리가 조작 할 수 있기 전에 무언가를 선택해야합니다.
그래서 저는 첫 번째 거짓말까지하기 만하면됩니다.
그래서 저는 var first ally ECOs 문서를 사용할 것이고 쿼리 선택기 동맹을 할 것이고 이것은 쿼리 선택기를 모두 수행하지 않았기 때문에 이것이 내게 거짓말을하게한다는 것을 기억하고 내 이벤트 리스너를 추가 할 것입니다 먼저 동맹국에.
그래서 우리는 먼저 동맹국에 이벤트 리스너를 추가하고 우리가 듣고있는 이벤트는 마우스를 클릭하지 않는 것입니다.
그런 다음 콜백 함수를 제공합니다.
마우스 오버가 작동하는 방식은 무언가를 가리 키기 시작하자 마자 시작됩니다.
그래서 제가이 마지막 동맹국과 일한다면 그것은 바로 지금 그리고 지금 그리고 두 번째 그리고 지금 그리고이 첫 번째 것에서 발사 될 것입니다.
그래서 호버가 시작될 때입니다.
먼저 이벤트 리스너 마우스 오버를 추가하고 콜백 마우스 대신 로그를 작성하고 콘솔을 새로 고치면 첫 번째 동맹국에게만 저장하고 마우스 오버를 수행한다는 것을 기억하십시오.
또한 매 시간마다 계속해서 발사되는 것이 아니라는 점을 알아 두는 것이 중요합니다.
우리가 이것을 끝났다고 생각하는 것은 요소 위에 마우스를 가져 가면 실제로 시작됩니다.
따라서 콜백에서 코드가 무엇이든지 지속적으로 로깅하는 것을 계속 알지 못하는 것이 유용합니다.
처음에 마우스를 가져갈 때만 발생합니다.
따라서 단순히 로깅을 취소하는 대신 동맹국의 색을 변경하는 작업을 수행하십시오.
녹색으로 만들어 봅시다.
마우스를 가져 가면 녹색으로 변합니다.
그래서 우리는 첫 번째 동맹점 스타일을 할 필요가 있습니다. 그 색은 녹색과 같습니다. 우리는 새로 고침을 저장하고 이제는 그를 더 크게 만들고 더 큰 여기를 만들 것입니다.
그리고 제가 사라질 때 그것은 우리가 원하는 것이 아닌 녹색을 유지합니다.
우리는 이것이 호버 효과가되기를 바랄뿐입니다.
그래서 내가 동맹국을 가리키면 녹색이됩니다.
그러나 멈추었을 때 흑인으로 되돌아 가면 실제로 다른 이벤트가 필요하며 그 이벤트는 호버가 끝나면 시작됩니다.
그래서 우리는이 요소를 떠날 때 Mouse라고 부릅니다. 그래서 우리는 먼저 똑같은 것을 할 것입니다.
그러나 이벤트 Lessner 마우스 아웃.
그런 다음 콜백 함수와 첫 번째 비행 스타일 공격 색상을 만들어 검정색으로 다시 설정합니다.
우리가 새로 고침하면 녹색으로 변하는 것을 볼 수 있습니다. 그런 다음 마우스가 녹색으로 바뀌고 검정색으로 바뀝니다.
이제 우리는이 작은 호버 효과를 얻음으로써 우리가 무엇을 할 것인가를 선택하게됩니다.
자 이제 한 번씩 거짓말을하도록하자.
그것은 우리가해야 할 몇 가지 작은 변화 일뿐입니다.
그리고 첫 번째는 모든 동맹국을 선택해야한다는 것입니다.
우리는 3 명의 동맹국과 함께 목록을 제공 할 수 있도록 모든 거짓말 쟁이들에 대한 문서화 된 질의 문을 매우 바꿀 것입니다.
그리고 불행하게도 우리는 작동하지 않는 이벤트 리스너 만이 거짓말을 할 수 없습니다.
우리는 for 루프를 4 개의 0과 같게 할 필요가 있습니다.
나는 그 거짓말보다 적다.
플러스 플러스.
이벤트를 추가하거나 루프 대신 무언가를 조작하는 것이 좀 더 편하게 느껴지기를 바랍니다. 루프를 선택하고 루프를 반복하여 루프를 돌리면 개별적으로 작업을 수행합니다.
마찬가지로 몇 가지 비디오 전에 정말 일반적인 패턴은 우리가 그것에 익숙해지기 시작하는 것이 중요하다고 말했듯이.
그래서 여기에 먼저 들어가기보다는 이벤트 리스너를 추가 할 것입니다.
우리는 동맹국의 눈과 동맹을 맺고 있기 때문에 우리의 개별 동맹국입니다.
그리고 나서이 코드를 복사하고이 코드에 문제가 있습니다.
내 말은 작동 하겠지만 우리가 원하는대로 작동하지 않을 것입니다.
우리는 각 동맹국에 이벤트 리스너를 추가 할 것입니다.
그러나 우리가 그들 중 어느 곳으로도 마우스를 가져 가면 첫 번째 동맹 점 스타일이 검은 색으로 바뀝니다.
그리고 첫 번째 거짓말은 더 이상 정의되지 않기 때문에 실제로 작동하지 않습니다.
우리는 이름을 바꿨다.
그러나 그것은 우리가 어쨌든 원했던 것이 아닙니다.
우리는 그것이 마우스 오버 이벤트가 발생했다는 것을 알았습니다.
그래서 우리는 this를 this라는 단어로 바꿀 수 있습니다.
이벤트 리스너 대신 키워드가 이벤트가 트리거 된 항목 또는 요소를 참조한다는 점을 기억하십시오.
이렇게이 작풍 그러나 색깔 동등한 스크린 및 그 후에 우리는 다만이 부호를 다시 복제 할 것이다.
그러나 마우스 오버 대신 마우스를 놓고 Green으로가는 대신 검정색으로 돌아갈 것입니다. 그러면 우리는 이것을 없애고 새로 고침 할 수 있습니다.
작은 호버 효과가 있습니다.
그래서 그들이 이야기 할 마지막 사항은 클릭 리스너를 추가하는 것입니다.
그래서 이벤트 리스너 클릭 추가 또는 콜백 함수가 있다고 생각했던 것과 같은 것입니다.
우리가 여기서하려고하는 것은 클래스를 사용하는 것입니다.
그래서 먼저 클래스를 추가 할 것입니다.
존재하지 않지만 클래스 목록을 말하고 시작 클래스 목록을 토글합니다.
그리고 우리는 수업을 완료라고합니다.
그래서 요점은 이것들 중 하나를 클릭 할 수 있습니다. 그리고 그레이 아웃과 취소 선 효과가 있어야합니다.
정의 된 클래스를 정의하지 않아도 콘솔이 열리는 것을 보여줄 수 있으므로이 클래스 중 하나를 검사합시다.
그리고 실제로 그것을 클릭합시다. 처음에는 녹색과 검정 색이 호버로 바뀌는 방식으로 볼 수 있습니다.
그러나이 첫 번째 버튼을 클릭하면 클래스가 추가 된 것을 볼 수 있습니다.
그런 다음 다시 클릭하면 사라집니다.
이제는 완료된 클래스를 정의해야합니다.
자 이제하자.
나는 숭고하고 새로운 파일을 만들겠습니다. 나는 이것을 Cs와 같이 저장하려고합니다. 그리고 우리가하는 첫 번째 일은 우리 수업을 정의하는 것입니다.
텍스트 장식을 사용하여 취소 선 효과를 부여하고 그 선을 설정하고 불투명도를 0.5로 변경하여 저장합니다.
그리고 당연히 당신은 이것을 평가하기 위해 링크해야 할 필요가 있습니다. 그 사람과 태그를 달아서 Del의 가장 귀중한 태그와 같은 파일을 저장하면 저장됩니다.
이제 테스트 해 봅시다.
페이지를 새로 고칩니다.
나는 맴 돕니 다.
두 가지 이벤트가 검은 색과 녹색으로 바뀝니다.
이제 클릭 만하면 취소 선이 적용됩니다.
그리고이 줄을 통해서.
몇 가지 작은 변경 사항이 있습니다. 그러나 자바 스크립트 파일로 돌아 가면 첫 번째 것은 수동으로 여기에서 색상을 변경하는 것입니다.
그것을 녹색과 검정색으로 바꿉니다.
나는 우리 자신의 반원들과 함께하는 것이 여전히 바람직하다고 생각한다.
그래서 저는 새로운 수업을 만들려고합니다. 나는이 수업을 선택하기로하고, 선택한 텍스트 나 색깔이 그렇게 녹색이어야한다고 말할 것입니다.
그리고 나서 우리는 자바 스크립트로 갈 것입니다.
그리고 우리가하고 싶은 모든 것 위에 마우스를 가져 가면이 클래스 목록에 선택 항목이 추가되었다고 말할 수 있습니다.
그리고 이것은 우리가 javascript가 개별 스타일을 조작하기를 원하지 않는 아이디어의 분리로 되돌아옵니다. 자바 스크립트를 사용하여 C S의 일부를 켜고 SAS가 실제로 스타일링을 담당하게됩니다.
그래서 그것은 우리가 마우스를 가져갈 때 선택된 클래스를 줄 것이고 우리가 떠나거나 우리가 혼란 스러울 때 우리는이 멍청한 클래스 목록을 제거 할 것입니다. 우리가 새로 고침을하면 꽤 잘 보일 것입니다.
우리는 우리가 취소 선을 얻는 것을 클릭합니다.
괜찮아.
리스트를 할 약간이 있습니다.
그래서 이것은 약간 더 좋은 방법입니다.
기능적으로는 동일하게 보입니다.
한 번에 하나씩 스타일을 추가하고 조정하는 것보다는 클래스를 사용하는 것이 더 나은 방법입니다.
여기에 요약하면 두 개의 새로운 이벤트 인 마우스 오버와 마우스가 보입니다.