04/22 Javascript 이벤트 버블링과 Event.target 속성(toggle)

지난 시간까지 배운 것..

언어(ES5 without OOJavascript/ES6)

플랫폼(window/document/...)

window
-alert/prompt/confirm
-setTimeout/setInterval/clear....

document
-write()
-선택
--getElementById/getElementsByClassName/getElementByName/..
--querySelector/querySelectorAll
-객체의 속성 / 타일 사용
--set/get
-객체를 조작하는 것
--appendChild/removeChild/...

 

이벤트 객체를 이용하기

 

이 방법은 사용하지 않을 것

 

 

 

 

 

 

클릭하면 이미지가 나오는 이벤트인데  / 이미지가 많다면 그 이미지들마다 로직을 써줘야 함 

근데 로직은 다 똑같음 이미지만 다름

 

-> 불필요한 반복

 

우리가 하던 예제도 똑같다

 

 

 

 

 

 

마우스로 창을 클릭하면 운영체제는 그 움직임을 감지하고 어떤 위치를 클릭했는지 알려줌 (브라우저)

 

부모영역이 클릭을 전달 받음

 

 

쭉 전달되어 올라가는 것...

이벤트 함수가 연결되어 있다면 부모까지 쭉 전달될 수 있어

 

 

 

 

 

 

타겟이 무엇을 의미하냐면 

엘리먼트는 이런식으로 구조를 가지고 있다

마우스로 누군가를 클릭할텐데 -> 마우스  포인트와 맞닿는 녀석을 클릭하면 그 클릭이벤트가 전달됨

 

 

event.target하면 어떤 것이 클릭됐는지 알수 있는 것

 

 

이벤트를 자식에도 부모에도 붙일 수 있는데

 

자식이 많다면? 부모로 

 

 

 

target이라는 속성을 통해서 어떤 자식이 클릭당했는지 알 수 있다

 

 

 

 

 

그럼 이벤트에 의해 클릭당한 타겟을 selected라고 명명해주자

 

그리고 선택된 타겟의 박스에 클래스가 box가 아니라면? (html에서) -> 실행끝 

 

 

 

 

 

그렇다면 선택됐다는 것을 사용자가 알 수 있도록 티 내야겠다

 

 

스타일 속성 더 추가해서 클릭이벤트가 일어나면 저 클래스가 추가될 수 있도록하는 것

 

 

클래스에 추가 된 것을 알 수 있다

 

 

근데 여러개를 클릭했을 때 뭐가 나중에 선택한 것인지 알 수 없음

 

 

 

 

만약 이미 선택된 것이 있었으면 지워주는 if문 추가

 

 

 

 

1번과 2번을 차례대로 눌러줬다 -> 마지막에 누른거에만 selected스타일 적용된 것

 

 

 

 

 

->

 

그런데 여기서 만약에 선택했던것을

다른 동그라미 누르지 않고 취소하고 싶을 때 어떻게 해야하지?

 

클릭했던 것을 다시 클릭하면 취소되게 하고 싶다 (엘베에서 버튼 잘못눌렀을때 다시눌러 취소하는 것처럼)

 

선택된 박스의 클래스 중에 selected가 있다면 지워주고 없다면 추가해줘라 라는 조건문인데

.....문제가 많다

 

 

-> toggle() 이라는 거 사용해보자

 

 

주석처리한 거 지우려면....

 

 

조건을 추가 해줘야 한다

 

 

 

 

 

 

 

ex7 아코디언 예제 : 노드 순회하기

 

 

 

여기서 타이틀을 누르면 content 내용이 펼쳐지는 방식으로 만들 것