JavaScript 이벤트:이벤트를 만드는 세 가지 방법

웹 사이트에 대화형 기능을 추가하는 것은 JavaScript가 빛나는 곳입니다. HTML과 CSS는 각각 웹 페이지의 구조와 스타일을 설정하는 데 사용되지만 JavaScript를 사용하여 사이트를 보다 동적으로 만들 수 있습니다.

JavaScript에서 이벤트는 사이트를 대화형으로 만드는 데 사용됩니다. 이 가이드에서는 JavaScript 이벤트에 대해 이야기할 것입니다. 이벤트를 사용할 수 있는 위치, 이벤트를 정의하는 방법 및 이벤트를 호출하는 방법을 탐색합니다. 시작하겠습니다!

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

이벤트는 브라우저나 사용자에 의해 트리거될 수 있으며 웹 페이지의 상태를 수정할 수 있습니다. 웹 페이지에서 버튼을 클릭하면 JavaScript 이벤트가 생성됩니다. 확장되는 드롭다운 메뉴를 클릭하면 JavaScript 이벤트가 사용됩니다.

JavaScript 이벤트는 다음과 같이 광범위하게 사용됩니다.

양식 작성 여부 확인
양식을 작성한 사용자를 다른 페이지로 이동
드롭다운 메뉴를 대화형으로 만들기
사용자가 이미지 확대 및 축소 허용

JavaScript에서 이벤트를 사용하려면 이벤트 핸들러와 이벤트 리스너라는 두 가지 개념을 알아야 합니다.

이벤트 핸들러는 웹 페이지에서 이벤트가 트리거될 때 실행되는 기능입니다. 이벤트 리스너는 이벤트 함수를 HTML 요소에 연결하므로 해당 함수가 실행되면 웹 요소가 변경됩니다.

이벤트 핸들러는 인라인 이벤트 핸들러, 이벤트 속성 또는 이벤트 리스너를 사용하는 세 가지 방법 중 하나로 정의할 수 있습니다.

인라인 이벤트 핸들러

JavaScript에서 이벤트를 시작하는 가장 쉬운 방법은 인라인 이벤트 핸들러를 사용하는 것입니다. 즉, HTML 파일에서 이벤트를 정의합니다.

참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.

부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.

이 예에서는 JJ Smith's Bakery라는 빵집의 웹사이트를 디자인한다고 가정해 보겠습니다. 사용자에게 "응답이 수신되었습니다."라는 텍스트가 표시되기를 바랍니다. 그들이 양식을 제출할 때.

다음 코드를 고려하십시오.

<!DOCTYPE html>
<html>
	<head>
		<title>JJ Smith's Bakery</title>
	</head>

	<script src="main.js"></script>

	<body>
		<p id="submitted"></p>
		<button onclick="submitForm()">Submit form</button>
	</body>
</html>

이 코드는 다음과 같은 웹 페이지를 렌더링합니다.

지금까지는 별로 진행되고 있지 않습니다. 우리 웹 페이지에는 우리가 버튼을 클릭할 때 뭔가를 해야 하는 버튼이 있습니다. 버튼을 클릭해도 아무 일도 일어나지 않습니다. 아직 이벤트 핸들러를 작성하지 않았기 때문입니다.

main.js 파일에 다음 코드를 붙여넣습니다.

const submitForm = () => {
	const text = document.getElementById("submitted");
	text.textContent = "Form submitted."
}

이 코드는 ID가 "제출됨"인 요소를 찾고 해당 콘텐츠를 "제출된 양식"으로 수정합니다. 이 코드는 submitForm() 함수가 호출됩니다. 이것은 사용자가 버튼을 클릭할 때 발생하도록 예정되어 있습니다.

버튼을 클릭하면 다음이 발생합니다.

보시다시피 프롬프트가 나타납니다. 우리는 웹 페이지를 대화형으로 만들기 위해 인라인 이벤트 핸들러를 사용했습니다. 그러나 인라인 이벤트 핸들러가 JavaScript에서 이벤트를 사용하는 유일한 방법은 아닙니다. 코드에서 이벤트 핸들러 속성을 사용하는 방법에 대해 논의해 보겠습니다.

핸들러 속성이 있는 이벤트

인라인 핸들러에서는 HTML 파일에서 실행할 함수를 지정해야 합니다. 이전 HTML 코드에서 이 줄은 버튼을 눌렀을 때 호출하려는 함수를 정의한 곳입니다.

<button onclick="submitForm()">Submit form</button>

핸들러 속성을 사용하여 코드에서 "onclick" 이벤트를 제거할 수 있습니다. 이를 통해 웹 페이지를 대화식으로 만드는 모든 JavaScript를 자체 파일로 이동할 수 있습니다. 이 예에서는 버튼 ID를 "버튼"으로 지정하여 JavaScript 코드에서 버튼을 식별할 수 있습니다. onclick 이벤트를 제거하고 버튼에 ID를 할당해 보겠습니다.

<button id="button">Submit form</button>

버튼을 눌렀을 때 이벤트가 발생하도록 하기 위해 "main.js" 파일 내부에 핸들러 속성이 있는 이벤트를 작성할 것입니다. 사용할 코드는 다음과 같습니다.

const submitForm = () => {
	const text = document.getElementById("submitted");
	text.textContent = "Form submitted."
}

const button = document.getElementById("button")
button.onclick = submitForm;

이 코드를 실행하고 버튼을 클릭하면 다음이 반환됩니다.

버튼은 이전과 같은 방식으로 작동하지만 코드는 다른 방식으로 작성됩니다. 이벤트 핸들러를 인라인으로 작성하는 대신 main.js 파일로 옮겼습니다. 이렇게 하면 인라인 이벤트가 트리거되는 위치를 찾기 위해 모든 HTML 코드를 읽을 필요가 없기 때문에 유지 관리가 더 쉬운 코드를 작성하는 데 도움이 됩니다.

이벤트 리스너

이벤트 리스너는 JavaScript에서 이벤트를 선언하는 데 사용할 수 있습니다. 리스너는 항상 요소의 상태가 변경될 때를 찾고 있으며 해당 요소가 변경되면 리스너의 코드가 실행됩니다.

예를 들어, 이벤트 리스너에 연결된 버튼을 클릭하면 리스너는 마우스 이벤트가 트리거되었다는 "듣는" 것입니다. 그런 다음 해당 특정 이벤트 리스너와 연결된 코드를 실행합니다.

이 예제의 HTML 코드는 위와 동일하지만 "main.js" 파일을 약간 변경할 것입니다.

const submitForm = () => {
	const text = document.getElementById("submitted");
	text.textContent = "Form submitted."
}

const button = document.getElementById("button")
button.addEventListener("click", submitForm);

이 코드에서는 addEventListener를 사용하고 있습니다. 이벤트 리스너를 생성합니다. 이것은 submitForm()을 바인딩하는 대신 마지막 두 예제에서 했던 것처럼 onclick 이벤트에 대한 JavaScript 함수.

"클릭"을 지정하여 마우스 포인터로 버튼을 클릭할 때 수신 대기하도록 코드를 지정합니다. 클릭 이벤트 외에도 키보드 이벤트와 같은 다른 이벤트 유형이 있지만 이 자습서에서는 마우스 클릭 이벤트에 중점을 둡니다.

코드를 다시 실행하고 버튼을 클릭해 보겠습니다.

출력은 마지막 두 예제에서 본 것과 동일하지만 이번에는 HTML 이벤트 리스너를 사용합니다. 이벤트 리스너는 JavaScript에서 이벤트를 선언하는 가장 새로운 방법이며 아마도 가장 일반적으로 사용되는 방법일 것입니다.

결론

JavaScript 이벤트를 사용하면 웹 페이지를 대화형으로 만들 수 있습니다. 버튼을 누르거나, 양식을 제출하거나, 일부 텍스트 위로 마우스를 가져가면 이벤트가 트리거될 수 있습니다. JavaScript에서 이벤트를 선언하는 방법에는 인라인, 속성 사용 또는 리스너 사용의 세 가지가 있습니다.

이제 전문 웹 개발자처럼 JavaScript로 이벤트를 만들 준비가 되었습니다!