JavaScript
이벤트 핸들러와 이벤트 처리
- 인라인 이벤트 핸들러 - HTML 태그에 직접 이벤트 달기
<img src = "A.png" onMouseOver="alert("msg")">
<img src = "B.png" onMouseOver="showB()">
- 고전 방식의 이벤트
객체.onclick = function() {
alert("msg");
}
- DOM : 이벤트 리스너 등록
addEventListener('이벤트 종류', '함수이름');
removeEventListener();
자주 사용하는 이벤트 핸들러
onLoad: HTML 문서나 특정 요소가 로드되었을 때 발생
onUnload: HTML 문서나 특정 요소가 사라질 때 발생
onClick: 클릭했을 때 발생
onKeyUp: 키를 눌렀다가 떼었을 때 발생
onKeyPress: 키를 누를 때 발생
onMouseDown: 마우스 버튼 눌렀을 때 발생
onMouseUp: 마우스 버트느 눌렀다가 떼었을 때 발생
onMouseOver: 포커스로 마우스 포인터가 들어갈 때 발생
onMouseOut: 포커스에서 마우스 포인터가 나갈 때 발생
onResize: 무서의 특정 요소의 크기가 변경될 때 발생
onSubmit : 폼의 submit 버튼을 눌렀을 때 발생
onReset : 폼의 reset 버튼 눌렀을 때 발생
인라인 방식과 고전 방식의 이벤트 처리 방식의 경우
- 동일한 객체에 대해 동일한 이벤트를 여러 번 사용 불가
- 마지막 이벤트 하나만 적용
sameEvent.html
<script type="text/javascript">
function show1() {
alert("실행1");
}
function show2() {
alert("실행2");
}
window.onload = show1;
window.onload = show2;
</script>
인라인 방식 예제
event.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</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 lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</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>
고전 방식 예제
mouseEvent.html
<!DOCTYPE html>
<html lang="en">
<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("마우스 오른쪽 버튼 사용을 금지합니다.");
event.preventDefault();
}
</script>
</head>
<body>
<img src="image/bird.jpg" id="birdImg">
</body>
</html>
DOM 이벤트 리스너 등록
addEventListener() 메소드 사용해서 이벤트 리스너 등록
객체.addEventListener("이벤트명", function() { // 콜백 함수로 전달
});
객체.addEventListener('이벤트명', () =>{
});
addEventListener.html
addEventListener는 동일 이벤트 여러 번 적용 가능
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript addEventListener()</title>
<script type="text/javascript">
window.onload = function() {
var greenBtn = document.getElementById('greenBtn');
var redBtn = document.getElementById('redBtn');
var h2 = document.getElementById('h2');
// 개체에 이벤트 리스너 등록 : click 이벤트
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>
addEventListener2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
<script type="text/javascript">
window.onload = function() {
var btn = document.getElementById('btn');
// 동일 이벤트 여러 번 적용 가능 : show1()과 show2() 둘 다 실행
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>
addEventListener3.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
<script type="text/javascript">
window.onload = () => {
let box = document.getElementById('box');
box.addEventListener('mousedown', event => {
box.style.background = 'green';
});
box.addEventListener('mouseup', event => {
event.currentTarget.style.background = 'white';
});
};
</script>
</head>
<body>
<div id="box">클릭</div>
</body>
</html>
