반응형
form 폼
submit
submit은 폼의 정보를 서버로 전송하는 명령인 submit시에 일어난다.
form 태그에 적용된다.
<!DOCTYPE html>
<html>
<body>
<form id="target" action="result.html">
<label for="name">name</label> <input id="name" type="name" />
<input type="submit" />
</form>
<script>
var t = document.getElementById('target');
t.addEventListener('submit', function(event){
if(document.getElementById('name').value.length === 0){
alert('Name 필드의 값이 누락 되었습니다');
event.preventDefault();
}
});
</script>
</body>
</html>
※ 위에서 event.preventDefault();은 전송을 취소하는 동작 취소 명령이다.
change
change는 폼 컨트롤의 값이 변경 되었을 때 발생하는 이벤트다.
input(text,radio,checkbox), textarea, select 태그에 적용된다.
<!DOCTYPE html>
<html>
<body>
<p id="result"></p>
<input id="target" type="name" />
<script>
var t = document.getElementById('target');
t.addEventListener('change', function(event){
document.getElementById('result').innerHTML=event.target.value;
});
</script>
</body>
</html>
blur, focus
focus는 엘리먼트에 포커스가 생겼을 때, blur은 포커스가 사라졌을 때 발생하는 이벤트다.
다음 태그를 제외한 모든 태그에서 발생한다. <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, <title>
<!DOCTYPE html>
<html>
<body>
<input id="target" type="name" />
<script>
var t = document.getElementById('target');
t.addEventListener('blur', function(event){
console.log('blur');
});
t.addEventListener('focus', function(event){
console.log('focus');
});
</script>
</body>
</html>
반응형
'프로그래밍 개발 > JS 웹' 카테고리의 다른 글
| Javascript 이벤트 타입 - 마우스 (0) | 2020.11.26 |
|---|---|
| Javascript 이벤트 타입 - 문서 로딩 (0) | 2020.11.26 |
| Javascript 이벤트 - 기본동작의 취소 (0) | 2020.11.23 |
| Javascript 이벤트 전파 - 버블링과 캡처링 (0) | 2020.11.23 |
| Javascript 이벤트 - 등록방법 (0) | 2020.11.23 |
댓글