반응형
<!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>
</head>
<body>
<button id ="btn">click</button>
<script>
var btn = document.getElementById("btn");
btn.onclick = function(){
alert("event 1");
}
btn.onclick = function(){
alert("event 2");
}
</script>
</body>
</html>기존의 이벤트 핸들러는 해당 요소에 하나의 이벤트만 적용시킬 수 있었습니다.
하지만 이벤트 리스너를 이용해 하나의 요소에 여러 개 이벤트 처리가 가능하게 됩니다.
위와 같은경우에는 두번째의 onclick으로 덮어씌워지게 됩니다.
<!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>
</head>
<body>
<button id ="btn">click</button>
<script>
var btn = document.getElementById('btn');
btn.addEventListener('click',function(){
alert('event 1');
});
btn.addEventListener('click',function(){
alert('event 2');
});
</script>
</body>
</html>이와 같이 addEventListener를 이용해 클릭했을 때 콜백메소드를 호출합니다. 그래서 두개의 이벤트가 순차적으로 작동하게 됩니다.
.
<!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>
</head>
<style>
#box{
width: 100px; height:100px;
border: 3px solid black;
}
#box.hover{
background-color:orange;
color:white;
}
</style>
<body>
<div id ="box">
<p>마우스를 올려 주세요</p>
</div>
<script>
var btn = document.getElementById('box');
btn.addEventListener('mouseover',function(){
box.setAttribute('class','hover');
});
btn.addEventListener('mouseout',function(){
box.removeAttribute('class');
});
</script>
</body>
</html>마우스를 올렸을 때 class="hover" 속성을 추가시키고 마우스가 나가면 class속성을 없애버립니다.
이벤트 리스너의 특징은 on을 안 붙힙니다 앞에 테이블로 적어뒀던 onclick, onMouseover 등에서 on을 뺍니다.
<!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>
</head>
<style>
</style>
<body>
<form id ="frm">
<fieldset>
<legend>주소록</legend>
<textarea name ="txt" id="txt2" cols ="30" rows="10">입력해주세요</textarea><br>
<input type ="submit" id = "q" value ="불러오기">
</fieldset>
</form>
<script>
var address =["김철수","email: kcs@gmail.com"]; // 미리 값을 준비
var q = document.getElementById('frm'); // from id값 받아온다.
function addr_search(){
var textarea = q.txt; // q의 name값을 가져옴 q.txt 여기서 txt는 name값
textarea.value = '이름 / 주소 \n'; // .value란 해당 태그에 해당하는 글자를 의미 여기선 입력해주세요 이다.
textarea.value += address[0] + ' , ' + address[1] + '\n'; // 준비한 값들을 넣는 과정
}
q.addEventListener('submit', function(){ // 버튼을 눌렀을 때 function()이하의 내용이 작동한다.
event.preventDefault(); // 폼 전송 기본 이벤트 발생 안 하도록 함
addr_search(); // addr_search 메소드를 실행시킴
})
</script>
</body>
</html>
반응형