window.onload,querySelector,addEventListener

window.onload

사용

• 브라우저가 실행되고 나서 해당 script가 실행되도록 설정 
• 만약 script가 변수의 선언보다 위에 있다면 해당 변수를 찾지 못하기 때문에 
  브라우저가 실행되고 나서 해당 script를 실행되도록 지정하면 변수를 찾는다.

div3보다 먼저  선언됨.

body에 있는 div3

querySelector

사용

• id 뿐만 아니라 클래스이름 ,tag이름 전부 가지고 올 수 있는 태그

 

addEventListener

사용

 

• 특정 event 발생시 한개의 event에 두개의 function을 설정한다면 마지막에 선언한 function만 진행된다.

버튼 클릭시 마지막만 실행

• event 하나에 여러개의 function을 동작하게 하려면 addEventListener를 사용한다.

addEventListener설정

method 두개 

*EventCapturing  event가 전파가 되는 것. 상위에도 event가 있고 상위에 속해지는 하위에도 event가 있을 때 하위의 event를 발생시키면 상위의 event도 같이 발생하는 것을 말한다.  부모 ==> 자식순으로 이벤트가 전파되는 것을 Capturing이라고 한다.    *Bubbling 자식==>부모 순으로 이벤트가 전달 되는 것을 Bubbling이라 한다.   *.stopPropagation() 이벤트가 전달 되는 것을 차단하는 기능이다.

 

 

해당 method

녹색 버튼을 누르면 3개의 event가 발생된다. 

stopPropagation

stopHandler 사용

녹색버튼을 누르면  두번째 event는 나오지 않는다.