기본 동작의 취소
웹 브라우저의 구성요소들은 각각 기본적인 동작 방법을 가지고 있다.
- 텍 수프 필드에 포커스를 준 상태에서 키보드를 입력하면 텍스트가 입력된다.
- 폼에서 submit 버튼을 누르면 데이터가 전송된다.
- a 태그를 클릭하면 href 속성의 URL로 이동한다.
이러한 기본적인 동작들을 기본 이벤트라고 하는데 사용자가 만든 이벤트를 이용해서 이러한 기본 동작들을 취소할 수 있다.
<body>
<p><label>prvent evnet on</label>
<input type="checkbox" id="prevent" name="eventprevent">
</p>
<p>
<a href="https://www.naver.com" onclick="if(document.getElementById('prevent').checked)return false;">naver.com</a>
</p>
<p>
<form action="https://www.naver.com" onsubmit="if(document.getElementById('prevent').checked)return false;">
<input type="submit"/>
</form>
</p>
</body>인라인 방식
<script>
document.querySelector('a').onclick = (event) =>{
if(document.getElementById('prevent').checked){
return false;
}
document.querySelector('form').onclick = (event) =>{
if(document.getElementById('prevent').checked){
return false;
}
}
}
</script>프로퍼티 방식
<script>
document.querySelector('a').addEventListener('click',(event)=>{
if (document.getElementById('prevent').checked) event.preventDefault();
})
document.querySelector('form').addEventListener('click',(event)=>{
if (document.getElementById('prevent').checked) event.preventDefault();
})
</script>addEvnetListener 방식
폼
submit - 폼의 정보를 서버로 전송하는 명령인 submit시에 일어난다. form 태그에 적용된다.
<body>
<form id = "target" action="result.html">
<label for="name">name</label> <input type="name" id = "name"/>
<input type="submit"/>
</form>
<script>
let t = document.getElementById('target');
t.addEventListener('submit',(evnet) =>{
if(document.getElementById('name').value.length === 0){
// 텍스트 필드에 입력된 값이 없다면 경고창 출력.
alert('Name 필드의 값이 누락되었습니다.');
evnet.preventDefault();
}
})
</script>
</body>change - 폼 컨트롤의 값이 변경되었을 때 발생하는 이벤트.
<body>
<p id = "result"></p>
<input type="name" id="target"/>
<script>
let t = document.getElementById('target');
t.addEventListener('change', (event)=>{
document.getElementById('result').innerHTML=event.target.value;
//p 태그에 입력된 값을 삽입.
})
</script>
</body>blur, focus
<body>
<input type="name" id="target"/>
<script>
let t = document.getElementById('target')
t.addEventListener('blur',(event)=>{
alert('blur');
})
t.addEventListener('focus',(event)=>{
alert('focus');
})
</script>
</body>
문서 로딩
웹 페이지를 프로그래밍적으로 제어하기 위해서는 웹 페이지의 모든 요소에 대한 처리가 끝나야 한다. 이것을 알려주는 이벤트가
load, DOMContentLoaded이다.
<body>
<p id="target">Hello</p>
<script>
let t = document.getElementById('target');
console.log(t)
</script>
</body>만약에 스크립트 태그가 html태그에 존재하거나 p태그 위에 존재한다면 null값을 출력하게 된다.
<head>
<script>
// window.onload = () =>{
// let t = document.getElementById('target');
// console.log(t)
// }
// window.addEventListener('load',()=>{
// let t = document.getElementById('target');
// console.log(t)
// })
window.addEventListener('DOMContentLoaded',()=>{
let t = document.getElementById('target');
console.log(t)
}) // 화면의 렌더링이 끝나게 되면 이벤트 발생하게 함
// ie9 이후부터 지원
// 라이브러리 활용 가능.
</script>
</head>
<body>
<p id="target">Hello</p>
</body>모든 리소스가 다운로드가 끝날 때까지 load는 실행이 지연됨 -> 성능이 저하됨.
각각의 웹 페이지의 태그자체에서 다운로드하는 리소스들이 화면의 처리가 끝나면 이벤트가 발생하는 것이 DOMContentLoaded.
'개발' 카테고리의 다른 글
| [Javascript] this에 대해서 (0) | 2021.08.16 |
|---|---|
| [Javascript] Ajax (0) | 2020.12.31 |
| [Javascript] 이벤트 (0) | 2020.12.30 |
| [Javascript] 문서의 기하학적 특성 (0) | 2020.12.23 |
| [Javascript] Node 객체 (0) | 2020.12.22 |