<button id="click">Click Me</button>
<script
src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"></script>
<script>
function hello() {
console.log('hello')
console.log('bye')
}
$('#click').click(hello);
</script>onclick Event 란
사용자가 요소를 클릭할 때 발생한다
구문형태
<element onclick="myScript">
<script>
object.onclick = function(){myScript};
</script>JavaScript에서
addEventListener()메서드를 사용하여 클릭이벤트 수행할 수도 있다.
object.addEventListener("click", myScript);onclick Event 활용예시
버튼 클릭 시 JavaScript 실행
<button onclick="myFunction()">Click me</button><button> 요소를 클릭하여 현재 날짜, 날짜 및 시간을 표시한다
<button onclick="getElementById('demo').innerHTML = Date()">What is the time?</button><p> 요소를 클릭하여 텍스트 색상을 빨간색으로 변경한다
<코드 1>
<p id="demo" onclick="myFunction()">Click me to change my text color.</p>
<script>
function myFunction() {
document.getElementById("demo").style.color = "red";
}
</script><코드2>
<p onclick="myFunction(this, 'red')">Click me to change my text color.</p>
<script>
function myFunction(elmnt,clr) {
elmnt.style.color = clr;
}
</script>함수 인자 2개사용
버튼을 클릭하여 입력 필드의 일부 텍스트를 다른 입력 필드로 복사
<button onclick="myFunction()">Copy Text</button>
<script>
function myFunction() {
document.getElementById("field2").value = document.getElementById("field1").value;
}
</script>창 개체에 "onclick" 이벤트 부여한다
window.onclick = myFunction;
// If the user clicks in the window, set the background color of <body> to yellow
function myFunction() {
document.getElementsByTagName("BODY")[0].style.backgroundColor = "yellow";
}window 창 개체 란??
드롭다운 버튼
버튼을 가져오고 사용자가 클릭하면 myFunction을 실행한다
myFunction은 드롭다운 콘텐츠를 숨기고 표시하는 데 사용되는 쇼 클래스 추가 및 제거 사이를 전환한다
document.getElementById("myBtn").onclick = function() {myFunction()};
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
새로운 것을 도전하고 배운것을 정리하려 합니다.