이벤트 처리, EventListener!

- JS 로 이벤트를 처리하는 방법은 크게 3가지다.
- [3가지 방법]이 다 쓰인다. 최근엔 Listener 방식을 많이 사용!

[ 1. html 태그 속성 추가 방식 ]
<input type=button value="" onlick = "f1()">

장점
- 설정,가독성 좋다 ( 호출함수까지 한번에 볼수있음 )

단점
- html 태그 부분과 JS 이 독립성이 없다.

- 같은 태그에 대해 같은 이벤트 발생시 처리함수 1개만 가능
- 이벤트 처리 등록했다가 다시 해제 불가능

[ 2. DOM 방식 ]
<input type value >
document.querySelector(" ").onclick = function(){ };

이미 정의된 함수가 있다면
document.querySelector(" ").onclick = f1;

장점
- html 과 JS 코드분리 된다. 독립적

- 같은 태그에 대해 같은 이벤트 발생시 처리함수 1개만 가능 (한계)
( 오버라이딩 되어서, 마지막으로 걸어둔 함수가 실행됨 )
- 이벤트 처리 등록했다가 다시 해제 불가능


[ 3. EventListener 방식 ]
addEventListner("이벤트종류", 함수, false );
: 이벤트종류가 발생하면 => 함수를 실행한다.
( false : 이벤트버블링방식 자식 => 부모 방향 )

<input type=button value= "" >

document.querySelector(" ").addEventListner("click", f1, false );

장점
1. 같은 태그에 대해 같은 이벤트 발생시 => 두 가지 이상 함수를 실행 가능
2. 이벤트 처리 등록했다가 다시 해제 가능


1. 같은 이벤트에 대해 두 가지 이상 함수 실행 가능
document.querySelector(" ").addEventListner("click", f1, false );
document.querySelector(" ").addEventListner("click", f2, false );

=> 클릭하면 f1 함수도 실행, f2 함수도 실행 가능

- 현재 HTML 에서 함수가 두 개 있는거면
큰 함수 하나로 묶어서 DOM방식으로 실행하면 되겠지만,
프로젝트를 하다보면, JS 파일 자체를 공유해서 사용하는 경우가 많은데,
이럴 때 EventListener를 사용해서 간단하게 이벤트 추가 가능



< 공유해서 사용할 addEventListener.js 파일 >

function test3(){alert(3);}

< 현재 HTML >

<script src ="addEventListener.js"></script>
<!-- 이렇게 하면 test3 함수가 사실상 이 HTML 파일로 가져와진 것. 바로 사용 가능-->

현재 HTML 에서는 아래 두개의 함수만 생성되어 있다.

function test1(){ alert(1);}
function test2(){ alert(2);}

function start (){
document.querySelector("#click").addEventListener("click", test1, false );
document.querySelector("#click").addEventListener("click", test2, false );
document.querySelector("#click").addEventListener("click", test3, false );
}

// onload => start 실행 을 이벤트리스너로 만듬
window.addEventListener("load", start, false);
// load 이벤트가 발생하면, start 함수를 실행시키겠다.

=> click 이란 아이디를 가진 태그에 (동일태그)
click 종류의 이벤트가 발생하면 (동일이벤트)
test1 함수
test2 함수
test3 함수
모두 실행된다.
( EventListener 만 가능 )

- js 파일을 불러온 상태이기 때문에, test3 함수도 마치 이 HTML 에 있는 것처럼 바로 사용할 수 있다.





2. 등록된 이벤트 해제 가능
: removeEventListenver( "이벤트종류", "해제할함수", false )

- 위에서, click 이벤트에 총 3개의 이벤트(함수) 가 등록되어있다.
여기서 2번, 3번 함수(이벤트) 는 해제 시키고 싶다.

=> 해제할 함수들을 removeEventListener 로 만들어서
=> 큰 함수에 묶어서 담아두고  

function cancel(){
document.querySelector("#click").removeEventListener("click", test2, false );
document.querySelector("#click").removeEventListener("click", test3, false );
}

=> 이 함수를 addEventListener 로 이벤트를 걸어 두는 것

function start (){
document.querySelector("#click").addEventListener("click", test1, false );
document.querySelector("#click").addEventListener("click", test2, false );
document.querySelector("#click").addEventListener("click", test3, false );
document.querySelector("#cancel").addEventListener("click", cancel, false);
}

=> click 이란 id 를 가진 태그를 "click" 하면 test1, test2, test3 함수가 실행된다.
=> 그러다가, cancel 이란 id를 가진 태그를 "click" 하면 cancel 함수가 실행된다
=> cancel함수에 removeEventListener 이벤트가 두개 실행되면서, test2, test3 함수를 실행하는 이벤트를 "해제" 시킨다.
=> 다시 클릭 이벤트 발생시, test1 만 실행된다.



------------

[ EventListener - false ]
: addEventListener ( "이벤트종류" , 함수, false )
- 사실상 거의 항상 false 만 사용되므로 고정값이라 보면 된다.
( "이벤트버블링" 개념
false : 자식이벤트 => 부모이벤트 방향으로 진행됨
ture : 부모이벤트 => 자식이벤트 방향으로 진행 )