그만큼 클릭하면 이벤트는 일반적으로 사용자가 요소를 클릭할 때 발생합니다. 이를 통해 프로그래머는 요소를 클릭할 때 JavaScript의 기능을 실행할 수 있습니다. 이 이벤트는 양식, 경고 메시지 등의 유효성을 검사하는 데 사용될 수 있습니다.
문자열 자바의 길이
JavaScript를 사용하면 이 이벤트를 모든 요소에 동적으로 추가할 수 있습니다. 다음을 제외한 모든 HTML 요소를 지원합니다. , , , , , , , ,
, , 그리고 . 적용할 수 없다는 의미입니다. 클릭하면 지정된 태그에 대한 이벤트입니다.
HTML에서는 클릭하면 속성을 지정하고 자바스크립트 기능 그것에. JavaScript를 사용할 수도 있습니다. 추가이벤트리스너() 방법을 사용하고 딸깍 하는 소리 더 큰 유연성을 위해 이벤트를 수행합니다.
통사론
이제 우리는 클릭하면 HTML과 이벤트 자바스크립트 (없이 추가이벤트리스너() 방법을 사용하거나 추가이벤트리스너() 방법).
HTML에서
자바스크립트에서
object.onclick = function() { myScript }; JavaScript에서는 addEventListener() 메소드를 사용하여
object.addEventListener('click', myScript);
사용법을 살펴보자 클릭하면 일러스트를 활용한 이벤트. 이제, 사용예를 살펴보겠습니다. 클릭하면 HTML 및 JavaScript의 이벤트.
예1 - HTML에서 onclick 속성 사용
이 예에서는 HTML 클릭하면 속성을 지정하고 여기에 JavaScript의 기능을 할당합니다. 사용자가 해당 버튼을 클릭하면 해당 기능이 실행되고 경고 대화 상자가 화면에 표시됩니다.
function fun() { alert('Welcome to the javaTpoint.com'); } <h3> This is an example of using onclick attribute in HTML. </h3> <p> Click the following button to see the effect. </p> Click me 지금 테스트해보세요 산출
주어진 버튼을 클릭하면 출력은 다음과 같습니다.
예 2 - JavaScript 사용
이 예에서는 JavaScript의 클릭하면 이벤트. 여기서 우리는 클릭하면 단락 요소가 포함된 이벤트입니다.
사용자가 단락 요소를 클릭하면 해당 기능이 실행되고 단락의 텍스트가 변경됩니다. 클릭하면 요소의 배경색, 크기, 테두리, 텍스트 색상도 변경됩니다.
onclick event <h3> This is an example of using onclick event. </h3> <p> Click the following text to see the effect. </p> <p id="para">Click me</p> document.getElementById('para').onclick = function() { fun() }; function fun() { document.getElementById('para').innerHTML = 'Welcome to the javaTpoint.com'; document.getElementById('para').style.color = 'blue'; document.getElementById('para').style.backgroundColor = 'yellow'; document.getElementById('para').style.fontSize = '25px'; document.getElementById('para').style.border = '4px solid red'; } 지금 테스트해보세요 산출
텍스트를 클릭한 후 클릭 해주세요, 출력은 -
예제3 - addEventListener() 메소드 사용
이 예에서는 JavaScript의 추가이벤트리스너() 부착 방법 딸깍 하는 소리 단락 요소에 대한 이벤트입니다. 사용자가 단락 요소를 클릭하면 단락의 텍스트가 변경됩니다.
단락을 클릭하면 요소의 배경색과 글꼴 크기도 변경됩니다.
<h3> This is an example of using click event. </h3> <p> Click the following text to see the effect. </p> <p id="para">Click me</p> document.getElementById('para').onclick = function() { fun() }; function fun() { document.getElementById('para').innerHTML = 'Welcome to the javaTpoint.com'; document.getElementsByTagName('body')[0].style.color = 'blue'; document.getElementsByTagName('body')[0].style.backgroundColor = 'lightgreen'; document.getElementsByTagName('body')[0].style.fontSize = '25px'; document.getElementById('para').style.border = '4px solid red'; } 지금 테스트해보세요 산출
텍스트를 클릭하면 클릭 해주세요 , 출력은 -
