JS7

스크립트 언어인 JS에서 코드작성시 길이가길어 행을바꾸고싶을때 "\" 백슬래쉬를 쓰면 이어줄수있다

객체.toggle("name") - 태그 class에 "name"이 있다면 삭제 없다면 추가 합니다.

상위태그에 이벤트핸들러를 부여하면 본인을포함한 하위모든태그에 동일한 이벤트가 부여된다

(단 list는 부모가 아니다 [ ex)qeurySelectorAll("id명")으로 가져온 객체는 배열이지 부모가아님! ]

이벤트위임 - 이벤트핸들러를 사용할때 함수안에는 항상 event객체가 전달된다

주의할점 - 의도하지않은 태그에도 이벤트핸들러가 작동한다

예방법 - event.target.tagName 값을 확인해서 해당반환값이 아닌경우 이벤트작동을 하지않게끔 설정을하면

원하는 자식 태그에만 이벤트를 설정하는 효과를 얻을수 있다.

처음에나는 event.stopPropagtion으로 접근하려고했지만 이것은 버블링 캡쳐링에대한 개념을 잘못 알고있기때 문에 일어난것이였다 (전파의 제어가아닌 다른태그의 핸들러작동자체를 제어해야한다)

event 주요메서드

event.target - 이벤트가 발생된 태그를 반환한다

event.stopPropagation - 이벤트 전파 중단

event.currentTarget - 실제로 이벤트가 할당된 타겟 반환

event.preventDefault - 고유특성을 가진 태그의 이벤트를 제거 ex) a태그는 기본적으로 이벤트를 가지고있다

객체.이벤트핸들러 = 익명함수or화살표 함수 써야함 여기다가 함수명 집어넣으면 안됨~

캡쳐링/버블링

[ div 박스를 점점 작게3개 쌓아놓고 alert로 캡쳐링 버블링 체험하면 좋다 ]

캡쳐링 -이벤트핸들러가 동작할때 window --> target까지 정해진 이벤트를 모두발동시키면서 온다

버블링 -이벤트가핸들러가 동작할때 target --> window까지 정해진이벤트를 모두 발동시키면서 돌아간다

캡쳐링사용법 - target.addEventListener("이벤트핸들러", 익명함수or함수 , boolean값 설정)

캡쳐링과 버블링은 둘중 하나만 사용가능하다.

data-info = "1" 이라고 저장하면 dataset이라는곳에 info는 키이름 "1"은 키값이 되어 배열형태로 저장된다.

AOS - Animate on scroll library

AOS Animate On Scroll Library Scroll down

michalsnik.github.io

빛나는지식