Change language
Python.Engineering Wiki 자바스크립트 이벤트 리스너

자바스크립트 이벤트 리스너

__main__ Python module | ast Python module | code Python module | COM PHP module | dis Python module | Ev PHP module | Event PHP module | exp | html Python module | http Python module | iat | io Python module | JavaScript | os Python module | PS PHP module | Python functions | re Python module | site Python module | SPL PHP module | StackOverflow | stat Python module | struct Python module | test Python module | time Python module | types Python module | UI PHP module
Michael Zippo Michael Zippo

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

자바스크립트에서 이벤트는 대화형 사이트를 만드는 데 사용됩니다. . 이 가이드에서는 JavaScript 이벤트에 대해 설명합니다. 이벤트를 사용할 수 있는 위치, 이벤트를 정의하는 방법 및 이벤트를 호출하는 방법을 살펴보겠습니다. 이제 시작하겠습니다!

JavaScript 이벤트란 무엇입니까?

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

자바스크립트 이벤트는 다음을 포함하여 다양한 용도로 사용됩니다.

  • 양식이 완성되었는지 확인하기
  • 양식을 작성한 후 사용자를 다른 페이지로 이동
  • 드롭다운 메뉴를 대화형으로 만들기
  • 사용자가 이미지 확대 및 축소

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

이벤트 핸들러 웹 페이지에서 이벤트가 발생했을 때 실행되는 함수입니다. 이벤트 리스너는 이벤트 함수를 HTML 요소에 첨부하므로 해당 함수가 실행될 때 웹 요소가 변경됩니다.

이벤트 핸들러는 인라인 이벤트 핸들러 사용, 이벤트 또는 이벤트 리스너.

온라인 이벤트 핸들러

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

이 예에서 다음과 같이 가정합니다. JJ Smith`s Bakery라는 빵집의 웹사이트를 디자인하고 있습니다. 양식을 제출할 때 " 응답이 수신되었습니다.

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

이 코드는 다음과 같은 웹페이지를 표시합니다.

YhBM86zXeUH6CVstZ3cqjSfPpNHrDi1FRgWXFZMeCKNiTylMsE3TAEvgnvBLnl1zf30hlI6DcqWpXeFiL8YiojTKYJQeJ7 ESoQz4KhfCYhqlT9JmsxZZXRVj0EKBL9jbEaCs4Oe은

지금까지 많이하지 -.. 우리는 우리의 웹 페이지가 우리의 버튼을 클릭 할 때 뭔가를해야 할 버튼이 포함되어 일어나는 무언가를 클릭하면 우리 버튼을 눌러도 아무 일도 일어나지 않습니다. 아직 이벤트 핸들러를 작성해야 하기 때문입니다.

main.js 파일에 다음 코드를 붙여넣으세요.

이 코드는 id가 " submited "인 요소를 찾아 내용을 " Form submited"로 변경합니다. " 이 코드는 submitForm() 이 라고 불리는. 이것은 사용자가 버튼을 클릭할 때 발생하도록 프로그래밍되었습니다.

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

보다시피 메시지 나타납니다. 우리는 온라인 이벤트 관리자를 사용하여 웹 페이지를 대화형으로 만들었습니다. 그러나 인라인 이벤트 핸들러가 JavaScript에서 이벤트를 사용하는 유일한 방법은 아닙니다. 코드에서 이벤트 핸들러 속성을 사용하는 방법을 살펴보겠습니다.

핸들러 속성이 있는 이벤트

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

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

버튼을 눌렀을 때 이벤트를 트리거하기 위해 "main" 내부에 핸들러 속성이 있는 이벤트를 작성합니다. js " . 다음은 사용할 코드입니다.

실행할 때 이 코드를 입력하고 버튼을 클릭하면 다음 메시지가 반환됩니다.

4o62 FifBmuVWJDrNanvSaMu6tbum7kfLhkIyJ75xZ3Xt CsRgZsCf8qnj13uN1VyaoDaapwFE4pG BMvjQUHsAa1jLlGtRVPbnmOLDmzr98tzw38e18YY8 Hcaym YGeDzjzFwo가 우리 버튼 작동 동일한 이전과 같지만 코드는 다른 방식으로 작성되었습니다. 이벤트 핸들러를 인라인으로 작성하는 대신 main.js 파일로 옮겼습니다. 인라인 이벤트가 발생하는 위치를 알기 위해 모든 HTML 코드를 읽을 필요가 없기 때문에 보다 관리하기 쉬운 코드를 작성하는 데 도움이 됩니다.

이벤트 리스너

이벤트를 사용하여 JavaScript에서 이벤트를 선언합니다. 항상 i 요소의 상태가 변경되는지 확인하고 해당 요소가 변경되면 리스너의 코드가 실행됩니다.

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

이 예제의 HTML 코드는 위와 같지만 " 손. js " 파일:

이 코드에서 우리는 addEventListener를 사용하여 이벤트 리스너를 생성해 보겠습니다. 이것은 두 가지 최신 예에서와 같이 JavaScript 함수 submitForm()을 onclick 이벤트에 바인딩하는 대신입니다.

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

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

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

결론

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

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