자바스크립트 onclick 이벤트
그만큼 클릭하면 이벤트는 일반적으로 사용자가 요소를 클릭할 때 발생합니다. 이를 통해 프로그래머는 요소를 클릭할 때 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'; } 지금 테스트해보세요 산출
텍스트를 클릭하면 클릭 해주세요 , 출력은 -
