1. Javascript Event
⦁ 사용자가 웹 브라우저를 사용하는 중에 발생시키는 키보드, 마우스 등의 입력
⦁ 이벤트 예제 1
<form>
<input type="button" value="Yes" onclick="alert('You pressed Yes');"/>
<input type="button" value="No" onclick="alert('You pressed No');"/>
</form>
2. Event 종류
2-1. Mouse Event
| 이벤트 이름 | 설명 |
| onclick | 요소를 클릭(버튼을 누른후 뗄때)했을때 발생 |
| onmousedown | 요소를 클릭(버튼을 눌렀을 때)했을때 발생 |
| onmouseup | 요소를 클릭(버튼을 뗄때)했을때 발생 |
| ondblclick | 요소를 더블클릭했을때 발생 |
| onmousemove | 요소 위에 마우스를 이동시킬때 발생 (이동시키는 동안에는 계속해서 이벤트가 발생) |
| onmouseover | 요소위에 마우스를 위치할때 발생 (요소 위에 위치할때 1회만 발생, 연속해서 발생X) |
| onmouseout | 요소위에 마우스를 벗어날때 발생 |
2-2. Keyboard Event
| 이벤트 이름 | 설명 |
| onkeypress | 키보드를 누를때 발생, 키보드를 떌때 발생 (계속 발생) |
| onkeydown | 키보드를 누를때 발생 (1회 발생) |
| onkeyup | 키보드를 누른후 뗄 때 발생 (1회 발생) |
2-3. Fram/Object Event
| 이벤트 이름 | 설명 |
| onload | 문서, 프레임, 객체 등이 웹 브라우저상에 로드가 완료 되었을때 발생 |
| onresize | 문서 창, 문서 뷰의 크기가 리사이즈(resize) 되었을 경우 발생 |
| onscroll | 문서 창, 문서 뷰가 스크롤 되었을 경우 발생 |
2-4. form Event
| 이벤트 이름 | 설명 |
| onchange | <input>, <select>, <textarea>등 form 요소 콘텐츠의 내용이 변경된후 focus가 해제될때 발생 |
| oninput | <input>, <textrea> 요소의 값이 변경될때마다 발생 |
| onselect | <input>과 <textarea>요소 내의 텍스트의 일부 혹은 전부가 선택 되었을때 발생 |
| onfocus onblur |
요소가 focus되었을때 발생 (마우스로 선택 또는 입력 커서가 위치한 경우 발생) 요소에 focus가 해제될때 발생 |
3. Event 쓰는법
3-1. 방법1 : html안에서 event 적용
더보기
<form>
<input id="username" type="text" value="Name of User" onclick="alert('Hello Javascript');" />
</form>3-2. 방법2 : javascript 함수 이름을 html에 가져와 event적용
더보기
<script type="text/javascript">
function myEventHandler() {
alert("Hello Javascript");
}
</script>
<form>
<input id="username" type="text" value="Name of User" onclick="myEventHandler();" />
</form>3-3. 방법3 : 태그의 id를 가져와 event적용
더보기
/** 방법 1 */
<script type="text/javascript">
function initPage() {
let h1 = document.getElementById("hello");
h1.style.color = "red";
h1.innerHTML = "Hello Javascript";
}
// onload 이벤트 연결
window.onload = initPage;
</script>
/** 방법 2 */
<script type="text/javascript">
window.onload = function () {
let h1 = document.getElementById("hello");
h1.style.color = "pink";
h1.innerHTML = "Hello Javascript";
}
</script>
<body>
<h1 id="hello"></h1>
</body>
4. 요소의 Event값을 확인하는 방법
f12(개발자 도구) 클릭
console 클릭
console.dir(document.getElementById('tag의 id')); > 작성
'Language > Javascript' 카테고리의 다른 글
| 2. Javascript 내장 객체 (0) | 2022.05.17 |
|---|---|
| 1. Javascript 사용자 정의 객체 (0) | 2022.05.15 |
| JavaScript 함수 (0) | 2022.05.12 |
| JavaScript 제어문 / 반복문 (0) | 2022.05.12 |
| JavaScript 기본 문법 (변수,연산자,명령어) (0) | 2022.05.12 |