이벤트
- 웹 페이지에서 어떤 행위(사용자의 행동)가 발생한 것을 말함
- 이벤트 속성과 이벤트 핸들러(함수)를 연동하여 이벤트 발생시 특정 기능을 수행하도록 할 수 있다.
대표적인 이벤트
- click : 클릭하였을 때 (onclick)
- focus : 입력필드에 포커싱 되었을때 (onfocus)
- blur : 사용자가 입력 필드를 떠날때 (onblur)
- change : 상태가 변했을 때 (onchange)
이벤트 설정 방법
1. 인라인 이벤트 모델
- 요소 내부에 이벤트를 작성하는 방법
- 인라인 방식은
<script>태그에 있는 함수를 호출하는 방식
EX1) 클릭시 이벤트 설정 첫번째 방법
<button onclick="처리로직">버튼 </button>-> 클릭시 동작하는 함수를 요소(태그)에 직접 명시하는 방법
EX2) 클릭시 이벤트 설정 2번째 방법
<button onclick="함수호출">버튼</button>-> 클릭시 동작하는 함수를 script 내에서 찾아서 동작시키는 방법
EX) 인라인 이벤트 모델
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button onclick="alert('첫번째 방법');">첫번째 방법</button>
<button onclick="test();">두번째 방법</button>
<script>
function test() {
alert("두번째 방법");
}
</script>
</body></html>2. 고전 이벤트 모델
- 요소객체가 가지고 있는 이벤트 속성에 이벤트핸들러를 연결하는 방법
- 이벤트를 제거: 속성값에 null값 대입
- 이벤트 발생 객체는 핸들러 내부에서 this로 표현 / 스타일 변경 가능
- 매개변수로 이벤트 정보를 전달할 수도 있음 (e, window.event) - 이벤트 객체
EX1) 고전 이벤트 모델
var h = document.getElementById('id명'); h.onclick = function(){ 수행기능 설정; this.onclick=null; //해당 이벤트를 삭제 할 수 있음 };
EX2) 고전 이벤트 모델
document.getElementById('id명').onclick = function (){ 수행 기능 설정; };
- document.getElementById('id명').onclick=null; 로 이벤트 삭제 가능
EX) 고전 이벤트 모델- 이벤트 활성화 비활성화 1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<button id="btn1">버튼1</button><br><br>
<button id="end">모든이벤트 종료</button><br><br>
<button id="start">모든이벤트 연결</button><br><br>
<script>
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
var btn3 = document.getElementById("btn3");
var btn4 = document.getElementById("btn4");
window.onload = function() {
startHand();
var end = document.getElementById("end");
end.onclick = function() {
alert("이벤트를 해제 했습니다.");
endHand();
}
var start = document.getElementById("start");
start.onclick = function() {
alert("이벤트를 연결 했습니다.");
startHand();
}
};
// onclick 이벤트 활성화
function startHand() {
btn1.onclick = function() {
alert("btn1")
};
}
// onclick 이벤트 비활성화
function endHand() {
btn1.onclick = "";
}
</script>
</body></html>EX) 고전 이벤트 모델- 이벤트 활성화 비활성화 2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button id="btn1">버튼1</button><br>
<button id="on">이벤트 활성화</button><button id="off">이벤트 비활성화</button><br>
<span id="msg"></span>
<script>
var event = function() {
alert("이벤트가 잘 동작합니다.");
};
document.getElementById("btn1").onclick = event;
document.getElementById("off").onclick=function(){
document.getElementById("btn1").onclick=null;
document.getElementById("msg").innerHTML="이벤트가 비활성화 되었습니다.";
document.getElementById("msg").style.color='red';
};
document.getElementById("on").onclick=function(){
document.getElementById("btn1").onclick=event;
document.getElementById("msg").innerHTML="이벤트가 활성화 되었습니다.";
document.getElementById("msg").style.color='blue';
};
</script>
</body>
</html>3. 표준 이벤트 모델
- w3c에서 공식적으로 지정한 이벤트 모델
- 한번에 여러가지 이벤트 핸들러 설정 가능
- this 키워드가 이벤트 발생 객체를 의미
- addEventListener로 이벤트 함수를 설정할때에는 익명함수를 쓰지 않고, 외부함수를 쓰는것을 권장 함 (익명함수는 지울수가 없음)
👨🎓 작성 방법
- 이벤트 설정
addEventListener('이벤트 이름', 핸들러)
- 이벤트 삭제
removeEventListener ('이벤트 이름', 핸들러)
EX1) 작성 방법 예시
var h = document.getElementById('id명');
// 방법1. -> 이벤트 삭제 방법 : 없음
h.addEventListener('click',function(){ alert("익명함수 형태"); });
// 방법2.
h.addEventListener('click',function test(){ alert("내부함수 형태"); });
// 이벤트 삭제 방법 : 내부에서 삭제 가능
h.addEventListener('click',function test(){ alert("내부함수 형태");
this.removeEventListener('click',test);
});
// 방법3
h.addEventListener('click',test);
function test(){
alert("외부함수 형태");
}
//이벤트 삭제 방법 : 필요한 경우 삭제 언제든 가능
h.removeEventListener('click',test);EX) 표준 이벤트 모델
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button id="btn1">버튼</button>
<br>
<button id="on">이벤트 활성화</button>
<button id="off">이벤트 비활성화</button>
<script>
document.getElementById("on").onclick = function() {
var btn1 = document.getElementById("btn1");
// 요소명.addEventListener('이벤트명', 동작할 함수명(외부함수 권장));
btn1.addEventListener('click', test);
};
document.getElementById("off").onclick = function() {
var btn1 = document.getElementById("btn1");
// 요소명.removeEventListener('이벤트명', 동작할 함수(외부함수 권장));
btn1.removeEventListener('click', test);
};
function test() {
alert("이벤트 잘 동작합니다.")
};
</script>
</body>
</html>3. 이벤트 버블링
- 자식 노드에서 부모 노드로 이벤트가 전달되는 현상
- 부모, 자식, 후손 등의 이벤트가 같이 있을 경우 이벤트 버블링 현상으로 인해 자식 노드를 호출하면 부모노드의 이벤트도 같이 발생될 수 있음
이벤트 버블링 막기
- window.event.stopPropagation(); // ie 제외 타 브라우저
- window.event.cancelBubble= true; // ie 전용
※ 현재 크롬에서는 둘 다 사용 가능
EX) 이벤트 버블링 막기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<style>
.div-test {
border: 1px solid black;
padding: 20px;
}
.div1 {
background: red;
}
.div2 {
background: orange;
}
.div3 {
background: yellow;
}
.div4 {
background: green;
}
</style>
<div onclick="test1('빨강')" class="div-test div1">
<div onclick="test1('주황')" class="div-test div2">
<div onclick="test1('노랑')" class="div-test div3">
<div onclick="test1('초록')" class="div-test div4">
</div>
</div>
</div>
</div>
<script>
function test1(msg) {
alert(msg);
// window.event.stopPropagation(); //버블링 막는 함수
window.event.cancelBubble = true; //버블링을 막는 속성 (IE)
}
</script>
</body></html>
개발자로 매일 한 걸음