728x90
반응형
✔ 이벤트 전파(Event Propagation)
- 이벤트가 발생했을 때 브라우저가 이벤트 리스너를 실행시킬 대상 요소를 결정하는 과정
- document 객체나 HTML 문서의 요소에서 이벤트가 발생하면 대상 요소를 결정하기 위해 이벤트 전파가 일어남
캡처링 전파방식
- 부모에서 자식으로 이벤트를 전파
버블링 전파방식
- 자식에서 부모로 이벤트를 전파
✔ 이벤트 전파를 막는 방법
이벤트객체명.stopPropagation();<!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>이벤트전파</title>
<style>
#divBox{width :100%; height : 300px; border: 3px solid red;}
#pBox{width :70%; height : 150px; border: 3px solid blue;}
#spanBox{border: 3px solid gold;}
</style>
<script>
window.onload = function(){
// 버블링 전파 방식
// document.getElementById('divBox').addEventListener('click',clickDiv);
// document.getElementById('pBox').addEventListener('click',clickP);
// document.getElementById('spanBox').addEventListener('click',clickSpan);
//캡처링 전파방식 - 부모부터 출력된다.
document.getElementById('divBox').addEventListener('click',clickDiv, true);
document.getElementById('pBox').addEventListener('click',clickP, true);
document.getElementById('spanBox').addEventListener('click',clickSpan, true);
}
function clickDiv(e){
e.stopPropagation();
document.getElementById('text').innerHTML += "<span style ='color:red;'>div를 클릭했어요</span><br>";
}
function clickP(e){
document.getElementById('text').innerHTML += "<span style ='color:blue;'>p를 클릭했어요</span><br>";
}
function clickSpan(e){
document.getElementById('text').innerHTML += "<span style ='color:gold;'>span을 클릭했어요</span><br>";
}
</script>
</head>
<body>
<h2>이벤트전파</h2>
<div id="divBox">
<p id="pBox">
<span id="spanBox">
클릭
</span>
</p>
</div>
<p id="text"></p>
</body>
</html>
✔ Iterable
- 순화가 가능한 것(탐색이 가능)const arr = [1,2,3,4,5];
console.log(arr.values());
console.log(arr.entries());
console.log(arr.keys());
//iterable을 이용하여 values,entry,key를 사용할 수 있으며 next사용도 가능하다.
const iterator = arr.values(); // 값이 들어 있는지 확인이 가능하다
while(true){
const item = iterator.next(); // 다음 줄 내용을 뽑을 경우 반복
if(item.done) break;// 데이터가 없으면 break, 데이터가 있는지 확인
console.log(item.value)
}
for(let item of arr){ // for문간에 of를 사용할 수 있는 것들은 거이 iterator한 것이다.
console.log(item);
}
for(let item of arr.values()){
console.log(item)
}
✔ generator
- 순회가 가능한 것
- 좀 더 심플하게 사용할 수 있는 객체
function* generatorName(){
실행문
...
}function* multipleGenerator(){
try{
for(let i=0; i<10; i++){
console.log(i);
yield i**2; //next 가 나와야 실행
//yield는 한번만 돌고 다음 next가 다시 와야 한번 더 돈다
}
}catch(error){// callback으로 사용
console.log(error);
}
}
const multiple = multipleGenerator();
let next = multiple.next();
console.log(next.value, next.done);
// 끝이 아닐경우 next.done은 false가 나온다
next = multiple.next();
console.log(next.value, next.done);
next = multiple.next();
console.log(next.value, next.done);
✔ Spread 연산자, 전개구문
- 모든 iterable은 Spread가 될 수 있음
- 순회가능한 데이터는 펼쳐 질 수 있음
func(...iterable)
[..iterable]
{...obj}
function add(num1, num2, num3){
return num1 + num2 + num3
}
add(10,20,30); // 일반적인 값
const nums = [10, 20, 30];
add(...nums) = add(nums[0], nums[1], nums[2])
구조분해할당
const fruits = [ '🍎', '🍊','🍓', '🍌' ];
const [fruit1, fruit2, ...others] = fruits;
const point = [1,2];
const [x, y, z=0] = point;
function add(num1, num2, num3){
return num1 + num2 + num3;
}
function sum(num1,num2, ...nums){
console.log(nums); //[ 3, 2, 5, 6, 7 ]
// 앞에 두개는 이미 다른곳에
}
const nums = [10,20,30];
console.log(add(nums[0], nums[1], nums[2]))
console.log(add(...nums))
sum(1,2,3,2,5,6,7);
//배열(concat)
const fruits1 =['🍎', '🍊'];
const fruits2 =['🍓', '🍌'];
let arr = fruits1.concat(fruits2);
console.log(arr);
arr = [...fruits1,...fruits2];
console.log(arr);
// fruits1과 fruits2 사이에 😈를 넣어보자
arr = [...fruits1, '😈' ,...fruits2];
console.log(arr);
// 객체(object)
const apple = {name :'김사과', age:20, address: {si : 'seoul'} };
console.log(apple);
// apple.job = '프로그래머';
const apple_update ={...apple, job : '프로그래머'};
console.log(apple_update);
console.log('--------------------');
// 구조분해
const fruits = [ '🍎', '🍊','🍓', '🍌' ];
const [fruit1, fruit2, ...others] = fruits;
console.log(fruit1)// 🍎
console.log(fruit2)// 🍊
console.log(others)// [ '🍓', '🍌' ] 남은 나머지는 배열로 저장된다.
const point = [1,2];
const [x,y,z=0] = point;
console.log(x) // 1
console.log(y) // 2
console.log(z) // 0 -undefined가 나오는게 싫어서 z=0을 초기 선언
function sendEmoji(){
return [ '🍎', '🍊','🍓', '🍌' ];
}
const [berry,apple2,banana,orange] = sendEmoji();
console.log(berry) //🍎
console.log(apple2) //🍊
console.log(banana) //🍓
console.log(orange) //🍌
console.log('--------------------');
console.log(apple_update);
// function display(apple){
// console.log('이름', apple.name)
// console.log('나이', apple.age)
// console.log('직업', apple.job)
// }
function display({name, age, job}){
console.log('이름', name)
console.log('나이', age)
console.log('직업', job)
}
display(apple_update);
const {name, age, pet='루시', job: hobby} = apple_update;
console.log(name);
console.log(age);
console.log(pet);
console.log(hobby);
문제
const component = {
name : 'Button',
style : {
size :20,
color : 'black'
}
};
function changeColor(){
console.log(color);
}
changeColor(component)'const component = {
name : 'Button',
style : {
size :20,
color : 'black'
}
};
// 두 가지 방법
function changeColor({style : {color}}){
console.log(color);
}
// function changeColor(component){
// console.log(component.style.color);
// }
changeColor(component)
반응형
'JavaScript' 카테고리의 다른 글
| JavaScript(주석, 예외처리, 모듈, 가위바위보/ 퀴즈 문제) (0) | 2022.11.14 |
|---|---|
| JavaScript(set, map, operator) (0) | 2022.11.10 |
| JavaScript(이벤트 타입/리스너/객체) (0) | 2022.11.10 |
| JavaScript (class, extends, wrapper) (0) | 2022.11.09 |
| JavaScript - function, object 예제 (0) | 2022.11.09 |