JavaScript의 이벤트 및 이벤트 리스너

Flatiron School 프로그램의 첫 번째 단계가 거의 끝나가면서 JavaScript 프로그래밍의 기본 사항을 배웠습니다. 하지만 이번 블로그 게시물에서는 제가 가장 좋아하는 주제인 이벤트 및 이벤트 리스너에 대한 경험에 대해 이야기하겠습니다.

JavaScript는 작업 중인 브라우저에서 발생할 수 있는 특정 작업을 수신할 수 있습니다. JS가 들을 수 있는 것들은 엄청나게 많습니다. 가장 많이 사용되는 몇 가지 예를 들면 키 누르기, 마우스 클릭, 양식 제출 등이 있습니다. 또한 프로세스를 중단하거나 페이지를 다시 로드하지 않고 페이지가 사용자 입력에 응답하는 기능인 비동기식 상호 작용을 구현하는 훌륭한 방법으로도 사용됩니다. 이는 이와 같은 기능이 기대되는 웹 앱의 기능에 매우 중요합니다. 제가 이벤트에서 가장 좋아하는 점은 작업 중인 웹 프로젝트에 많은 상호 작용을 추가할 수 있다는 것입니다.

이벤트 리스너는 지정된 요소에서 특정 이벤트가 발생할 때까지 기다리는 JavaScript 함수입니다. 이벤트가 트리거되면 이벤트 리스너는 특정 코드 블록(일반적으로 콜백 함수라고 함)을 실행합니다. 이벤트 리스너를 요소에 연결하는 가장 일반적인 방법은 addEventListener 메서드를 사용하는 것입니다.

현재 최종 단계 프로젝트에서 사용하고 있는 개인적인 예를 사용하겠습니다. 내 프로젝트를 위해 API에서 정보를 가져와 대화형 요소가 있는 웹 페이지에 표시하는 간단한 웹 앱을 만들었습니다.

저는 무료 Amiibo API를 사용하여 수년간 생성된 모든 Yoshi Amiibos를 필터링할 수 있는 웹 앱을 만들기로 결정했습니다. Yoshi가 제가 가장 좋아하는 Nintendo 캐릭터인 점을 고려하면 저는 이 API를 사용하는 아이디어를 좋아했습니다!

다음은 사용자가 이벤트 리스너를 사용하여 다양한 Yoshi Amiibos를 필터링할 수 있는 드롭다운 메뉴를 만든 방법의 예입니다!

이 특정 기능에 대한 내 코드는 다음과 같습니다

      const amiiboContainer = document.getElementById('amiibo-container');
      const amiiboDropdown = document.getElementById('amiiboDropdown');
      const amiibos = data.amiibo;

      // Create an array of names for the dropdown search
      const amiiboNames = amiibos.map(amiibo => amiibo.name);

      // Populate the dropdown with Amiibo names
      amiiboNames.forEach(name => {
        const option = document.createElement('option');
        option.value = name;
        option.textContent = name;
        amiiboDropdown.appendChild(option);
      });

      // Display all Amiibos initially
      displayAmiibos(amiibos);

      // Add an event listener to filter Amiibos when the dropdown value changes
      amiiboDropdown.addEventListener('change', (e) => {
        const selectedName = e.target.value;
        const filteredAmiibos = amiibos.filter(amiibo => amiibo.name === selectedName );
        displayAmiibos(filteredAmiibos);
      });
    })

이 코드 블록에서 무슨 일이 일어나고 있는지 안내해 드리겠습니다.

제가 가장 먼저 한 일은 Yoshi Amiibo 이름에 대한 배열을 만드는 것이었습니다.

const amiiboNames = amiibos.map(amiibo => amiibo.name);

이 줄에는 amiibos 배열에 저장된 항목을 반복하는 지도 기능이 있습니다. 각 amiibo 개체에 대해 name 속성을 ​​사용하고 모든 Amiibo 이름이 포함된 새 배열을 반환합니다.

다음 단계는 드롭다운 메뉴를 Amiibo 이름으로 채우는 것이었습니다.

amiiboNames.forEach(name => {
  const option = document.createElement('option');
  option.value = name;
  option.textContent = name;
  amiiboDropdown.appendChild(option);
});

이 블록은 HTML 드롭다운을 클릭하고 Amiibos의 이름으로 채웁니다. forEach()를 사용하여 amiiboNames 배열을 반복한 다음 각 개별 Amiibo 이름에 대한 요소입니다.

각 이름의 특징은 다음과 같습니다.

1. 새 옵션 요소를 생성합니다.
2. 옵션의 value 속성을 Amiibo 이름으로 설정합니다.
3. 옵션의 표시되는 텍스트(textContent)를 Amiibo 이름으로 설정합니다.
4. 새 옵션 요소를 드롭다운(amiiboDropdown)에 추가합니다.

그 후 필터 드롭다운을 사용하기 전에 처음에 Yoshi Amiibos를 모두 표시하기로 결정했습니다.

      const amiiboContainer = document.getElementById('amiibo-container');
      const amiiboDropdown = document.getElementById('amiiboDropdown');
      const amiibos = data.amiibo;

      // Create an array of names for the dropdown search
      const amiiboNames = amiibos.map(amiibo => amiibo.name);

      // Populate the dropdown with Amiibo names
      amiiboNames.forEach(name => {
        const option = document.createElement('option');
        option.value = name;
        option.textContent = name;
        amiiboDropdown.appendChild(option);
      });

      // Display all Amiibos initially
      displayAmiibos(amiibos);

      // Add an event listener to filter Amiibos when the dropdown value changes
      amiiboDropdown.addEventListener('change', (e) => {
        const selectedName = e.target.value;
        const filteredAmiibos = amiibos.filter(amiibo => amiibo.name === selectedName );
        displayAmiibos(filteredAmiibos);
      });
    })

페이지가 로드될 때마다 페이지에 모든 Amiibos가 표시되도록 이 기능을 만들었습니다. 이것이 하는 일은 위에서 방금 생성한 함수에 전체 amiibos 배열을 전달하는 것입니다.

마지막으로 드롭다운 변경을 위한 이벤트 리스너를 설정해야 했습니다.

const amiiboNames = amiibos.map(amiibo => amiibo.name);

이것은 코드에서 가장 중요한 부분 중 하나이며 이 함수의 이벤트 리스너입니다. 이를 통해 페이지는 드롭다운 메뉴에서 선택한 항목에 따라 페이지에 표시되는 Amiibos를 필터링할 수 있습니다.

이 작동 방식은 addEventListener() 함수가 amiiboDropdown 요소(또는 드롭다운)에서 변경 이벤트를 수신하는 것입니다. 웹 앱 사용자가 새로운 값(이 경우 특정 Yoshi Amiibo)을 선택할 때마다 이벤트가 콜백 기능을 트리거합니다.

작동 순서는 다음과 같습니다.

1. selectedName 변수는 e.target.value로 선택된 모든 옵션의 값을 저장합니다.
2. 그런 다음 amiibos 배열을 필터링하여 selectedName과 일치하는 Yoshi Amiibo만 포함되도록 합니다.
3. 필터링 후 필터링된Amiibos 배열은 displayAmiibos()로 전달되며, 이는 필터링된 Yoshi Amiibos 목록으로 UI를 업데이트합니다.

마무리

JavaScript의 이벤트 및 이벤트 리스너는 대화형 웹 앱을 개발할 때 알아야 할 가장 중요한 사항 중 일부입니다. 그 사실만으로도 그들은 위대합니다. 앱 기능과 목적을 제공하는 동시에 사용자에게 원활한 경험을 제공합니다.

위 내용은 JavaScript의 이벤트 및 이벤트 리스너의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!