HTML DOM click() 메서드란?
HTML DOM의 click() 메서드는 특정 요소에 마우스 클릭을 프로그래밍 방식으로 시뮬레이션(재현)합니다. 마치 실제 사용자가 해당 요소를 직접 클릭한 것과 동일한 효과를 내며, 어떤 요소든 대상으로 지정할 수 있습니다.
이 메서드는 요소의 click 이벤트를 발생시키는 역할을 합니다. 주의할 점은 click 이벤트가 이벤트 버블링(event bubbling)을 따른다는 것입니다. 즉, 클릭된 요소 자체의 click 이벤트뿐만 아니라 그 부모 요소들의 click 이벤트도 순차적으로 실행됩니다.
구문(Syntax)
HTML DOM click() 메서드의 기본 구문은 다음과 같습니다.
HTMLElementObject.click()
예제(Example)
다음 예제는 라디오 버튼 위에 마우스를 올리면(hover) 자동으로 클릭 이벤트가 실행되도록 구현한 코드입니다.
<!DOCTYPE html>
<html>
<body>
<p>라디오 버튼 위에 마우스를 올리면 클릭이 시뮬레이션됩니다.</p>
<form>
<label>Radio <input type="radio" id="myRadio" name="choice"
onmouseover="clickFunction()"</label>
</form>
<p id="Sample"></p>
<script>
function clickFunction() {
document.getElementById("myRadio").click();
document.getElementById("Sample").innerHTML = "마우스 오버로 라디오 버튼이 클릭되었습니다";
}
</script>
</body>
</html>실행 결과(Output)
위 코드를 실행하면 다음과 같은 화면이 나타납니다.
라디오 버튼 위에 마우스를 올리면 다음과 같이 버튼이 선택되고 안내 문구가 표시됩니다.
코드 설명
먼저 폼(form) 안에 라벨(label)과 함께 라디오 버튼을 생성하고, “myRadio”라는 id를 부여했습니다. 이 버튼에 마우스를 올리면(onmouseover) clickFunction()이 호출됩니다.
<label>Radio <input type="radio" id="myRadio" name="choice" onmouseover=”clickFunction()"</label>
clickFunction() 함수 내부에서는 getElementById() 메서드로 라디오 버튼을 가져온 뒤, 해당 요소의 click() 메서드를 실행합니다. 이 과정에서 라디오 버튼이 자동으로 체크(선택)됩니다.
버튼이 선택된 후에는 id가 “Sample”인 단락(paragraph)의 innerHTML 속성을 이용해 성공 메시지를 화면에 출력합니다.
function clickFunction() {
document.getElementById("myRadio").click();
document.getElementById("Sample").innerHTML = "마우스 오버로 라디오 버튼이 클릭되었습니다";
}핵심 정리
- click()은 사용자의 실제 클릭 없이도 요소의 클릭 이벤트를 트리거할 수 있습니다.
- 버튼, 링크, 라디오 버튼 등 거의 모든 HTML 요소에 적용 가능합니다.
- 이벤트 버블링에 따라 부모 요소의 click 핸들러도 함께 실행된다는 점을 유의해야 합니다.