<form>
을 제출할 때 발생<input>
과 같은 요소에 포커스할 때 발생on<event>
속성에 핸들러를 할당할 수 있음<input value="클릭해 주세요." onclick="alert('클릭!')" type="button">
input
태그의 onclick
속성에 click
핸들러 할당<script>
function countRabbits() {
for(let i=1; i<=3; i++) {
alert(`토끼 ${i}마리`);
}
}
</script>
<input type="button" onclick="countRabbits()" value="토끼를 세봅시다!">
on<event>
을 사용해도 핸들러를 할당할 수 있음elem.onclick
을 사용한 예시)<input id="elem" type="button" value="클릭해 주세요.">
<script>
elem.onclick = function() {
alert('감사합니다.');
};
</script>
<input type="button" onclick="alert('클릭!')" value="클릭해 주세요.">
<input type="button" id="button" value="클릭해 주세요.">
<script>
button.onclick = function() {
alert('클릭!');
};
</script>
<input type="button" id="elem" onclick="alert('이전')" value="클릭해 주세요.">
<script>
elem.onclick = function() { // 기존에 작성된 핸들러를 덮어씀
alert('이후'); // 이 경고창만 보입니다.
};
</script>
elem.onclick = null
같이 null 할당this
의 값은 핸들러가 할당된 요소this.innerHTML
button
이므로 버튼 안의 내용이 얼럿창에 출력<button onclick="alert(this.innerHTML)">클릭해 주세요.</button>
function sayThanks() {
alert('감사합니다!');
}
elem.onclick = sayThanks;
sayThanks
처럼 할당해야 함sayThanks()
할당하면 동작하지 않음// 올바른 방법
button.onclick = sayThanks;
// 틀린 방법
button.onclick = sayThanks();
<input type="button" id="button" onclick="sayThanks()">
onclick
프로퍼티에 새로운 함수를 할당button.onclick = function() {
sayThanks(); // 속성값
};
// <body>를 클릭하면 에러가 발생합니다.
// 속성은 항상 문자열이기 때문에, 함수가 문자열이 되어버리기 때문입니다.
document.body.setAttribute('onclick', function() { alert(1) });
elem.onclick
은 괜찮지만, elem.ONCLICK
은 안됨해당 내용은 다음 자료를 참고했습니다.
https://ko.javascript.info/introduction-browser-events