📝 JavaScript
🖥️ 1. 기본 동작의 취소
- 웹브라우저의 구성요소들은 각각의 기본적인 동작 방법을 가지고 있다.
폼에서 submit 버튼을 누르면 데이터가 전송된다.
a 태그를 클릭하면 href 속성의 URL로 이동한다.
등등의 동작 방법이 있다.
- 이러한 기본적인 동작들을 기본 이벤트라고 하는데, 사용자가 만든 이벤트를 이용해서 이러한 기본 동작을 취소할 수 있다.
📝 예제
EX1) removeEventListener()
<body>
<input type="button" id="target1" value="property" />
<input type="button" id="target2" value="listener" />
<script>
function onClick(){
alert('click');
}
function onClick2(){
alert('클릭');
}
document.getElementById('target1').onclick = function(){ onClick() };
document.getElementById('target1').onclick = function(){ onClick2() };
document.getElementById('target2').addEventListener('click',onClick);
document.getElementById('target2').addEventListener('click',onClick2);
document.getElementById('target2').removeEventListener('click',onClick);
</script>
</body>
EX2) inline
<body>
<p>
<label>prevent event on
<input type="checkbox" id="prevent" />
</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>
EX3) outline
<body>
<p>
<label>prevent event on
<input type="checkbox" id="prevent" />
</label>
</p>
<p>
<a id="target1" href="https://www.naver.com">naver</a>
</p>
<p>
<form id="target2" action ="https://www.naver.com">
<input type="submit" />
</form>
</p>
<script>
document.getElementById('target1').onclick = function(){
if( document.getElementById('prevent').checked ){
return false;
}
}
document.getElementById('target2').onsubmit = function(){
if( document.getElementById('prevent').checked ){
return false;
}
}
</script>
</body>
EX4) event.preventDefault()
<body>
<p>
<label>prevent event on
<input type="checkbox" id="prevent" />
</label>
</p>
<p>
<a id="target1" href="https://www.naver.com">naver</a>
</p>
<p>
<form id="target2" action ="https://www.naver.com">
<input type="submit" />
</form>
</p>
<script>
document.getElementById('target1').addEventListener('click', function(event){
if( document.getElementById('prevent').checked ){
event.preventDefault();
}
})
document.getElementById('target2').addEventListener('submit', function(event){
if( document.getElementById('prevent').checked ){
event.preventDefault();
}
})
</script>
</body>
