<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#parent, #child {
border: 1px solid black;
padding: 50px;
}
</style>
</head>
<body>
<div id="parent">
<div id="child"></div>
</div>
<a href="https://naver.com" id="link1">네이버</a>
<hr>
<input type="text" id="txt1">
<script>
1. 이벤트 버블링 중단
a. event.cancelBubble = true; > 비표준(MS) > IE 전용
b. event.stopPropergation(); > 표준
const p = document.getElementById('parent');
const c = document.getElementById('child');
p.onclick = function() { alert('부모'); };
c.onclick = function() {
alert('자식');
// event.cancelBubble = true;
// event.stopPropagation();
// alert(event.cancelBubble);
// 현재 브라우저에서 해당 문법을 지원 유무?
if (event.stopPropagation) {
//현재 브라우저가 stopPropagation 함수 지원함
event.stopPropagation();
} else {
//현재 브라우저가 stopPropagation 함수 지원안함 > IE
event.cancelBubble = true; //비권장
event.stopPropagation(); //권장
};
};
2. 이벤트 중단
a. return false; > 비표준(MS)
b. event.preventDefault(); > 표준
const link1 = document.getElementById('link1');
const txt1 = document.getElementById('txt1');
링크 이동-클릭 이벤트의 발생순서 : 클릭 이벤트 > 페이지 이동(중단)
link1.onclick = function() {
// alert(); //link 페이지로 이동하기 전에 알림이 뜸
return false; //페이지 이동 안함
};
//keydown > 문자 반영(중단) > keyup 순
txt1.onkeydown = function() {
// return false; //keydown(입력) 안됨
// if (event.keyCode >= 48 && event.keyCode <= 57) {
// return true;
// } else {
// return false; // 한글은 입력 가능
// }
// return false;
event.preventDefault();
};
</script>
</body>
</html>
'[HTML | CSS | JavaScript | jQuery] 정리 > JavaScript' 카테고리의 다른 글
| JavaScript - CSS 좌표값(clientX / Y) (0) | 2023.05.07 |
|---|---|
| JavaScript - JavaScript로 CSS 조작 (0) | 2023.05.07 |
| JavaScript - 유사배열 (0) | 2023.05.07 |
| JavaScript - 이벤트 버블링, Event Bubbling (0) | 2023.05.07 |
| JavaScript - Template String(` ${} `) (0) | 2023.05.07 |