Javascript에서 Onclick() 이벤트 함수의 사용 방법 및 이해
이 기사에서 우리는 onclick() 함수를 연구할 것입니다. Onclick은 HTML 요소를 마우스가 클릭할 때 동작을 제공하는 자바스크립트의 이벤트입니다. 예를 들어 웹 사이트나 애플리케이션 페이지에서 버튼을 클릭하면 onclick 이벤트를 사용하여 메시지 표시 등과 같은 작업을 제공할 수 있습니다.
자, 이 자바스크립트에서 onclick 이벤트를 사용하는 예에서 .html 파일을 생성하고 아래 프로그램을 실행하세요.
자바스크립트에서 Onclick() 이벤트 함수를 사용한 프로그램
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hardifal.com</title>
</head>
<body>
<button onclick="klik()">Klik Saya</button>
<p id="demo">Teks ini akan berubah</p>
<script>
function klik(){
document.getElementById("demo").innerHTML = " Hello World !";
}
</script>
</body>
</html>
결과 :
사용자가 내 버튼 클릭을 클릭할 때 버튼을 클릭할 때 이벤트를 주었습니다. Hello World 로 단락 텍스트가 변경됩니다!
위의 onclik 이벤트를 사용하는 방법 외에도 이 자바스크립트에서 onclick 기능을 사용하는 두 번째 방법도 있습니다. 다음 프로그램에주의하십시오
.
Javascript에서 Onclick을 사용하는 두 번째 방법
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hardifal.com</title>
</head>
<body>
<button>Klik Saya</button>
<script>
var btn = document.querySelector('button');
btn.onclick = function(){
alert('Halo, ini adalah pesan ketika anda klik tombol');
}
</script>
</body>
</html>
위 프로그램을 보면 HTML 태그에서 onclick 이벤트를 사용하지 않고 javascript 스크립트에서 click() 함수를 제거한다는 차이점이 있습니다. javascript에서 document.querySelector()를 사용하여 html 태그에서 요소 선택을 검색합니다.
결과 :
