JS | 이벤트 핸들러

* 이벤트란?

- 이벤트 : 사용자의 동작

- 핸들러 : 이벤트가 일어났을 때 제어해주는 함수 

 

화면에서 클릭이나, 동작시 발생하는 동적인 기능입니다.

자바스크립트의 첫번째 강력한 기능이며, 사용방법만 암기하면 충분합니다. 

 

태그와 스크립트의 이벤트를 연결한다. 그 방식에는 

(1)인라인 이벤트 모델, (2)기본 이벤트 모델, (3)표준 이벤트 모델이 있으며 이벤트 앞에 on을 붙입니다.

 

* 이벤트 종류

 이벤트 앞에 on을 붙입니다.

ex) onclick, onload, onfocus

click	마우스를 클릭했을 때 이벤트 발생
dbclick	마우스를 더블클릭했을 때 이벤트 발생
mouseover	마우스를 오버했을 때 이벤트 발생
mouseout	마우스를 아웃했을 때 이벤트 발생
mousedown	마우스를 눌렀을 때 이벤트 발생
mouseup	마우스를 떼었을 때 이벤트 발생
mousemove	마우스를 움직였을 때 이벤트 발생
keydown	키를 눌렀을 때 이벤트 발생
keyup	키를 떼었을 때 이벤트 발생
keypress	키를 누른 상태에서 이벤트 발생
focus	포커스가 이동되었을 때 이벤트 발생 (input이나 textarea에 사용됨)
blur	포커스가 벗어났을 때 이벤트 발생 xxx
change	값이 변경되었을 때 이벤트 발생 (input이나 select에 사용됨)
submit	submit버튼을 눌렀을 때 이벤트 발생
reset	reset 버튼을 눌렀을 때 이벤트 발생
select	input,textarea 요소 텍스트를 드래그해서 선택했을 때 이벤트 발생
load	화면 로딩이 완료되었을 때 이벤트 발생
abort	이미지의 로딩이 중단되었을 때 이벤트 발생
resize	사이즈가 변경되었을 때 이벤트 발생
scroll	스크롤바를 움직였을 때 이벤트가 발생

 

인라인 이벤트 모델

인라인 이벤트 모델은 html요소에 직접 이벤트를 연결하는 방식입니다.

태그 자체에 이벤트 속성을 이용해서 js 코드를 직접 갖다가 넣어주는것이 인라인 이벤트모델이다.

onclick 같은 이벤트 안에는 모든 스크립트 코드가 들어갈 수 있습니다

함수안에 js코드를 넣어주고 태그에 함수를 호출해주는 방식으로 사용합니다.

동일한 함수에 여러 이벤트 태그를 걸어줄 수 있다.

 <!--순수 js코드는 다 들어갈 수 있다.-->
    <button onclick="alert('경고')">인라인 이벤트</button>

    <button onclick="var a = 1;
                     alert(a);">인라인 이벤트</button>

    <button onclick="aaa();">인라인이벤트</button>
    <!--함수를 넣으면 지저분하니까 script태그 안에 함수를 지정해주고 위에서 호출
        이렇게 하면 여러 곳에 이 함수를 넣어줄 수 있다.-->
    
    <button onclick="bbb(this);">1</button> 
    <!--this는 나 자신을 매개값으로 넘겨준다.-->
    <!--<button onclick="bbb(this);">1</button>-->
    <!--어느 버튼을 눌렀는지 식별해줄 수 있다.-->
    <button onclick="bbb(this);">2</button>
    <button onclick="bbb(this);">3</button>
    


    <script>
        //인라인이벤트 - 함수의 선언은 script에 하고, 태그에서 연결
        function aaa() {
            alert(1);
        }

        function bbb(a){
            //this가 태그에서 사용되면 태그 자기 자신을 가르킵니다.
            //console.log(a); //a는 태그 자신
            a.innerHTML = 'hello';
        }
    </script>

 

기본 이벤트 모델

화면상에 태그가 있을 때 스크립트 측으로 당겨온다. 스크립트 측에서 이 태그한테 이벤트를 심어주는 모델입니다.

document.getElementById("bt");

해당 아이디의 태그를 얻는다.

 

HTML 요소를 취득할 때는 순서상 "취득할 요소"가 "요소 취득 명령어"위에 있어야 합니다.

<!--id특징은 고유함-->
    <button id = "btn">기본 이벤트</button>

    <script>
        //취득할 태그보다 아래에 있어야 합니다.
        var a = document.getElementById("btn");
        a.onclick = function(){
            console.log('기본이벤트');
            console.log(this);//자기자신 : <button id = "btn">기본 이벤트</button> 태그는 객체
            console.log(a);//태그자신
        }
    </script>

  <script>
        //화면 로딩이 완료된 이후에 실행 - onload는 화면별로 1개만 사용할 수 있습니다.(이것이 단점)
        window.onload = function() {
            var a = document.getElementById("btn");
            a.onclick = function() {
                console.log('기본이벤트');
            }
        }
    </script>

    <button id = "btn">기본이벤트</button>

 

표준 이벤트 모델

addEventListener(이벤트,함수) 를 이용한 이벤트

ㄴ이벤트를 걸 수 있게 해주는 함수

동일한 이벤트도 중복으로 걸 수 있다.

모든 js에 매개변수에도 함수가 들어갈 수 있다.

첫번째 매개값 : 내가 동작시켜줄 이벤트명,

두번째 매개값 : 실행시킬 함수

가 매개변수로 들어간다.

세번째 매개값 : boolean

//var btn = document.getElementById("btn");
//btn.addEventListener("click",aaa); //on빼고 이벤트 명 넣기, 함수 이름만 넣기(호출하면 반환값을 받겠다는 뜻)

//1st
//function aaa(){
//    console.log("표준이벤트");
//}

//2nd
//굳이 분리할 필요없으면 2번째 매개값에 익명함수를 넣을 수도 ㅇㅇ
var btn = document.getElementById("btn");
btn.addEventListener("click",function(){
   console.log("표준이벤트");
})

//표준 이벤트는 동일한 이벤트를 여러개 걸 수 있다.(체이닝)
var btn = document.getElementById("btn");
btn.addEventListener("click",function(){
      console.log("표준이벤트2");
})