이벤트 처리 방식
- 인라인 이벤트 핸들러 : HTML 태그에 직접 이벤트 달기
- 고전 방식의 이벤트
- DOM 이벤트 리스너 등록
자주 사용되는 이벤트 핸들러
| 이벤트 핸들러 | 설명 |
| onLoad | HTML 문서나 특정 요소가 로드 되었을 때 발생 |
| onUnLoad | HTML 문서나 특정 요소가 사라질 때 발생 |
| onClick | 클릭했을 때 발생 |
| onKeyUp | 키를 눌렀다가 떼었을 때 발생 |
| onKeyPress | 키를 누를 때 발생 |
| onMouseDown | 마우스 버튼 눌렀을 때 발생 |
| onMouseUp | 마우스 버튼 눌렀다가 떼었을 때 발생 |
| onMouseOver | 포커스로 마우스 포인터가 들어갈 때 발생 |
| onMouseOut | 포커스로 마우스 포인터가 나갈 때 발생 |
| onMouseMove | 마우스를 움직일 때 발생 |
| onResize | 문서의 특정 요소의 크기가 변경될 때 발생 |
| onSubmit | 폼의 submit 버튼을 눌렀을 때 발생 |
| onReset | 폼의 reset 버튼을 눌렀을 때 발생 |
인라인 방식과 고전 방식의 이벤트 처리 방식 사용 시 주의사항
- 동일한 객체에 대해 동일한 이벤트를 여러 번 사용 불가
- 위와 같은 경우, 마지막으로 적용된 이벤트가 반영됨
- addEventListner는 동일 이벤트 여러 번 적용 가능
동일한 객체에 대해 동일한 이벤트를 여러 번 사용 불가 예제
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Javascript </title>
<script type="text/javascript">
function show1() {
alert("실행1");
}
function show2() {
alert("실행2");
}
window.onload = show1;
window.onload = show2; // 마지막 이벤트 하나만 적용
</script>
</head>
<body>
</body>
</html>DOM 이벤트 리스너 등록
- addEventListner() 메소드 사용해서 이벤트 리스너 등록
객체.addEventListner(‘이벤트명’, function(){ // 콜백 함수로 전달
});- 콜백 함수로 화살표 함수 사용할 경우
객체.addEventListner(‘이벤트명’, () => {
});
예제 : 인라인 이벤트 핸들러
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Javascript </title>
<script type="text/javascript">
function show() {
alert("클릭2");
}
</script>
</head>
<body>
<div onClick="alert('클릭1')">클릭1</div>
<div onClick="show()">클릭2</div>
</body>
</html>
예제 : 고전 방식의 이벤트 처리
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Javascript </title>
<script type="text/javascript">
// 윈도우 로드 되었을 때
window.onload = function() {
var birdImg = document.getElementById("birdImg");
// 이미지에 마우스 올렸을 때 이벤트 처리
birdImg.onmouseover = function() {
birdImg.style.opacity = 0.5; // 불투명도
}
// 이미지에서 마우스 땠을 때 이벤트 처리
birdImg.onmouseout = function() {
birdImg.style.opacity = 1;
}
}
// 문서 상에서 오른쪽 마우스 클릭했을 때 이벤트 처리
document.oncontextmenu = function() {
alert("마우스 오른쪽 버튼 사용을 금지합니다.");
// return false;
event.preventDefault(); // 기본으로 contextmenu가 뜨게 되는 것을 막아줌
}
</script>
</head>
<body>
<img id="birdImg" src="image/bird.jpg">
</body>
</html>
예제 : addEventListner - 1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Javascript </title>
<script type="text/javascript">
window.onload = function() {
var greenBtn = document.getElementById("greenBtn");
var redBtn = document.getElementById("redBtn");
var h2 = document.getElementById("h2");
greenBtn.addEventListener("click", function() {
h2.style.color = "green";
});
redBtn.addEventListener("click", function() {
h2.style.color = "red";
});
}
</script>
</head>
<body>
<h2 id="h2">제목 색상 변경</h2>
<button id="greenBtn">green</button>
<button id="redBtn">red</button>
</body>
</html>
예제 : addEventListner는 동일 이벤트 여러 번 적용 가능 : addEventListner - 2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Javascript </title>
<script type="text/javascript">
window.onload = function() {
var btn = document.getElementById("btn");
btn.addEventListener("click", show1); // 콜백 함수
btn.addEventListener("click", show2);
}
function show1() {
alert("실행1");
}
function show2() {
alert("실행2");
}
</script>
</head>
<body>
<button id="btn">클릭</button>
</body>
</html>
예제 : 화살표 함수 사용 : addEventListner - 3
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Javascript </title>
<script type="text/javascript">
window.onload = () => {
let box = document.getElementById("box");
box.addEventListener("mousedown", event => {
event.currentTarget.style.background="green";
});
box.addEventListener("mouseup", event => {
event.currentTarget.style.background="white";
});
};
</script>
</head>
<body>
<button id="box">클릭</button>
</body>
</html>'Frontend > Javascript' 카테고리의 다른 글
| 폼 유효성 확인 예제 (0) | 2021.12.13 |
|---|---|
| form 객체 (0) | 2021.12.10 |
| 문서 객체 모델 (Document Object Model) (0) | 2021.12.10 |
| 브라우저 객체 모델 (Browser Object Model) (0) | 2021.12.10 |
| 자바스크립트 객체 (Object) - 내장 객체 (0) | 2021.12.09 |
