기본적으로 흐름은
- 사용자가 무언가를 함(혹은 브라우저가)
- 이벤트가 발생
- 이벤트에 따른 함수 실행
- 변화
Timing Event(시간 주기를 이용한 이벤트)
(대부분은 window. 생략합니다!!)
window.setTimeout(함수, 밀리sec)
- 적어놓은 밀리sec 이후에 함수 한 번 실행.
window.setInterval(함수, 밀리sec)
- 적어놓은 밀리sec 주기로 함수 반복 실행.
window.clearTimeout(setTimeout 담긴 변수)
- setTimeout()의 짝궁.
- setTimeout() 함수 실행 중지. (밀리sec 되기 전 실행 아예 안시키도록)
window.clearInterval(setInterval 담긴 변수)
- setInterval()의 짝궁.
- setTimeout() 함수 실행 중지. (돌아가는 중이던, 돌아가기 전이던 중지시킴)
위 두 clear 메소드의 선행 조건!!!
=> set... 메소드(짝궁)가 어떠한 변수 담겨 있어야. 그 변수로 중지시킬 수 있음!
onload / onunload Event(페이지 진입, 나갈 때 발생)
말 그대로;;
해당 태그가 로드 완료되면 실행되는 이벤트 or 반대.
onclick Event(클릭 이벤트; 걍 네임드ㅋ)
모르면 이상한거.
해당 태그 클릭시(버튼 같은거) 작동.
onchange Event(focus 상태였다가 벗어나면 발생)
주로 input과 함께 사용. (특히 type="text")
onmouseover / onmouseout Event(마우스가 올라가거나 나올때 발생)
CSS의 :hover가 얘 둘다 지닌거.
onmousedown / onmouseup Evnet(클릭 하거나 클릭 땔때 발생)
CSS의 :click이 이 두개를 다 지닌거.
this를 넘겨주어 바로 태그를 접근하자
이벤트는 해당 태그에서 함수를 실행한다. 그렇기에 함수에 this로 인자를 넘겨주어 바로 js에서 접근이 가능하다.
(굳이 getElemet.. 뭐시기를 타고 타고 타고 가서 찾을 필요가 없음)
Example) onmouseover / onmouseout : this로 바로 넘겨주기
<html>
<head>
<script>
function OnMouseIn(elem)
{
elem.style.border = "2px solid red";
}
function OnMouseOut(elem)
{
elem.style.border = "";
}
</script>
</head>
<body>
<div style="background-color: yellow; width: 200px" onmouseover="OnMouseIn (this)" onmouseout="OnMouseOut (this)">
마우스를 이 요소 위에 이동하세요.
</div>
</body>
</html>
음 다써보고 나니 그냥 나열했는데,
쓰는 법은 걍 다 똑같음
<태그 이벤트 처리명="함수();"> 이런식임
다만 주로 버튼에 다냐, 머 특정 태그에 다냐 이런 차이지.
'Computer Science > 웹 프로그래밍' 카테고리의 다른 글
| 정규 표현식의 활용 (0) | 2024.07.15 |
|---|---|
| 이벤트 핸들러 부착(Attaching an Event Handler) (0) | 2024.07.14 |
| BOM 개념과 활용 (0) | 2024.07.10 |
| DOM의 요소 관계와 JS에서의 사용 (1) | 2024.07.09 |
| JS에서 Random 값 받기(Math.random()) (0) | 2024.07.09 |