다룰 이벤트 처리
- Timing 이벤트 (매초마다, 시간이벤트)
- onclick 이벤트 (클릭시)
- onload/onunload 이벤트 (웹페이지 진입시)
- onchange (focus가 해제될시)
- onmouseover / onmouseout (마우스를 위에 올려놓을시)
- onmousedown / onmouseup (버튼을 누른 순간 / 누른 손을 뗀 순간)
- js를 이용한 이벤트 핸들러
Timing 이벤트
주어진 시간 주기에 따라 코드가 실행되도록 하는 함수입니다.
밀리초(milliseconds)는 천 분의 1초를 가리키는 말입니다. 1000milliseconds 가 1초겠죠??
window는 최상위 객체로 생략해도 됩니다! (java의 object격)
이벤트 처리에서 진짜 주의해야하는것은 함수를 인자로 받을때 이름만 받아야한다는 것 입니다!
옳은 예) setTimeout( func , 1000);
틀린 예)setTimeout( func() , 1000); (함수를 인자로 받은게 아니라 실행한것..)
옳은 예) setTimeout( 'func()' , 1000); (함수이름을 문자열로 받았으므로 ok..)
나중에 onload등등 다른 함수에도 이렇게 해줘야합니다!
1. 특정 시간 후/주기로 함수 실행
명시된 milliseconds후에 , 지정한 함수를 실행합니다.
window.setTimeout(function , milliseconds)
명시된 milliseconds를 주기로 milliseconds마다 함수를 실행시킵니다.
window.setInterval(function, milliseconds)
2. Timing 함수를 정지 시키기
setTimeout() 함수의 실행을 멈춤
window.clearTimeout(timeoutVariable)
setInterval() 함수의 실행을 멈춤
window.clearInterval(timerVariable)
인자로 함수 변수를 받는데요, 아래 코드 처럼 수행해주시면 됩니다!
myVar = setTimeout(function, milliseconds);
clearTimeout(myVar);
///////////////////////////////////////////////////
myVar = setInterval(function, milliseconds);
clearInterval(myVar);3. Timing 함수의 인자에 익명 함수를 적용시키기
한번밖에 사용안할 일회성 함수는 익명으로 인자에 넣어주면서 정의하는 경우도 있습니다.
이름은 생략하고 중괄호안에 내용만 넣어줍니다.
setTimeout( function() { "함수내용" } , millisec );
setTimeout(function () { alert("setTimeout()을 사용하여 표시됩니다.") }, 3000);onclick 이벤트
버튼 등을 클릭했을때 이벤트 처리입니다.
아래 HTML문과 같이 수행해주시면 됩니다!
<input type="radio" name="C1" value="v1" onclick="changeColor('lightblue')">
파랑색
<input type="radio" name="C1" value="v2" onclick="changeColor('lightgreen')">
녹색위에서 언급한것처럼, onclick = changeColor; 로 하면 안되나요??
위에서는 changeColor라는 함수가 같은 문서내에 있어서 접근할수 있을것입니다.
그러나 html , js 처럼 다른 문서에 있으면 변수나 함수로 직접 접근하기 힘들겠죠?
그러니 html 문서에서 작성시에는 ()를 포함한 문자열로 해주셔야합니다.
같은 js 문서에서 작업할땐 onclick = changeColor로 하셔도 상관없습니다.
onload/onunload 이벤트
사용자가 웹 페이지에 진입하거나 나갈 때 발생하는 이벤트입니다.
웹페이지 자체에 진입하는거니까 주로 <body>태그와 같이 사용합니다.
1. html 문서에서
<body onload="onLoadDoc();">
</body>
2. JS문서에서
window.onload = onLoadDoc;
onchange 이벤트
focus 상태였다가 벗어나면 onchange이벤트가 발생합니다.
그래서 주로 input 필드와 함께 사용됩니다.
<input type="text" id="name" onchange="sub()">
onmouseover / onmouseout
hover와 비슷하게 마우스가 요소 위에 있을때에 대한 이벤트인데요,
hover : 마우스가 요소 위에 있는 동안
onmouseover : 마우스가 요소위에 진입했을 순간
onmouseout : 마우스가 요소위를 벗어난 순간
<div onmouseover="OnMouseIn (this)" onmouseout="OnMouseOut (this)">
hover와 다르게 마우스위를 벗어나도 원상복귀가 안되는데요, 그래서 보통 onmouseover / onmouseout를 같은 세트로 적용시켜줍니다.
여기서 this는 현재 엘리먼트(div)를 받아서 인자로 보내는 것입니다!
onmousedown / onmouseup
onmousedown는 마우스를 눌렀을때, onmouseup마우스를 눌렀다 뗐을때입니다!
<button onmousedown="OnButtonDown(this)" onmouseup="OnButtonUp(this)">
눌러보세요!
</button>
이전 함수처럼 클릭을 한 후 자동으로 원상복귀가 안되므로 onmousedown / onmouseup를 세트로 적용해줍니다!
이벤트 핸들러란?
이벤트 핸들러란 이벤트 발생시 수행해야할 동작을 정의 하는것을 말합니다.
<input type="radio" name="C1" value="v1" onclick="changeColor('lightblue')">
이 코드는 HTML을 통해 이벤트 핸들러를 적용한것인데요, 빨간색 글씨 부분이 이벤트 핸들러인거죠.
클릭했을때 수행할 함수를 정의하는 부분이니까요.
지금까지 예제는 html문서 안에다가 이벤트 핸들러를 다뤘습니다.
그러나 js구문은 최대한 js파일에 있는게 선호되는데요, 어떻게 하면 html문서말고 js문서 안에다 이벤트 핸들러를 넣을수 있는지 알아봅시다.
이벤트 핸들러를 JS 문서안에 넣기
//html 파일
<button id="ok">
OK
</button>
// js 파일
var button1 = document.getElementById("ok");
button1.onclick = okayClick;
//버튼을 눌렀을떄 기능 정의
function okayClick() { alert("okayyy"); }우리가 저번 DOM 포스트에서 배운 html속성 바꾸는 코드를 적용시키면 위처럼 나오겠죠?
그러나 js파일은 head영역에서 로딩이 되므로 아직 body를 로딩하지 않은 상태입니다.
그러면 getElementId가 엘리먼트를 못찾아서 오류가 생깁니다!
js이벤트 핸들러는 문서 로딩이 끝난 다음에 추가되어야 합니다!
문서 로딩후 이벤트 핸들러가 뭐였죠?? onload 기억나시나요?
window.onload = pageLoad;
//페이지가 로딩될때 페이지로딩함수 실행
//로딩했을때 이벤트핸들러를 추가해주는 페이지로딩함수
function pageLoad() {
var button1 = document.getElementById(“ok”);
button1.onclick = okayClick;
}
//버튼을 눌렀을떄 기능 정의
function okayClick() { alert("okayyy"); }이렇게 해주시면 html에 js코드를 넣지 않고 js파일 만으로 이벤트 핸들러를 추가해줄수 있습니다.
화이팅~~!
'Front-End (JS , jQuery)' 카테고리의 다른 글
| [jQuery / JS] DOM, CSS 변경 / 반환하기 (text ,attr , css , show...) (0) | 2022.05.31 |
|---|---|
| [jQuery] 이벤트 처리 , 기초 세팅 (0) | 2022.05.15 |
| [HTML/JS] DOM(문서 객체 모델) 기초 (0) | 2022.05.02 |
| [HTML/JS] BOM(Browser Object Model) , window객체 (0) | 2022.04.18 |
| JS 배열 (Array) - 자바스크립트 (0) | 2022.04.18 |
댓글