1. Hammer.js 설치하기

먼저, Hammer.js 라이브러리를 프로젝트에 추가해야 합니다. npm을 사용하는 경우 다음 명령어를 사용하여 Hammer.js를 설치할 수 있습니다:

npm install hammerjs

1. Hammer.js 초기화하기

터치 이벤트를 적용할 요소에 대해 Hammer.js를 초기화해야 합니다. 예를 들어, HTML 요소에 hammer 클래스를 추가하고 해당 요소를 선택하여 Hammer 객체를 초기화할 수 있습니다:

<div class="hammer"></div>

const element = document.querySelector('.hammer');
const hammer = new Hammer(element);

1. 이벤트 처리기 등록하기

Hammer 객체를 초기화한 후, 원하는 터치 이벤트에 대한 이벤트 처리기를 등록해야 합니다. 다음은 간단한 터치 이벤트 처리기의 예입니다:

hammer.on('tap', function(event) {
  console.log('Tap event!');
});

1. 여러 개의 요소에 적용하기

여러 개의 요소에 터치 이벤트를 적용하려면, 각 요소에 대해 위의 단계를 반복하면 됩니다. 다음은 여러 개의 요소에 Hammer.js를 적용하는 예입니다:

const elements = document.querySelectorAll('.hammer');

for (const element of elements) {
  const hammer = new Hammer(element);

  hammer.on('tap', function(event) {
    console.log('Tap event!');
  });
}

위의 예제에서는 hammer 클래스를 가진 모든 요소에 대해 Hammer 객체를 생성하고, tap 이벤트에 대한 처리기를 등록합니다.

이제 Hammer.js를 사용하여 터치 이벤트를 여러 개의 요소에 적용하는 방법을 알았습니다. 다른 터치 이벤트와 Hammer.js의 다양한 기능에 대해 자세히 알아보고 싶다면, 공식 Hammer.js 문서를 참조하십시오.

참고 문서:

• Hammer.js 공식 문서