JavaScript 클릭 이벤트 트리거하기
JavaScript에서 특정 요소의 클릭 이벤트를 프로그래밍 방식으로 강제 실행하려면 click() 메서드를 활용할 수 있습니다. 이 메서드는 사용자가 실제로 요소를 클릭한 것과 동일하게 작동하며, 해당 요소에 연결된 onclick 이벤트 핸들러를 자동으로 호출합니다.
다음 예제는 마우스를 버튼 위에 올렸을 때(onmouseover) 클릭 이벤트가 자동으로 발생하도록 구현한 코드입니다.
예제
<!DOCTYPE html>
<html>
<body>
<p>Hover over the button.</p>
<form>
<input type="button" id="test" value="Hover" onmouseover="display()" onclick="alert('click event')">
</form>
<script>
function display() {
document.getElementById("test").click();
}
</script>
</body>
</html>
코드 동작 원리
- onmouseover="display()" : 마우스 포인터가 버튼 위에 올라오는 순간 display() 함수가 호출됩니다.
- document.getElementById("test").click() : id가 "test"인 버튼의 클릭 이벤트를 강제로 트리거합니다.
- onclick="alert('click event')" : 클릭 이벤트가 발생하면 'click event'라는 알림창이 화면에 표시됩니다.
이처럼 click() 메서드를 사용하면 버튼 클릭, 폼 제출 등 다양한 상황에서 클릭 이벤트를 손쉽게 시뮬레이션할 수 있어, 자동화 테스트나 UI 인터랙션 구현에 유용하게 활용됩니다.