자바스크립트 이벤트 종류
- 마우스 이벤트
- 키보드 이벤트
- HTML 프레임 이벤트
- HTML 입력 양식 이벤트
- 유저 인터페이스 이벤트
- 구조 변화 이벤트
- 터치 이벤트
ㅇ 고전이벤트 모델
- 자바스크립트에서 문서 객체의 이벤트 속성을 사용해 이벤트를 연결하는 방법
- 이벤트 하나에 이벤트 핸들러 하나만 연결 가능
ㅇ 이벤트 발생 객체와 이벤트 객체
- 이벤트 핸들러 안에서 This 키워드를 사용하면 이벤트가 발생할 객체를 찾을 수 있음
스크립트 위치에 따른 구현 시작
문서 내에 <head>에 자바스크립트 내용을 적으면 <body> 영역이 만들어 지기 전에 자바스크립트가 실행된다.
그렇다 보니 <body> 영역 내의 태그에 스크립트가 접근하지 못해서, 초기에 구현되어야 하는 자바스크립트가 제대로 실행되지 않는다. 그렇기 때문에 window.onload = function 라고 써야 body가 만들어지고 나서 자바스크립트가 제대로 DOM에 접근하게 된다.
ㅇ form 태그 기본 이벤트 해제
- 폼 요소 버튼을 누르면 우선적으로 submit 이벤트(서버에 제출)가 발생, 만약 서버에 제출하지 않고 자바스크립트 로 처리가 필요하다면 이러한 기본 이벤트를 차단해야 한다.
- 폼에서 전송을 누르면 웹 브라우저가 이벤트 값을 서버로 전송하고 자동으로 폼을 초기화 하기 때문
- event.preventDefault( );
- preventDefault( ) 메서드로 기본 이벤트 해제 가능
ㅇ 터치이벤트
|
touchstart |
화면을 건드렸을때 |
|
touchend |
화면에서 손을 떼었을 때 |
|
touchmove |
화면에서 터치로 이동중일 때 |
- var touch = {
start : function( ) { },
end : function( ) { },
move : function( ) { }
}
//터치 이벤트 리스터 추가
box.addEventListener('touchstart', touch.start);
box.addEventListener('touchend', touch.end);
box.addEventListener('touchmove', touch.move);
ㅇ 이벤트 바인딩
- 바인딩이란 함수를 외부에 작성하고 내부에서는 함수명만 작성하는 방식
마우스 액션 기능
- onmouseover : 마우스를 올리는 경우 동작
- onmouseleave : 마우스가 해당 속성에서 떠나면 동작
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
var recommend = function() {
var str = "<ul>";
str += "<li>서울</li>";
str += "<li>부산</li>";
str += "<li>강릉</li>";
str += "<li>제주</li>";
str += "</ul>";
document.getElementById("output").innerHTML=str;
}
var remove = function() {
document.getElementById("output").innerHTML="";
}
</script>
</head>
<body>
<h2>여행지 추천</h2>
<button onmouseover="recommend()" onmouseleave="remove()">추천</button>
<div id="output"></div>
</body>
</html>
반응형
'Java Script > Java Script' 카테고리의 다른 글
| JS 예제 : 시간에 따라 이미지 변경( 낮과 밤) (0) | 2019.05.11 |
|---|---|
| JavaScript 타이머 설정 , setTimer (0) | 2019.05.11 |
| JavaScript 함수 만드는 방법 (0) | 2019.05.11 |
| JavaScript DOM : 문서 동적화 (0) | 2019.05.11 |
| JavaScript 배열 / 객체 기본 (0) | 2019.05.11 |
댓글