JAVASCRIPT ) 이벤트

onclick	마우스 클릭
ondblclick	마우스 더블클릭
onchange	value값이 변경되면
onkeydown	키보드 딸
onkeyup	키보드 깍
onkeypress	키보드 딸깍

 

 

<style>
* { margin: 0; padding: 0; }
.mainBox { width: 200px; height: 300px; padding: 15px; 
	border: 1px solid gray; border-radius: 10px;
}
.resultArea { width: 200px; height: 40px; 
	background-color: lightgray;
    color: black; font-size: 25px; line-height: 40px;
    text-align: right; border-radius: 10px;
    margin-bottom: 10px; 
}
button { width: 50px; height: 50px; float: left; }
</style>
<div class="mainBox">
	<div class="resultArea">0</div>
    <button data-value="C">C</button>
    <button data-value="(">(</button>
    <button data-value=")">)</button>
    <button data-value=">">&gt;</button>    
    <button data-value="7">7</button>
    <button data-value="8">8</button>
    <button data-value="9">9</button>
    <button data-value="/">/</button>    
    <button data-value="4">4</button>
    <button data-value="5">5</button>
    <button data-value="6">6</button>
    <button data-value="X">X</button>    
    <button data-value="1">1</button>
    <button data-value="2">2</button>
    <button data-value="3">3</button>
    <button data-value="-">-</button>    
    <button data-value="0">0</button>
    <button data-value=".">.</button>
    <button data-value="=">=</button> 
    <button data-value="+">+</button>    
</div>
<script>
onclick = function(e) {
	if( e.target.getAttribute("data-value") != null ) {
		alert( e.target.getAttribute("data-value") );
    }
}
</script>