이벤트란 어떤 행동을 했을 때 벌어지는 일이라고 이해하면 되는데
여태껏 사용했던 기능으로 Button 태그에 기능을 부여하는, 클릭(행동)했을 때 작동할 함수를 정해주는 일을 이벤트라고 한다.
다음과 같은 종류가 있다.
고전 이벤트 모델 : 과거에는 button 속성에 onclick="함수명"과 같이 안쓰고 스크립트에서
태그ID.onclick = function(){}과 같이 사용했던 방법을 말한다.
옛날에 사용했던 방법이라고 지금 안 쓰는 것은 아니고 자주 쓰이는 편이다.
이벤트 발생 객체 : 발생한 이벤트에 대한 정보를 담고 있는 객체이다.
예를들어 클릭했을 경우 클릭의 위치는 어디인가? 언제 눌렀나와 같은 잡다할 수 도 있고 유용할 수 있는 정보들이다.
인라인 이벤트 모델 : 여태껏 사용했던 이벤트 선언 방법으로 보통 이 방법을 사용함
태그 속성에 해당하는 이벤트 모델을 선언하고 함수를 부여한다.
그리고 script에 함수에 대한 정보를 입력한다.
표준 이벤트 모델 : 스크립트에서 태그 변수를 불러와 이벤트를 직접 지정하는 방법이다.
보통 태그변수.addEvent*****('이벤트 명', function() {})와 같이 사용한다.
이벤트 중지 : 이벤트는 기본적으로 return 값이 따로 있다. true & false를 리턴하며 true는 정상적으로 끝냈음을
의미하고 false는 실패를 의미.
다음 예에서 쓰이는 방법은 form 태그로 둘러서 submit 버튼을 누르면 이벤트가 끝날 시 정보들을 서버에 전달하는데
return에 false를 주면 전달을 막을 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.area{
background: lightgray;
border: 1px solid black;
height: 100px;
}
</style>
</head>
<body>
<h1>이벤트</h1>
<h3>고전 이벤트 모델</h3>
<button id="test1">test1() 실행확인</button>
<button id="test2">test2() 실행확인</button>
<div id="area1" class="area"></div>
<script type="text/javascript">
var test1 = document.getElementById("test1");
var test2 = document.getElementById("test2");
test1.onclick = function() {
var area1 = document.getElementById("area1");
area1.innerHTML += "test1()이 실행되었습니다.<br>";
}
test2.onclick = function() {
var area1 = document.getElementById("area1");
area1.innerHTML = "test2()가 실행되면서 test1() 이벤트 제거<br>";
test1.onclick = null;
}
</script>
<hr>
<h3>이벤트 발생 객체</h3>
<button id="test3">test3() 실행확인</button>
<div id="area2" class="area"></div>
<script type="text/javascript">
var test3 = document.getElementById("test3");
test3.onclick = function(e) {
// 매개변수를 위와같이 아무거나 입력하면 이벤트 발생 정보가 인자로 들어옴
// this는 이벤트가 발생한 노드를 말함
this.style.color = "white";
this.style.background = "red";
// 넘어오는 값이 있으면 앞의 값, e가 대입
// 없으면 window.event 값을 대입한다.
// IE에서는 e 값이 안넘어온다.
var event = e || window.event;
var area2 = document.getElementById("area2");
for ( var key in event) {
area2.innerHTML += key + " : " + event[key] + "<br>";
}
// 이벤트 요소는 출력과 같이 많이 나오지만 왠만한건 클릭으로 끝나서 쓸 일이 없다.
}
</script>
<hr>
<h3>인라인 이벤트 모델</h3>
<button onclick="test4();">실행확인</button>
<div id="area3" class="area"></div>
<script type="text/javascript">
function test4() {
alert("test4() 실행확인!");
}
</script>
<!-- 아예 바로 button에 js를 선언하는 방법도 있다. 이것을 인라인 이벤트라고 함 -->
<!-- '' "" 쓰임에 주의 -->
<button onclick="var test='안녕하세요'; alert(test);">실행확인</button>
<hr>
<h3>표준 이벤트 모델</h3>
<p>한 번에 여러가지 이벤트 핸들러를 추가할 수 있다.<br>
익스플로러 9버전부터 지원한다.</p>
<button id="btn">실행확인</button>
<script type="text/javascript">
window.onload = function() {
var btn = document.getElementById("btn");
btn.addEventListener('click', function() {
alert("표준 이벤트")
});
btn.addEventListener('mouseenter', function() {
btn.style.background = 'red';
})
}
</script>
<hr>
<h3>기본 이벤트의 제거</h3>
<p>a태그 클릭하면 다른페이지로 이동한다<br>
submit버튼이나 form안에 일반 버튼을 누르면 자동으로 입력 양식을 제출하고 새로고침한다.</p>
<form>
<label>이름 : </label>
<input type="text" name="name" id="name">
<br>
<label>아이디 : </label>
<input type="text" name="userId" id="userId">
<br>
<label>비밀번호 : </label>
<input type="password" name="password" id="password">
<br>
<label>비밀번호 확인 : </label>
<input type="password" name="password2" id="password2">
<br>
<input type="submit" value="제출" onclick="return test5();">
</form>
<script>
function test5(){
var name = document.getElementById("name").value;
var userId = document.getElementById("userId").value;
var password = document.getElementById("password").value;
var password2 = document.getElementById("password2").value;
console.log("name : " + name);
console.log("userId : " + userId);
console.log("password : " + password);
console.log("password : " + password2);
//비밀번호가 같은지 확인
if(password == password2){
alert("비밀번호가 일치합니다");
}else{
alert("비밀번호가 틀립니다");
// 해당 노드에 포커싱을 주는 select
document.getElementById("password2").select();
// 리턴값을 false라고 주면 서버에 폼 데이터를 전송하지 않음
return false;
}
return true;
}
</script>
</body>
</html>