1. inline
- return 방식이 false이면 기본 동작 취소
<!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 id="eventa" href="https://www.naver.com">naver 이동</a>
</p>
<p>
<form id="eventform" action="https://www.naver.com">
<input type="submit"/>
</form>
</p>
<script>
document.getElementById('eventa').onclick = function(){
if( document.getElementById('prevent').checked ){
return false;
}
}
document.getElementById('eventform').onclick = function(){
if( document.getElementById('prevent').checked ){
return false;
}
}
</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>
<P>
<label>
prevent event on
<input id="prevent" type="checkbox">
</label>
</P>
<p>
<a id="eventa" href="https://www.naver.com">naver 이동</a>
</p>
<p>
<form id="eventform" action="https://www.naver.com">
<input type="submit">
</form>
</p>
<script>
document.getElementById('eventa').addEventListener('click', function(event){
if(document.getElementById('prevent').Checked) {
event.preventDefault();
}
});
document.getElementById('eventform').addEventListener('click', function(event){
if(document.getElementById('prevent').Checked) {
event.preventDefault();
}
});
</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>
<p id="result"></p>
<input type="text" id="target">
<script>
let t = document.getElementById("target");
t.addEventListener('change', function(event) {
document.getElementById('result').innerHTML = 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 id="target" type="text">
<script>
let t = document.getElementById('target');
t.addEventListener('blur', function() {
console.log('blur');
});
t.addEventListener('focus', function() {
console.log('focus');
});
</script>
</body>
</html>
