이벤트 처리
- 마우스/키보드의 입력에 대한 처리
이벤트의 종류
- 마우스 : 클릭, 더블클릭, 이동, 좌/우버튼 등
- 키보드 : 키 다운, 키 업 등
- 기타 페이지가 열렸을 때, 입력 요소가 포커스를 가질 때 등
이벤트 처리 방식
- 태그에 직접 등록 → <body onload="alert('출력')">
- 태그의 이벤트 속성에 함수 이름 동록 → event01.html
- addEventListener(event, function) → HTML 태그와 별개로 스크립트 영역으로만 처리하는 방식
event keyword
- 포커스 : focusin/focusout
- 키보드 : keydown/keyup
- 마우스 : click, dblclick, mouseenter, mouseout, mousemove, mousedown, mouseup, mouseover
마우스 위치 event 예제)
<body>
<div id="over" onmouseover="mEvent('over')"
onmouseout="mEvent('out')"></div>
</body>
<script>
function mEvent(evt){
if(evt == 'over'){
document.getElementById('over').innerHTML='마우스 입장!'; }
if(evt == 'out'){
document.getElementById('over').innerHTML='마우스 퇴장!';
}
}
</script>
마우스 위치에 따른 이벤트 확인 가능.
날짜 함수 활용한 이벤트 예제)
<body>
<h3>오늘의 날짜 : <span id="demo"></span></h3>
<button onclick="getDay()">날짜 출력</button>
</body>
<script>
function getDay(){
document.getElementById('demo').innerHTML=Date();
}
</script>
키보드 이벤트 예제)
<body>
<input id="keyon" type="text" onkeydown="going()">
<h4 id="typing"></h4>
</body>
<script>
function going(){
var msg = document.getElementById('keyon').value;
document.getElementById('typing').innerHTML=msg;
}
</script>
키보드가 눌리게되면 going 함수 호출.
going 함수는 입력 창에 있는 입력값을 가져와서 출력, value 속성에 있는 값을 가져감
키가 눌리는 시점에는 데이터가 없기 때문에 그 데이터는 넘어가지 못함.
onchange 예제)
<body>
<select id="mysel" onchange="myselect()">
<option>현대</option>
<option>기아</option>
<option>쉐보레</option>
<option>BMW</option>
</select>
<h4 id=selres></h4>
</body>
<script>
function myselect(){
var msg = document.getElementById('mysel').value;
document.getElementById('selres').innerHTML=msg;
}
</script>
선택한 옵션이 selres 부분에 출력됨.
자바 스크립트 예제 야구 게임
|
규칙 |
<body>
<button id="ball">ball</button>
<button id="strike">strike</button>
<button id="restart" style="display: none;">재시작</button>
<br>
<br>
B : <b id="b">0</b><br>
S : <b id="s">0</b><br>
O : <b id="o">0</b><br>
<script>
// 1. 모든 요소를 변수화 합니다.
var bntBall = document.getElementById('ball');
var bntStrike = document.getElementById('strike');
var bntRestart = document.getElementById('restart');
var ball = document.getElementById('b');
var strike = document.getElementById('s');
var out = document.getElementById('o');
// 2. 각 카운트용 변수 작성
var cntBall = 0;
var cntStrike = 0;
var cntOut = 0;
// 3. 버튼 클릭에 대한 이벤트리스너 작성
bntBall.addEventListener('click', bclick);
bntStrike.addEventListener('click', sclick);
bntRestart.addEventListener('click', rclick);
function bclick() {
cntBall += 1;
alert(cntBall + " ball!!");
if (cntBall == 4) {
cntBall = 0; cntStrike = 0;
}
document.getElementById('b').innerHTML = cntBall;
document.getElementById('s').innerHTML = cntStrike;
}
function sclick() {
cntStrike += 1;
alert(cntStrike + " strike!!");
if (cntStrike == 3) {
cntBall = 0;
cntStrike = 0;
cntOut += 1;
alert(cntOut + " Out!!");
if (cntOut == 3) {
cntBall = 0; cntStrike = 0; cntOut = 0;
alert(cntOut + " Out GameOver!!");
document.getElementById('restart').style.display = 'inline';
bntBall.disabled = true;
bntStrike.disabled = true;
}
}
document.getElementById('b').innerHTML = cntBall;
document.getElementById('s').innerHTML = cntStrike;
document.getElementById('o').innerHTML = cntOut;
}
function rclick() {
bntRestart.style.display = 'none';
bntBall.disabled = false;
bntStrike.disabled = false;
}
</script>
</body>
'javascript' 카테고리의 다른 글
| 0601 javascript - 객체, Date객체, 문서 객체 모델, 문서 객체 생성, 요소 노드 생성 (0) | 2020.06.03 |
|---|---|
| 0529 javascript - 지역변수, 전역변수, 함수 인자처리, 배열, 배열용 함수 (0) | 2020.05.31 |
| 0528 javascript - 입출력, 작성위치, 외부스크립트, 변수, 연산자, 제어문 (0) | 2020.05.31 |