1. 이벤트
마우스 클릭, 키보드 입력, 로딩, 타임아웃 등 사용자의 입력행위나 브라우저의 상태 변화를 브라우저가 자바스크립트 코드에게 알리는 통지
이벤트리스너
발생한 이벤트에 적절하게 대처하기위해 작성된 자바스크립트코드
이벤트가 DOM객체에 발생한다 == 이벤트가 HTML태그에 발생한다 == 객체에 이벤트가 발생한다
이벤트리스너 만들기
- HTML 태그내에 작성
!<!DOCTYPE html>
<html>
<body>
<p onmouseover="this.style.backgroundColor='red'"
onmouseout="this.style.backgroundColor='black'";>
마우스 올리면 색 변경 </p>
</body>
</html>- DOM객체의 이벤트리스너 프로퍼티에 작성
<!DOCTYPE html>
<html>
<body>
<script>
var p;
function init(){ //문서가 완전히 로드되었을 때 호출
p = document.getElementById("p");
p.onmouseover = over; //over()리스너로 등록 단 이름만 넣어야 함
p.onmouseout = out;
}
function over(){
p.style.backgroundColor = "orchid";
}
function out(){
p.style.backgroundColor="white";
}
</script>
<p id="p">마우스 올리면 색 변경</p>
</body>
</html>- DOM객체의 addEventListener()메소드 활용
다른 이벤트리스너들과 달리 removeEventListener이용해 제거 가능
동일 이벤트 리스너에 여러 함수 중복 등록 가능
<!DOCTYPE html>
<html>
<body>
<script>
var p;
function init(){
p = document.getElementById("p");
p.addEventListener("mouseover", over);
p.addEventListener("mouseout", out);
}
function over(){
p.style.backgroundcolor = "red";
}
function out(){
p.style.backgroundcolor="black";
}
</script>
<p id="p">마우스 올리면 색 변경</p>
</body>
</html>- 익명함수로 이벤트 리스너 작성
익명함수: 함수 이름 없이 필요한 곳에 함수 바로 작성하는 방법
<!DOCTYPE html>
<html>
<body>
<script>
var p;
function init(){
p = document.getElementById("p");
p.onmouseover = function(){
this.style.backgroundcolor = "red";
}
p.addEventListener("mouseout",
function(){
this.style.backgroundcolor="black";
}
);
</script>
<p id="p">마우스 올리면 색 변경</p>
</body>
</html>
2. 이벤트 객체
이벤트에 대한 다양한 정보 담은 이벤트 객체
이벤트 리스너로 전달됨
이벤트 처리후 이벤트 객체는 소멸됨
이벤트 객체 전달받기
1. 이름을 가진 이벤트리스너 함수인 경우
function f(e){}
obj.onclick = f;2. 익명 함수인 경우
obj.onclick = function(e){}3. html태그의 리스너의 경우
function(e){}
<button onclick="f(event)"> 버튼 </button>
<div onclick="alert(evetn.type)">버튼</div>
이벤트 객체에 들어있는 정보
프로퍼티, 메소드가 들어있다.
이벤트 종류에 따라 프로퍼티와 메소드가 다르다.
이벤트 타겟과 target프로퍼티
target프로퍼티: 이벤트 타겟 객체
이벤트 타겟: 이벤트를 유발시킨 객체(태그)
이벤트의 디폴트 행동 취소, preventDefault()
a, checkbox 등
1. onclick = "return false"로 지정
2. onclick="event.preventDefault()"로 지정
3. 이벤트 흐름
이벤트 흐름과 이벤트리스너
캡쳐단계
window >> 타깃객체
버블단계
타깃객체 >>window
캡쳐 리스너와 버블 리스너
하나의 돔 객체가 둘 모두 가질 수 있으므로 분ㄴ명히 지정해야 한다.
이벤트 흐름 중단, stopPropagation()l
4. 마우스핸들링
onclick: 클릭시
ondbclick: 더블 클릭시
onmousemove: 마우스가 움직이는 동안
oncontextmenu: 마우스 오른쪽 버튼 클릭시 출력되는 메뉴
5.문서와 이미지 로딩
문서의 로딩 완료
window.onload = "alert('onload');
<body onload="alert('onload')">
6.폼과 이벤트 활용
onblur: 포커스 잃는 요소
onfocus: 포커스 얻는 요소
'학교수업 > 웹 프로그래밍' 카테고리의 다른 글
| 08. HTML DOM과 Document (0) | 2022.06.08 |
|---|---|
| 07. 자바스크립트 코어 객체와 배열 (0) | 2022.06.08 |
| 6. 자바스트립트 언어 (0) | 2022.06.08 |
| 5. CSS 고급활용 (0) | 2022.06.07 |
| 4. CSS (0) | 2022.06.06 |