이벤트(Event)
- 웹 브라우저가 알려주는 HTML 요소에 대한 사건을 발생
- 웹 페이지에 사용된 자바스크립트는 발생한 이벤트에 반응하여 특정 동작을 수행할 수 있음
- 자바스크립트는 비동기식(동시발생) 이벤트 중심의 프로그래밍 모델
<input type="button" onclick="sendit()" value="확인">
------- ------- -----
이벤트 타겟, 이벤트타입, 이벤트 리스너
이벤트타입(Event Type)
- 발생한 이벤트의 종류를 나타내는 문자열로 이벤트명이라고도 함
- 키보드, 마우스, HTML DOM, window 객체등을 처리하는 이벤트 제공
이벤트타겟(Event Target)
- 이벤트가 일어날 객체를 의미 //버튼클릭했을때 이벤트리스너발생?
이벤트리스너(Event Listener)
- 이벤트가 발생했을 때 그 처리를 담당하는 함수
- 이벤트 핸들러라고도 부름
-지정된 타입의 이벤트가 특정 요소에서 발생하면 웹 브라우저는 그 요소에 등록된 이벤트리스너를 실행
이벤트 등록 (HTML, js 다 가능)
객체.addEventListner(이벤트타입, 이벤트리스너);
이벤트 제거(어디서만 가능?????)
객체.removeEventListner(이벤트타입, 이벤트리스너);
이벤트 객체(Event Object)
- 특정 타입의 이벤트와 관련이 있는 객체
- 이벤트 객체는 해당 타입의 이벤트에 대한 상세 정보를 저장하고 있음
- 모든 이벤트 객체는 이벤트의 타입을 나타내는 type 프러퍼티와 이벤트 대상을 나타내는 target 프로퍼티를 가지고있음.
- 이벤트 객체는 이벤트 리스너가 호출될 때 인수로 전달
function sendit(e){ sendit 호출하면 매개변수를 만들어줌?? //e는 이벤트 객체, 이벤트 객체
console.log(e.target); //이벤트 타겟(button)
console.log(e.type); //이벤트 타입(onclick)
}
<input type="button" onclick="sendit()" value="완료">
이벤트 전파(Event Propagation)
- 이벤트가 발생했을 때 브라우저가 이벤트 리스너를 실행시킬 대상 요소를 결정하는 과정
//이벤트가 발생하는 단계가 있음! 위에서 아래로 버튼 (캡쳐링? 부모에서 자식으로 내려오는)-> 다시올라감 버블링
- document 객체나 HTML 문서의 요소에서 이벤트가 발생하면 대상 요소를 결정하기 위해 이벤트 전파가 일어남
캡처링 전파방식
- 부모에서 자식으로 이벤트를 전파
버블링 전파방식
- 자식에서 부모로 이벤트를 전파
✅ 이벤트 전파를 막는 방법
이벤트객체명.stopPropagation();
Iterable -->컬렉션 프레임워크(자바에서!) 속도 느림, 우리는 일반 반복문을 사용함
- 순회가 가능한 것
generator
- 순회가 가능한 것
- 좀 더 심플하게 사용할 수 있는 객체
function*제너레이터명(){
실행문
...
}
✅✅✅✅Spread 연산자, 전개구문 (...)
- 모든 iterable은 SPread가 될 수 있음
- 순회가능한 데이터는 펼쳐 질 수 있음
funnc(...iterable)
[..iterable]
{...obj}
function add(num1, num2, num3){
return num1 + num2 + num3
}
add(10, 20, 30); // 일반적인 값
const nums =[10, 20, 30]; //배열
function add(nums[0], nums[1], nums[2]){
간단하게
add(...nums)
구조분해할당
const fruits = [ '🍓', '🍎', '🍌', '🔒' ];
const [fruit1, fruit2, ...others] = fruits;
🍓 🍎 🍌🔒
const point =[1,2];
const [x,y,z] = point;
1 2 nudefined
undefined가 싫을 때 z=0으로 !
const [x,y,z=0] = point;
JavaScript