버블링 / toggle

이벤트객체

벨류가아니고 참조라서 이상한일발생

let이용

 

언어(ES5 without OOjavascript / ES6)

플랫폼( window/document/..)

window

-alert /prompt / confirm

-setTimeout/ setinterval/ clear

 

document

-write()

-선택

--getElementById

--querySelectorAll, querySelector

언어(ES5 without OOJavascript/ES6)
플랫폼(window/document/...)
window
-alert/prompt/confirm
-setTimeout/setInterval/clear....
document
-write()
-선택
--getElementById/getElementsByClassName/getElementByName/..
--querySelector/querySelectorAll
-객체의 속성 / 타일 사용 
--set/get
-객체를 조작하는 것
--appendChild/removeChild/...
-이벤트 객체를 이용하기

버블링 : 자식요소에서 발생한 이벤트가 부모요소로 전파되는것

 

 

 

 

모든 윈도우들에 이벤트를 적용하지않는다.

버블시스템을갖고있기때문

컨테이너에다가 하나만적용

div를 눌렀는데 container가 동시에 실행된다

사용자는 이미지를클릭

집중화

어떤것을 클릭하던 이벤트를 ul이 발생할수있게

img를 클릭하면 ul에전달

자식들이 클릭되면 ul이 실행되게끔

 

부가적으로 전달해주는데이터 ?

이벤트로직이 수십개,똑같은함수를 가지고있다면

뒷단에 누가 클릭됐는지알려준다.

타켓을통해 내자식중에 하나가 클릭됐구나

이벤트가발생한위치의 도형을찾는다

맨앞에있는녀석 td를 찾고, td에위ㅣ임되어있던함수 호출

부모한테도 

 

지금까지 이벤트객체를 쓰지않았었어

자바스크립트는 인자의 개수가 일치하지않아도 문제가없다

사건이 발생:  누가,언제,어디서 

이벤트정보를 담아줘서 전달하는객체-이벤트객체

( )가 눌렸대, 어느 키가 눌렸는지,

마우스가클릭됐데 : 어디를 클릭했는지, 무엇을 클릭했는지, 

그런정보알아내주는객체

div태그(파란원)을 클릭하면 div태그 클래스이름에 aaa가 추가된다

2번째 div태그를 클릭하면, 클릭한 div 클래스명에 selected가 추가되고, css style에 만들어놓은 .selected가 연결되서 보더의 색깔이변경된다

 

 

처음은 널값

첫번째 selecte는

selected.classList.remove("selected");만썻으면 오류발생

if조건을넣는다

선택한 3번에 selected 명이 추가되고 삭제버튼을 누르면 삭제된다 

if을넣어서  하나만선택되도록한다 

 

선택취소를 하려면 ?

다시누르면 취소되는엘리베이터, 안되는엘리베이터

한번선택했는데,기존에선택된녀석인지알아야

add는 1한번만, (중복해서 이름이들어가지않음)

 

1선택후 1을누르면 빨간색이 사라지지않는다 /         지우고 채우고 지우고채구 앞선택과 뒤

1선택후 1을누르면 빨간색이 사라지지않는다. if문에 조건이 더필요하다

selected를 삭제후 toggle로 인해 또 들어간다

//selected != e.target 같은녀석을 select하면 romove가 안되고 다음toggle이 실행         //selected != null 이전에 선택한값이 있다면,,아직 현재선택한값반영전