onclick
버튼을 클릭했을 때 효과가 발생한다.
<input type="text" name="title" id="_title">
<button onclick="func()">클릭</button>
<script type="text/javascript">
function func() {
var title_ = document.getElementsByName("title")[0].value;
alert(title_);
}
</script>
onchange
내용이 변경되었을 때 효과가 발생한다.
함수의 Parameter 부분에 object 인 자기 자신을 쓰기 위해 this 를 사용하기도 한다.
<form>
핸드폰 번호 입력
T:<input type="text" size="5" maxlength="4" onchange="isPhoneNum(this)">
-
<input type="text" size="5" maxlength="4" onchange="isPhoneNum(this)">
<br>
</form>
<script type="text/javascript">
function isPhoneNum( obj ) {
var str = obj.value;
// 숫자가 아닌 문자열이 포함되어 있는 경우를 check
if(str.match( /[^0-9]/g )){ // 문자 포함시 ( ) 값이 참
alert("문자가 포함되어 있습니다");
obj.value = "";
}
}
</script>문자열 포함을 검사하고자 할 때 검사하려는 변수명.match( /[^0-9]/g ); 정규식을 사용해서 구별할 수 있다.
onload
페이지가 열리기 전에 읽어온다
<body>부분에 onload를 설정해주면 된다.
<body onload="check()">
<div id="demo">
//여기에 텍스트가 삽입된다.
</div>
<script type="text/javascript">
function check() {
var text = "onload 실행"; // Page 가 열리기 전에 읽어온다.
document.getElementById("demo").innerHTML = text;
}
</script>
</body>onkeydown
key를 눌렀을 때 효과가 발생한다.
개발자 도구 - console 에서 확인할 수 있는데 값은 ASCII 값으로 표시되고 알파벳은 대문자로만 인지한다.
<input type="text" name="title" id="_title">
<script type="text/javascript">
document.getElementsByName("title")[0].onkeydown = function(event) {
console.log('keydown = keycode : ' + event.keyCode);
}
</script>onkeypress
key를 눌렀을 때 효과가 발생한다.
<input type="text" name="title" id="_title">
<script type="text/javascript">
document.getElementsByName("title")[0].onkeypress = function(event) {
console.log('keydown = keycode : ' + event.keyCode);
}
</script>셋의 차이점
- onkeydown은 키를 눌렀을 때
(shift, a;t, ctrl, caps lock 등 모든 키에 동작하지만 한영변환, 한자 등의 특수키는 인식하지 못한다.) - onkeyup은 키를 눌렀다가 뗐을 때
(onkeydown에서 인식하는 키들과 같다) - onkeypress는 글자가 써질 때의 이벤트이다.
(shift, alt, enter 등의 특수키는 인식하지 못하며 한글을 지원하지 않는다.)
자료 출처 : https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-onclick-onchange-onload-onkeydown-onkeypress#onclick
'JavaScript' 카테고리의 다른 글
| [JavaScript] #27 - Cookie (0) | 2023.02.08 |
|---|---|
| [JavaScript] #26 - Ajax (jQuery) (0) | 2023.02.07 |
| [JavaScript] #25 - jQuery란 (0) | 2023.02.06 |
| [JavaScript] #24 - 노드(Node) (0) | 2023.02.02 |
| [JavaScript] #23 - 문자열 함수 (0) | 2023.01.30 |