자바스크립트 이벤트

자바스크립트 이벤트란 무엇입니까?

JavaScript는 브라우저에서 일어나는 일을 듣고 반응하는 기능이 있습니다. Events are essentially "things" that happen on the page. . 그러면 JavaScript가 반응하는 것입니다. 이 게시물을 좋아하려면 버튼을 클릭하고, 더 많은 텍스트를 보려면 커서를 아래로 스크롤하고, 댓글을 작성하고, 페이지에 로그인하면 이 모든 일이 "듣기"위해 코드가 작성되었기 때문에 발생합니다. 그런 다음 브라우저가 적절하게 응답하도록 일이 발생합니다.

수신할 코드를 작성할 수 있는 모든 종류의 이벤트가 있습니다. MDN 문서로 이동하면 complete list.

사용자 이벤트의 일반적인 유형

마우스 이벤트

마우스나 트랙패드로 DOM과 상호 작용할 때 발생하는 일입니다. 이것은 페이지에서 클릭, 더블 클릭, 오른쪽 클릭, 왼쪽 클릭 등의 클릭 이벤트로 발생할 수 있습니다. mouseup , mousedown , mouseover , mouseout 등이 있습니다.

키 누름

이것은 키보드를 눌렀을 때 일어나는 일입니다. keyup , keydown , keypress 를 들을 수 있습니다.

양식 이벤트

종종 양식 이벤트가 HTML로 양식을 제출하는 것으로 구성되는 것을 볼 수 있습니다. 예를 들어, 웹사이트에 가입하고 새 사용자로 등록하기 위해 정보를 입력해야 하는 경우 브라우저는 해당 제출 이벤트(일반적으로 제출 버튼)를 수신하도록 구성된 다음 방금 입력한 정보를 보냅니다. 에서 서버로 이동하여 무언가를 수행합니다. 다른 양식 이벤트에는 change 및 input 가 있습니다.

이 모든 것이 꽤 흥미롭지만 이 정보로 무엇을 할까요? 발생하는 모든 종류의 이벤트에 대해 어떻게 "경청"합니까?

이벤트 핸들러를 입력합니다.

이벤트 핸들러

이벤트 핸들러는 페이지에 이벤트 리스너를 추가하는 방법입니다. 코드를 듣기 위해 인수를 전달하는 것은 함수입니다.

코드에 응답 방법을 알려주기 위해 addEventListener() 라는 함수를 사용합니다. 이를 통해 특정 이벤트를 특정 응답과 연결할 수 있습니다.
addEventListener()는 두 개의 인수를 취합니다. 우리가 듣고 있는 '이벤트', 예를 들어 클릭, 그런 다음 해당 이벤트를 실행할 콜백 함수입니다.

의사 코드가 있는 간단한 예는 다음과 같습니다.
element.addEventListener('click', function(/* do some stuff here when we click on the page */)
실생활에서 예제를 시도하면서 이 기사의 헤더 이미지를 클릭할 때 이벤트를 생성하고 싶다고 가정해 봅시다. 이를 수행하는 데 필요한 첫 번째 정보는 해당 특정 요소의 클래스입니다. 이미지 요소를 마우스 오른쪽 버튼으로 클릭하면 DOM의 정보가 표시됩니다.

이미지의 클래스는 "#main-title > div.crayons-article__cover > img")
개발 도구 JavaScript 콘솔로 이동하여 먼저 이벤트를 추가할 요소를 변수에 설정해야 합니다.
const element = document.querySelector("#main-title > div.crayons-article__cover > img")
그런 다음 의사 코드 예제에 따라 해당 특정 요소에 이벤트 리스너를 추가해야 합니다.

element.addEventListener('click', function(){
   alert("I was clicked!")
})

콘솔에서 시도해 보면 기본 이미지를 클릭하면 경고 창이 팝업되어 메시지를 표시해야 합니다.

축하합니다. 첫 번째 JavaScript 이벤트를 만들었습니다.

추가 읽기

Eloquent JavaScript는 이 주제에 대해 매우 철저하고 깊이 있는 설명을 제공합니다. 더 읽을 수 있습니다here.

이벤트 핸들러와 리스너의 차이점에 대해 조금이라도 혼란스럽다면 StackExchange 페이지에서 정확히 어떤 일이 발생하는지 잘 설명되어 있습니다.

MDN은 또한 매우 잘 분석되어 JavaScript 이벤트를 훨씬 더 자세히 안내합니다. MDN