목차
- click() 예제 - 마우스오버 시 클릭 이벤트 발생
- click() 정의
- click() 구문
- click() 예제 - 클릭메서드 이용해 배경색 자동 변경
click() 예제 - 마우스오버 시 클릭 이벤트 발생
<form>
<input type="checkbox" id="hz" onmouseover="homzzang()" onclick="alert('Homzzang.com')">
</form>
<script>
function homzzang() {
document.getElementById("hz").click();
}
</script>
결과보기
click() 정의
요소를 직접 클릭한 것과 같은 효과 주기.
1.
- 사용자가 해당 요소를 수동으로 클릭한 것과 같은 동작 수행.
- JavaScript DOM API의 일부.
- HTML 요소에 대한 참조 사용해 작동.
- 모든 HTML 요소에서 사용 가능.
- 보통, (버튼/링크/체크박스) 등 사용자입력요소에서 사용.
2. 주의사항
- click() 메서드는 모든 HTML 요소에서 사용할 수 있지만, 일부 브라우저에서는 일부 요소에서 작동하지 않을 수 있음. (예) disabled 속성이 설정된 버튼은 click() 메서드로 클릭할 수 없음.
- click() 메서드를 사용할 때, 클릭 이벤트가 발생하므로, 클릭 이벤트 핸들러도 호출됨. 이는 일부 예기치 않은 동작을 유발할 수 있으므로 주의 필요.
- 일부 브라우저에서는 click() 메서드가 일부 보안 정책에 의해 차단될 수 있음. 이러한 경우 사용자의 직접 클릭을 요구할 수 있음.
3.
모든 브라우저 지원.
4.
MDN click() 예제 보기
click() 구문
HTMLElementObject.click()
[매개변수]
없음.
[반환값]
없음.
click() 예제 - 클릭메서드 이용해 배경색 자동 변경
(예) 로드 시 흰색 배경 잠깐 보인 후, 빨간색으로 자동 변경됨.
<body>
<button id="hz">클릭</button>
<script>
var hz = document.getElementById("hz");
hz.addEventListener("click", function() {
document.body.style.backgroundColor = "red";
});
hz.click();
</script>
</body>
결과보기