Amarans
0423 JavaScript | 이벤트 전파 - 버블링 / 캡처링 , 기본동작 취소 , 폼 | 본문
이벤트 전파(버블링과 캡처링)
HTML 태그는 중첩되어 있다. 따라서 특정한 태그에서 발생하는 이벤트는 중첩되어 있는 태그들 모두가 대상이 될 수 있다. 이런 경우 중첩된 태그들에 이벤트가 등록 되어 있다면 어떻게 처리 될까?
<html>
<head>
<style>
html{border:5px solid red;padding:30px;}
body{border:5px solid green;padding:30px;}
fieldset{border:5px solid blue;padding:30px;}
input{border:5px solid black;padding:30px;}
</style>
</head>
<body>
<fieldset>
<legend>event propagation</legend>
<input type="button" id="target" value="target">
</fieldset>
<script>
function handler(event){
var phases = ['capturing', 'target', 'bubbling']
console.log(event.target.nodeName, this.nodeName, phases[event.eventPhase-1]);
}
document.getElementById('target').addEventListener('click', handler, true);
document.querySelector('fieldset').addEventListener('click', handler, true);
document.querySelector('body').addEventListener('click', handler, true);
document.querySelector('html').addEventListener('click', handler, true);
</script>
</body>
</html>실행결과
INPUT HTML capturing
INPUT BODY capturing
INPUT FIELDSET capturing
INPUT INPUT target이벤트가 부모에서부터 발생해서 자식으로 전파되고 있다. 이러한 방식을 capturing이라고 한다.
코드를 아래와 같이 변경해보자.
차이점은 addEventListener의 3번째 인자가 false로 변경 되었다.
INPUT INPUT target
INPUT FIELDSET bubbling
INPUT BODY bubbling
INPUT HTML bubbling자식에서 부모 순서로 이동.
이번에는 순서가 반대로 되었다. 자식부터 부모로 이벤트가 전파되는 것을 버블링(bubbling)이라고 한다.
이벤트 전파를 중간에 가로막을 수도 있다.
function handler(event){
var phases = ['capturing', 'target', 'bubbling']
console.log(event.target.nodeName, this.nodeName, phases[event.eventPhase-1]);
}
function stophandler(event){
var phases = ['capturing', 'target', 'bubbling']
console.log(event.target.nodeName, this.nodeName, phases[event.eventPhase-1]);
event.stopPropagation();
}
document.getElementById('target').addEventListener('click', handler, false);
document.querySelector('fieldset').addEventListener('click', handler, false);
document.querySelector('body').addEventListener('click', stophandler, false);
document.querySelector('html').addEventListener('click', handler, false);
실행결과
INPUT INPUT target
INPUT FIELDSET bubbling
INPUT BODY bubblingbody에서 stophandler 을 걸어줌으로 html 까지 가기전에 멈춤.
기본적으로의 취소
웹 브라우저의 구성 요소
- 텍스트 필드에 텍스트를 입력하십시오.
- 폼에서 제출 버튼을 누르십시오.
- a 태그를 클릭하면 href 속성의 URL로 이동한다.
기본 동작을 취소 할 수 있습니다.
인라인
이벤트의 취소 값이 false이면 기본 동작이 취소되었습니다.
<p>
<label>prevent event on</label><input id="prevent" type="checkbox" name="eventprevent" value="on" />
</p>
<p>
<a href="http://opentutorials.org" onclick="if(document.getElementById('prevent').checked) return false;">opentutorials</a>
</p>
<p>
<form action="http://opentutorials.org" onsubmit="if(document.getElementById('prevent').checked) return false;">
<input type="submit" />
</form>
</p>속성 방식 (프로퍼티)
기본 값이 취소되었습니다.
<p>
<label>prevent event on</label><input id="prevent" type="checkbox" name="eventprevent" value="on" />
</p>
<p>
<a href="http://opentutorials.org">opentutorials</a>
</p>
<p>
<form action="http://opentutorials.org">
<input type="submit" />
</form>
</p>
<script>
document.querySelector('a').onclick = function(event){
if(document.getElementById('prevent').checked)
return false;
};
document.querySelector('form').onclick = function(event){
if(document.getElementById('prevent').checked)
return false;
};
</script>addEventListener 방식
기본 동작이 취소되었습니다.
<p>
<label>prevent event on</label><input id="prevent" type="checkbox" name="eventprevent" value="on" />
</p>
<p>
<a href="http://opentutorials.org">opentutorials</a>
</p>
<p>
<form action="http://opentutorials.org">
<input type="submit" />
</form>
</p>
<script>
document.querySelector('a').addEventListener('click', function(event){
if(document.getElementById('prevent').checked)
event.preventDefault();
});
document.querySelector('form').addEventListener('submit', function(event){
if(document.getElementById('prevent').checked)
event.preventDefault();
});
</script>이벤트 타입
<input type="button" onclick="alert(1);" />
폼
submit
submit은 폼의 정보를 서버로 전송하는 명령인 submit시에 일어난다.
form 태그에 적용된다.
아래 예제는 전송 전에 텍스트 필드에 값이 입력 되었는지를 확인한다. 만약 값이 입력되지 않았다면 전송을 중단한다.
<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>아래 구문은 전송을 취소하는 명령이다.
event.preventDefault();change
change는 폼 컨트롤의 값이 변경 되었을 때 발생하는 이벤트다.
input(text,radio,checkbox), textarea, select 태그에 적용된다.
<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>blur, focus
focus는 엘리먼트에 포커스가 생겼을 때, blur은 포커스가 사라졌을 때 발생하는 이벤트다.
다음 태그를 제외한 모든 태그에서 발생한다. <base>, <body>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, <title>
<input id="target" type="name" />
<script>
var t = document.getElementById('target');
t.addEventListener('blur', function(event){
alert('blur');
});
t.addEventListener('focus', function(event){
alert('focus');
});
</script>'JavaScript2' 카테고리의 다른 글
| 0427 JavaScript | Ajax , JSON , jQuer Ajax | (0) | 2020.04.27 |
|---|---|
| 0424 JavaScript | Event - 문서로딩/마우스 , jQuery - on Api 사용법 | (0) | 2020.04.24 |
| 0422 JavaScript | 이벤트 | (0) | 2020.04.22 |
| 0422 JavaScript | 문서의 기하학적 특성 | (0) | 2020.04.22 |
| 0421 JavaScript | Text객체 , 값 API , 조작 API | (0) | 2020.04.21 |
'JavaScript2' Related Articles
more
Comments