지금까지 이벤트를 만들어 설치하는 작업들을 해봤다.
이벤트는 사용자가 정의한 것 뿐만아니라 기본적으로 갖고있는 것들이 있다.
예를들어,
텍스트필드에서 입력했을 "때" 텍스트가 입력되거나
form에서 submit을 클릭했을 "때" 데이터가 전송되거나
a 태그를 클릭했을 "때" href 속성에 정의된 URL로 이동되는 것과 같은 것이다.
즉, 사용자가 정의한 이벤트가 아닌 브라우저가 갖고있는 이벤트 기본동작이다.
몇 가지 방식 별로 살펴보자.
1. 인라인 방식
간단한 코드를 작성해본다.
<p>
<label for="prevent">event 동작 방지</label>
<input type="checkbox" id="prevent" name="eventprevent" />
</p>
<p>
<a href="localhost" onclick="if(document.getElementById('prevent').checked) return false;">localhost</a>
</p>
<p>
<form action="localhost" onsubmit="if(document.getElementById('prevent').checked) return false;">
<input type="submit" />
</form>
</p>
위 소스코드의 문서는 다음과 같다.
HTML의 <p> 태그는 문단(paragraph)을 정의할 때 사용된다.
3개의 문단을 만들었다.
1번째 문단은 "event 동작 방지" 라는 label을 만들었고 checkbox를 만들었다.
label은 일반적인 텍스트 형식이지만 label 의 for 속성값과 결합하고자 하는 요소의 id가 같다면 연결되는 기능이 있다.
즉, 위에서는 prevent라는 for 값과 checkbox 타입의 input 태그의 id 값이 같기 때문에 label 부분인 "event 동작 방지" 라는 텍스트 부분을 클릭해도 checkbox의 checked/unchecked 가 동작한다.
2번째 문단은 localhost 라는 앵커(a) 태그를 만들었고 href는 localhost 이다.
onclick에서 if(document.getElementById('prevent').checked) return false; 의 의미는,
prevent라는 id를 가진 엘리먼트가 checked 라면 onclick에 대하여 false를 리턴한다라는 의미이다.
checkbox는 checked 라는 프로퍼티가 정의되어 있고 true면 체크, false면 체크가 안되어있다는 것을 의미한다.
앵커태그는 기본적으로 클릭 시 href속성의 URL로 이동시켜주는 기본적인 이벤트핸들러가 정의되어 있다.
onclick에 대해 false를 리턴하게 되니 해당 이벤트핸들러를 취소시킨다는 의미가 된다.
3번째 문단도 마찬가지이다.
form을 만들었고 submit 타입의 input 태그를 만들었다.
submit을 클릭했을 때 localhost로 이동시킨다는 코드이다.
2번째와 마찬가지로 prevent 라는 id를 가진 엘리먼트 즉, checkbox가 체크되어있다면 false를 onsubmit에 리턴한다.
기본적인 이벤트핸들러를 취소시키는 의미가 된다.
정리하자면,
인라인 방식에서는 리턴값을 false를 해주게 되면 해당 엘리먼트의 기본적인 이벤트동작을 취소하게 되는 것이다.
2. 프로퍼티 방식
<script>
document.querySelector('a').onclick = function(){
if(document.getElementById('prevent').checked)
return false;
};
document.querySelector('form').onclick = function(){
if(document.getElementById('prevent').checked)
return false;
};
</script>
HTML 요소 내의 속성값에 정의하지 않은 것 뿐이지 인라인 방식과 동일하다.
querySelector를 이용해 a태그/form태그에 대해 각각 onclick 이벤트를 만들어 준 것이다.
3. addEventListener 방식
<script>
document.querySelector('a').addEventListener('click', function(test){
if(document.getElementById('prevent').checked)
test.preventDefault();
});
document.querySelector('a').addEventListener('submit', function(test){
if(document.getElementById('prevent').checked)
test.preventDefault();
});
</script>
인라인/프로퍼티 방식에서는 false 값을 리턴하여 기본적인 이벤트 동작을 방지했지만,
addEventListener 방식에서는 함수의 인자로 전달되는 이벤트 객체의 preventDefault() 메소드를 호출시켜 기본 이벤트핸들러를 취소시킨다.
4. form 이벤트
폼과 관련된 이벤트 타입에 대해서 알아본다.
(1) submit 이벤트
submit 이벤트는 form의 정보를 서버로 전송하는 이벤트이다.
코드로 확인해본다.
<form id="target" action="result.php">
<label for="name">name</label>
<input id="name" type="text" />
<input type="submit" />
</form>
<script>
var t = document.getElementById('target');
t.addEventListener('submit', function(test){
if(document.getElementById('name').value.length === 0){
alert("name 필드를 입력하세요");
test.preventDefault();
}
})
</script>
# result.php
<body>
<p>HELLO</p>
</body>
위 코드는 다음과 같다.
폼을 하나 만들고 그 안에 1개의 label과, 2개의 input을 만들었다.
lebel의 for 값과 text 타입의 input의 id값을 같게 해주어 연결시켜 주었고 submit 타입의 input 태그이다.
자바스크립트 부분을 보면,
target 이라는 id의 엘리먼트를 t 변수에 담고,
t에 대한 addEventListener를 만들었다.
submit 이벤트가 발생될 때 name이라는 id의 엘리먼트의 value 길이가 0 이라면,
alert에 정의된 경고창이 뜨고 preventDefault로 기본적인 이벤트핸들러를 막는다.
다시말해, submit 이 발생했을 때 기본적인 동작방법 form태그의 action 프로퍼티로 전송하는 기본동작을 막는 것이다.
text 필드에 아무것도 입력하지 않고 제출버튼 클릭 시 위와같은 경고창이 뜨고 전송하는 기능을 막는다.
값을 입력하고 전송을 누르면 위와 같은 창이 뜬다.
(2) change
change는 폼 컨트롤의 값이 변경되었을 때 발생되는 이벤트이다.
그냥 변동이 있을 때 발생된다고 보면 되겠다.
예제로 본다.
<p id="a"></p>
<input id="target" type="name" />
<script>
var t = document.getElementById('target');
t.addEventListener('change', function(test){
document.getElementById('a').innerHTML=test.target.value;
});
</script>
id가 a인 paragraph 태그를 하나 만들었고,
id가 target인 input 태그를 만들었다.
자바스크립트는,
id가 target인 엘리먼트에 addEventListener를 추가해서 change 이벤트가 발생하면 a라는 id의 엘리먼트에 innerHTML 을 이용해서 값을 넣는 것을 의미한다.
결과물로 확인해보면,
기본 화면이다.
여기에 값을 입력한다.
그리고 텍스트필드를 벗어나면(다른 영역을 클릭하면)
입력한 값이 innerHTML=test.target.value 로 인해 id가 a인 p태그의 HTML 영역에 삽입된다.
(3) blur, focus
blur는 흐리게 하는거고 focus는 뭔가를 집중한다는 뜻이다.
위의 (2) 예제에서 사용한 코드로 텍스트필드를 확인해보면,
텍스트필드를 클릭하지 않았을 때에는 위와 같다.
텍스트필드를 클릭했을 때는 위와 같이 조금 더 강조됨을 확인할 수 있다.
이것이 blur와 focus이다.
간단한 코드를 작성했다.
<input type="name" id="target" />
<script>
var a = document.getElementById('target');
a.addEventListener('blur', function(event){
console.log('blur');
});
a.addEventListener('focus', function(event){
console.log('focus');
});
</script>
input 엘리먼트에 blur 이벤트가 발생하면 console창에 blur를, focus 이벤트가 발생하면 콘솔창에 focus를 출력한다.
추가적인 설명은 안한다.
'Javascript' 카테고리의 다른 글
21. jquery (0) | 2021.10.06 |
---|---|
20. 문서로드 (0) | 2021.10.04 |
18. 이벤트 전파(버블링/캡처링) (0) | 2021.09.28 |
17. 이벤트 (0) | 2021.09.27 |
16. Node 종류 API (0) | 2021.09.18 |