소개
JavaScript 문서에 오신 것을 환영합니다! 이 랩에서는 이벤트에 대한 소개를 제공합니다.
이것은 가이드 실험입니다. 학습과 실습을 돕기 위한 단계별 지침을 제공합니다.각 단계를 완료하고 실무 경험을 쌓기 위해 지침을 주의 깊게 따르세요. 과거 데이터에 따르면, 이것은 초급 레벨의 실험이며 완료율은 100%입니다.학습자들로부터 100%의 긍정적인 리뷰율을 받았습니다.
이벤트 (Events)
index.html은 이미 VM 에 제공되어 있습니다.
웹사이트에서 실제 상호 작용을 위해서는 이벤트 핸들러가 필요합니다. 이벤트 핸들러는 브라우저에서 활동을 감지하고 그에 따라 코드를 실행하는 코드 구조입니다. 가장 명확한 예는 마우스로 무언가를 클릭할 때 브라우저에서 발생하는 click event를 처리하는 것입니다. 이를 시연하기 위해 다음 코드를 콘솔에 입력한 다음 현재 웹 페이지를 클릭하십시오.
document.querySelector("html").addEventListener("click", function () {
alert("Ouch! Stop poking me!");
});요소에 이벤트 핸들러를 연결하는 방법에는 여러 가지가 있습니다.
여기서는 <html> 요소를 선택합니다. 그런 다음, 수신할 이벤트의 이름 ('click') 과 이벤트가 발생할 때 실행할 함수를 전달하여 addEventListener() 함수를 호출합니다.
방금 addEventListener()에 전달한 함수는 이름이 없기 때문에 익명 함수라고 합니다. 익명 함수를 작성하는 다른 방법이 있으며, 이를 화살표 함수라고 합니다.
화살표 함수는 function () 대신 () =>를 사용합니다.
document.querySelector("html").addEventListener("click", () => {
alert("Ouch! Stop poking me!");
});웹 서비스를 포트 8080 에서 실행하려면 오른쪽 하단 모서리에 있는 'Go Live'를 클릭하십시오. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.
요약
축하합니다! 이벤트 랩을 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 기술을 향상시킬 수 있습니다.