HTML DOM click() 메서드

<시간/>

HTML DOM click() 메서드는 요소에 대한 마우스 클릭을 시뮬레이션합니다. 사용자가 하는 것처럼 모든 요소를 클릭하는 데 사용할 수 있습니다. 이것은 요소 클릭 이벤트를 발생시키는 데 사용됩니다. 클릭 이벤트는 이벤트 버블링을 수행합니다. 즉, 모든 부모의 클릭 이벤트도 실행합니다.

구문

다음은 HTML DOM click() 메소드의 구문입니다 -

HTMLElementObject.click()

예시

click() 메서드의 예를 살펴보겠습니다. -

<!DOCTYPE html>
<html>
<body>
<p>Hover over the radio button to simulate a mouse-click.</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 = "Radio button has been clicked on
      mouse hover";
   }
</script>
</body>
</html>

출력

이것은 다음과 같은 출력을 생성합니다 -

HTML DOM click() 메서드

라디오 버튼 위로 마우스를 가져갈 때 -

HTML DOM click() 메서드

양식 내부에 레이블이 있는 라디오 버튼을 만들고 "myRadio" ID를 지정했습니다. 마우스 호버의 이 버튼은 clickFunction() −

을 실행합니다.

<label>Radio <input type="radio" id="myRadio" name="choice" onmouseover=”clickFunction()"</label>

getElementById() 메서드를 사용하는 clickFunction()은 라디오 버튼을 가져오고 해당 click() 메서드를 실행합니다. 이것은 라디오 버튼을 확인합니다. 라디오 버튼을 선택한 후 innerHTML 속성을 사용하여 id가 "Sample"인 단락에 성공 메시지가 표시됩니다 -

function clickFunction() {
   document.getElementById("myRadio").click();
   document.getElementById("Sample").innerHTML = "Radio button has been clicked on mouse hover";
}