자바스크립트 정리 (4)

<script> 태그는 head태그 , body 태그 두 곳 다 선언 가능하다

-head 태그에 선언하는 경우 : 페이지 로딩 시에 실행되어야 하는 script -> 가벼운 것들(무거우면 렌더링 딜레이 발생)

-body 태그에 선언하는 경우 : 나머지 경우의 script 

 

JS의 이벤트

-이벤트(Event) : 동작 , 행위 ( 클릭, 마우스오버, 키다운 , 키업 ..)

-이벤트리스너(Event Listener) : 동작, 행위를 감지해 발생 시 연결된 기능을 수행

 ==> on+행위 로 부름 (onclick ~ , onmouseover~ )

-이벤트 핸들러(Event Handler) : 이벤트 리스너에 연결된 기능(함수) , 이벤트 발생 시 수행하고자 하는 내용

 

--이벤트의 작성--

1. 인라인 이벤트 모델 : HTML 태그에 직접 이벤트(이벤트 리스너 + 핸들러) 를 작성

-> on이벤트명 = 함수명();

  <button onclick="test1()">테스트</button>
--------------------------------------------------------
function test1(){

    alert("인라인 이벤트 모델 방식입니다.");

}

2. 고전 이벤트 모델 -> 요소가 가지고있는 이벤트 속성에 이벤트 핸들러를 연결하는 방법으로 인라인 모델과 다르게                                   script로만 작성 할 수 있음

  <button id="test2">고전이벤트모델</button>
  ----------------------------------------------------
  const btn1 = document.getElementById("test2");


    // 요소.이벤트리스너 = 이벤트 핸들러(함수)
    btn1.onclick=function(){
        alert("고전 이벤트 모델 방식입니다");
    }

 

3. 표준 이벤트 모델(addEventListener("이벤트명" , 이벤트 핸들러(함수)) )

-W3C 에서 공식적으로 지정한 이벤트 모델 표준

-고전 이벤트의 단점인 하나의 리스너에 하나의 핸들러만 설정할 수 있는 것을 보완

-IE9 버전부터만 사용 가능

 

<button id="input-btn">입력</button>
------------------------------------------------------
document.getElementById("input-btn").addEventListener("click" , function(){
    this.style.backgroundColor="orange";
})