이벤트
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>10 + 50 = <span id="question">?</span></h1>
<input type="button" value="결과보기" onclick="printreslut();">
<script>
function printreslut() {
let result = sum(10, 50);
let mytag = document.getElementById('question');
mytag.innerHTML = result;
}
function sum(x, y) {
return x + y;
}
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1 onmouseover="showResult();" onmouseout="hideResult()">
10 + 50 =
<span id="question">?</span>
</h1>
<p>결과를 보시려면 수식 위에 마우스를 올리세요.</p>
<script>
function showResult(){
//console.log("showResult() 실행!!");
let red_result
= '<font color="red">' + 60 + '</font>';
document.getElementById("question").innerHTML = red_result ;
}
function hideResult(){
//console.log("hideResult() 실행!!");
document.getElementById("question").innerHTML = "?";
}
</script>
</body>
</html>1. this
- 이벤트가 발생한 대상을 필요로 하는 경우 this를 통해서 참조할 수 있음
2. 이벤트 등록 방식 : inline
- 이벤트를 이벤트 대상의 태그 속성으로 지정하는 것
inline.html - 인라인 방식은 태그에 이벤트가 포함되기 때문에 이벤트의 소재를 파악하는 것이 편리하다 하지만 정보인 HTML과 제어인 JavaScript가 혼재된 형태이기 때문에 바람직한 방법이라고 할 수는 없음
3. 프로퍼티 리스너
- 프로퍼티 리스너 방식은 이벤트 대상에 해당하는 객체의 프로퍼티로 이벤트를 등록하는 방식
- 인라인 방식에 비해서 HTML과 JavaScript를 분리할 수 있다는 점에서 선호되는 방식
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="button" id="target" value="button">
<script>
let t = document.getElementById('target');
t.onclick = function(event) {
alert("hello world " + event.target.value);
console.log(event);
}
</script>
</body>
</html>4. 이벤트 객체
- 이벤트가 실행된 맥락의 정보가 필요할 때는 이벤트 객체를 사용
- 이벤트 객체는 이벤트가 실행될 때 이벤트 핸들러의 인자로 전달
5. EventListener
- 이벤트를 등록하는 가장 권장되는 방식이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="button" id="target" value="button">
<script>
let t = document.getElementById('target');
t.addEventListener('click', function(event){
alert("Hello world!, " + event.target.value);
});
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="button" id="target1" value="button1">
<input type="button" id="target2" value="button2">
<script>
let t1 = document.getElementById('target1');
let t2 = document.getElementById('target2');
t1.addEventListener('click', btn_listener);
t2.addEventListener('click', btn_listener);
function btn_listener(event) {
//alert(event.target.id);
switch(event.target.id) {
case 'target1': alert(1);
break;
case 'target2' : alert(2);
break;
}
}
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="button" id="target1" value="property">
<input type="button" id="target2" value="listener">
<script>
function onclick() {
alert('click');
}
function onclick2() {
alert('클릭!');
}
// property
document.getElementById('target1').onclick = function() {onclick();}
document.getElementById('target1').onclick = function() {onclick2();}
// listener
document.getElementById('target2').addEventListener('click', onclick);
document.getElementById('target2').addEventListener('click', onclick2);
// 연결된 이벤트 중 하나 제거 가능
document.getElementById('target2').removeEventListener('click', onclick);
</script>
</body>
</html>6. 기본 동작의 취소
- 웹 브라우저의 구성 요소들은 각각 기본적인 동작 방법을 가지고 있음
- a 태그를 클릭하면 href 속성의 url 이동
- 폼에서 submit 버튼을 누르면 데이터 전송
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<P>
<label>
prevent event on
<input id="prevent" type="checkbox">
</label>
</P>
<p>
<a href="https://www.naver.com" onclick="if(document.getElementById('prevent').checked) return false;">naver 이동</a>
</p>
<p>
<form action="https://www.naver.com" onsubmit="if(document.getElementById('prevent').checked) return false;">
<input type="submit">
</form>
</p>
</body>
</html>