reflow / event / 버블링/ 캡처링

html 은 구조

css는 presentation

js 는 behavior--> event

: 창조목적 : event 구현 . 초창기에는 onclick 이나 hover 밖에 사용안함

대표적 event 는 mouse click / scroll.....

기본브라우저 event : onload

ie 4.3 시대 vs netscape

ie 는 웹표준 삐뚫어게 받아들임 (탈선) / netscape 는 웹표준 항상 존중 --> js event 구현하는대도 영향을 미침

div가 위의 모양처럼 배치되었을때

위에 얹혀진 div1 를 click 하여도 바탕에 있는 div2 ,div3 도 event 발생 (동작을 안할 뿐)

이 부분을 해석하는 순서부터 ie와 netscape의 싸움이 시작

이벤트 발생

Eventbubbling 안--> 밖

EventCapturing 밖--> 안

보통 captioning --> bubbling

element에 event 걸기

1. inline event : event를 거러 태그 속에 걸기

2. id 지정 : html에서 event 를 걸 태그에 id 지정 --> 스크립트를 따로 써줌 <script>사이에..

3. 표준방식 : addeventlistener 라고 함수가 존재

addeventlistener

1. 어떤 event.(예: click)

2. 어떤함수가 handling 할건가 --> 함수이름만

3. usecapturing : 보통 f

get

: 이벤트를 걸어줄려면 항상 일단 가져와야 한다는 개념.. 가져오고 event를 걸어야지..

get의 방법

id/tag/css/query도존재해

id 방식

그 아이디만 가져와

tag

해당태그는 다 가져와 [1,2,3,4,5,6,] : 배열로 가져오게 됨...

예 ) div중 첫번째 것이 필요하다...

get.. ('div')[0]

function(e)

여기에서 e는 정체가 몰까?? 몬가 모를땐 console로 찍어봐.

currenttarget

target으로 test

current target을 이용하여 객체를 가볍게, 성능을 빠르게..

addeventlistener : flash나 다른것에도 이용하는 스크립트 

* 중요 : 리플로우(reflow)를 방지하는 방법 !! stoppropagation (ie 8에서 지원을 안함) 
http://sexybone.tistory.com/236  

 

ie8,9 에서 버벅대는 이유..

event 해석 방법이 넷스케이프 브라우저랑 달라서

ie vs netscape

bubbling / capturing

mouse event 중 비슷한것들이 있따.

mouse over/enter 같은것...
http://sexybone.tistory.com/238 
 

mouse enter 과 leave 는 event bubbling을 발생시킨다

웹사이트는 무엇보다도 성능과 속도가 굉장히 중요하다.

html dom은 트리구조로, 무언가 바뀌거나 인라인 스크립트가 있다면 매번 다시 그린다. (위치/색) --> reflow 발생

reflow --> cpu 연산을 많이 잡아먹는다.

position 잡을때 absolute fix로 해야 reflow가 안일어 남