웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
웹페이지에서 버튼이나 어떤 엘리먼트를 반드시 직접 클릭하지 않고도 클릭 이벤트를 동작하는 방법이 있습니다. 제이쿼리의 경우 trigger() 메소드가 있는데요 ~ 자바스크립트에서 구현할 경우 어떻게 하면 동작하는지 알아보겠습니다.
제이쿼리 trigger() 바로가기 >
https://webisfree.com/2014-01-03/[jquery]-이벤트의-강제-실행-커스텀-이벤트-trigger()
# 자바스크립트 클릭하지 않고 클릭 이벤트 동작하기
이처럼 마치 클릭한 것처럼 이벤트를 동작 시키는 방법인 가상 클릭 방법을 알아보겠습니다. 이 방법은 크게 두 가지가 있는데 하나는 click()을 사용하는 것이고 다른 하나는 createEvent()를 사용하여 커스텀이벤트를 만드는 방법입니다.
1. click() 사용하기
2. createEvent() 커스텀 이벤트 만들기
먼저 click()을 사용하는 방법입니다.
! click()을 사용하여 클릭 이벤트 동작시키기
click()은 DOM에 적용하는 내장 함수, 메소드로 사용하는 방법은 가장 간단합니다. 간단한 예제를 만들어 볼텐데 아래와 같이 엘리먼트를 하나 만들고 적용해보도록 하겠습니다.
<div>
<button id="test" onclick="alert('Click!');">Click Me</button>
</div>
<button id="test" onclick="alert('Click!');">Click Me</button>
</div>
이제 위 버튼을 클릭하지 않고 자바스크립트의 onclick()을 사용해 클릭한 것과 동일하게 이벤트를 발생해보겠습니다.
var ele =document.getElementById('test'); // 변수에 엘리먼트 저장
ele.click();
ele.click();
코드를 실행하면 'Click!'이라는 메시지창이 나타날 것입니다. 매우 간단하게 클릭 이벤트를 실제 클릭 없이 구현할 수 있었습니다.
참고로, 위 코드는 최신 브라우저를 포함한 크롬, 파이어폭스, IE에서 테스트해보니 잘 동작합니다.
! createEvent() 커스텀 이벤트 만들기
다음으로 이벤트를 만들어 사용하는 방법을 알아봅니다. 이 방법 역시 생각보다 간단하게 구현 가능합니다. 동일한 엘리먼트가 있다고 가정하에 코드를 추가해봅니다.var ele =document.getElementById('test'); // 변수에 엘리먼트 저장
var customEvent = document.createEvent('Event'); // 인스턴스 이벤트 생성
customEvent.initEvent('click', false, true); // 클릭 이벤트 정보를 설정함
ele.dispatchEvent(_customEvent); // 특정 요소에 이벤트를 추가하기
var customEvent = document.createEvent('Event'); // 인스턴스 이벤트 생성
customEvent.initEvent('click', false, true); // 클릭 이벤트 정보를 설정함
ele.dispatchEvent(_customEvent); // 특정 요소에 이벤트를 추가하기
위 방법 역시 'Click!'이라는 메시지창이 나타나는 것을 확인할 수 있습니다.
아래의 글도 찾고 계시지 않나요?
