자바스크립트 - 이벤트
-이벤트 종류
마우스 / 키보드 / HTML프레임 / HTML 입력 양식 / 유저 인터페이스/ 구조 변화 / 터치 이벤트
-이벤트 모델
문서 객체에 이벤트를 연결하는 방법
-이벤트 핸들러
이벤트를 처리하는 함수?
-onclick
<!DOCTYPE html>
<html>
<head>
<script>
window.onload = function () {
// 변수를 선언합니다.
var header = document.getElementById('header');
// 이벤트를 연결합니다.
header.onclick = function () {
alert('클릭');
};
// 이벤트를 제거합니다.
//header.onclick = null;
};
</script>
</head>
<body>
<h1 id="header">Click</h1>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script>
</script>
</head>
<body>
<h1 onclick="var alpha=10;alert(alpha);">Click</h1>
</body>
</html>
<head>
<script>
function whenClick(e) {
alert('클릭');
}
</script>
</head>
<body>
<h1 onclick="whenClick(event)">Click</h1>
</body>
-onclick 이벤트 전파(이중 submit)
버블링: 어떤 이벤트가 자식노드에서 부모 노드 순으로 발생하는 것
<head>
<script>
window.onload = function () {
// 이벤트를 연결합니다.
document.getElementById('header').onclick = function () {
alert('header');
};
document.getElementById('paragraph').onclick = function () {
alert('paragraph');
};
};
</script>
</head>
<body>
<h1 id="header">
<p id="paragraph">Pagagraph</p>
</h1>
</body>
-onclick 이벤트 전파 방지 stopPropagation / cancelBubble(익스플로러 전용)
<head>
<script>
window.onload = function () {
// 이벤트를 연결합니다.
document.getElementById('header').onclick = function () {
alert('header');
};
document.getElementById('paragraph').onclick = function (e) {
// 이벤트 객체를 처리합니다.
var event = e || window.event;
// 이벤트 발생을 알립니다.
alert('paragraph');
// 이벤트 전달을 제거합니다.
event.cancelBubble = true;
if (event.stopPropagation) {
event.stopPropagation();
}
};
};
</script>
</head>
<body>
<h1 id="header">
<p id="paragraph">Pagagraph</p>
</h1>
</body>
-onsubmit
<head>
<script>
window.onload = function () {
// 이벤트를 연결합니다.
document.getElementById('my_form').onsubmit = function () {
// 변수를 선언합니다.
var pass = document.getElementById('pass').value;
var pass_check = document.getElementById('pass_check').value;
// 비밀번호가 같은지 확인합니다.
if (pass == pass_check) {
alert('성공');
} else {
alert('다시 입력해주세요.');
return false;
}
};
};
</script>
</head>
<body>
<form id="my_form">
<label for="name">이름</label><br/>
<input type="text" name="name" id="name"/><br/>
<label for="pass">비밀번호</label><br/>
<input type="password" name="pass" id="pass"/><br/>
<label for="pass_check">비밀번호 확인</label><br/>
<input type="password" id="pass_check"/><br/>
<input type="submit" value="제출"/>
</form>
</body>
-onsubmit : return
<head>
<script>
function whenSubmit() {
// 변수를 선언합니다.
var pass = document.getElementById('pass').value;
var pass_check = document.getElementById('pass_check').value;
// 비밀번호가 같은지 확인합니다.
if (pass == pass_check) {
alert('성공');
} else {
alert('다시 입력해주세요.');
return false;
}
}
</script>
</head>
<body>
<form id="my_form" onsubmit="return whenSubmit()">
<label for="name">이름</label><br/>
<input type="text" name="name" id="name"/><br/>
<label for="pass">비밀번호</label><br/>
<input type="password" name="pass" id="pass"/><br/>
<label for="pass_check">비밀번호 확인</label><br/>
<input type="password" id="pass_check"/><br/>
<input type="submit" value="제출"/>
</form>
</body>
-attachEvent(익스플로러 전용)
<!DOCTYPE html>
<html>
<head>
<script>
// 윈도우가 로드될 때
window.attachEvent('onload', function () {
// myHeader를 가져옵니다.
var header = document.getElementById('myHeader');
// 이벤트를 연결합니다.
header.attachEvent('onclick', function () { alert('클릭'); });
header.attachEvent('onclick', function () { alert('클릭'); });
header.attachEvent('onclick', function () { alert('클릭'); });
});
</script>
</head>
<body>
<h1 id="myHeader">Click</h1>
</body>
</html>
-detachEvent
<!DOCTYPE html>
<html>
<head>
<script>
window.onload = function () {
var header = document.getElementById('myHeader');
var handler = function () { alert('클릭'); };
header.attachEvent('onclick', handler);
header.detachEvent('onclick', handler);
};
</script>
</head>
<body>
<h1 id="myHeader">Click</h1>
</body>
</html>
-addEventListener
<!DOCTYPE html>
<html>
<head>
<script>
window.onload = function () {
var header = document.getElementById('myHeader');
header.addEventListener('click', function () {
this.innerHTML += '+';
});
};
</script>
</head>
<body>
<h1 id="myHeader">Click</h1>
</body>
</html>