[자바스크립트] onclick, onchange, onmouse, onkeyup 이벤트 함수

안녕하세요 yunamom 입니다 :D

 

이번시간에는 JavaScript 에서 키보드, 마우스 이벤트 함수에 대하여 포스팅 하겠습니다.😊

 

JS 이벤트 함수

 

 onclick : 클릭했을때 

 

onclick

<div onclick="on1()">onclick</div>
<input id="o1">

function on1(){
    var values = document.getElementById('o1').value;  
    document.getElementById('o1').value = (values.length < 1)?"yunamom":"";
}

 

 onmouseover : 마우스를 올렸을 때 /  onmouseout : 마우스를 밖으로 옮겼을 때 

 

onmouseover/onmouseout

<div onmouseover="on2()" onmouseout="on3()">onmouseover/onmouseout</div>
<input id="o2">

function on2(){
  	document.getElementById('o2').value = "yunamom";
}

 

 onchange : 셀렉트박스 값 선택했을때 

 

onchange test1 test2

<select id="on" onchange="on4()">
  <option value="">onchange</option>
  <option value="test1" >test1</option>
  <option value="test2" >test2</option>
</select>

<input id="o4">

function on4(){
    var values = document.getElementById('on').value;
  	document.getElementById('o4').value = values;
}

 

 onkeyup : 값을 입력할때 

 

<input id="5" onkeyup="on5()" placeholder="onkeyup">
<input id="o5">

function on5(){
    var values = document.getElementById('5').value;
  	document.getElementById('o5').value = values;
}