바닐라 자바스크립트 - Event listen하기

출처 및 참고 : 

 - 노마드 코더 챌린지(바닐라 JS로 크롬 앱 만들기) : https://nomadcoders.co/

 - 

 

 

# Event Listen

event란
 "내가 마우스로 웹 내에 무언가를 click한다" 
 "h1 태그 위로 마우스를 올린다."
- 인풋박스에 타이핑을 끝내거나, 글을 쓰거나, enter 누르는 것 또한 event에 속한다.
- 또 Wifi의 접속이 해제되는 경우도 event가 될 수 있다. 

 

위에 말한 모든 event들을 JavaScript는 listen 할 수 있다,

 

오늘은 click event를 알아보자 

 

지금까지 배운 내용으로는 HTML Element를 JavaScript로 가져오는 방법을 배웠다. 

 

// 실습 기초 js 코드

const title = document.querySelector("div.hello:first-child h1"); 
console.dir(title);

 

// 대상이 될 HTML 코드

    <div class="hello">
        <h1 class="sexy-font">Click me</h1>
    </div>

 

Event를 하기에 앞서 우리는 JavaScript에 어떤 event를 listen하고 싶은지 알려줘야한다. 왜냐하면 모든 이벤트가 아닌 단 하나의 event만 알아보고 싶기 때문이다. 

 

 

- h1의 element를 title이라는 변수로 가져와서 addEventListener를 적용한다.

- 이제 누군가가 title을 click 했을 때 무언가를 취해줘야 한다. function을 이용해보자    

- 해당 function을 사용하기 위해서 addEventListener의 두번째 argument(인자)로 방금 정의한 함수를 넣어준다. 

- 내가 직접 실행버튼을 누르지 않고 JavaScript에 이 function 이름을 넘겨줘서 유저가 title을 click할 경우에 JavaScript가 자기 대신 실행버튼을 눌러주게 하는 원리이다. 

 

- 위 흐름의 코드는 아래와 같다. 

function handleTitleClick(){
    console.log("title click success!");
    title.style.color = "blue";
}

title.addEventListener("click", handleTitleClick) ; // click 이벤트가 발생하면 handleTitleClick() 함수가 동작한다는 의미

 

동작원리

page에서 element를 찾아내고 해당 element에 event listener를 추가한다. 그리고 유저가 click을 하거나, 무언가 입력하거나, 엔터를 누르거나 할 때 해당 evnet에 listen 하고 반응을 해준다.

---

# 특정 이벤트 listen하기

마우스가 우리가 정의한 title 위에 올라갈때 click은 하지 않고 그냥 위치해 있을 때의 event
mouseenter event, mouseleave event

 

// JavaScript

const title = document.querySelector("div.hello:first-child h1"); 
console.dir(title);

// title object 클릭
function handleTitleClick(){
    console.log("title click success!");
    title.style.color = "blue";
}

// 커서 위치
function handleMouseEnter(){
    title.innerText = "Mouse is here";
    console.log("mouse is here");
}

// 커서 떠남
function handleMouseLeave(){
    title.innerText = "Mouse is gon!";
    console.log("Mouse leave.......");
}

// event 할당 방법 2가지
// 방법 1
title.addEventListener("click", handleTitleClick);
title.addEventListener("mouseenter",handleMouseEnter); // 마우스가 해당 object 위에 있을때 event
title.addEventListener("mouseleave",handleMouseLeave); // 마우스가 해당 object를 떠났을 때


// 방법 2
title.onclick = handleh1Click;
title.onmouseenter = handleMouseEnter; // 마우스가 해당 object 위에 있을때 event
title.onmouseleave = handleMouseLeave; // 마우스가 해당 object를 떠났을 때
// addEventListener를 하면 추후에 removeEventListener를 통해 event listener를 제거할 수 있다.

 

// HTML

    <div class="hello">
        <h1>Click me</h1>
    </div>

 

위에 JavaScript를 적용하면 이벤트가 발생하면서 log에 출력된다.

 

흐름이론

JavaScript로 HTML element를 가져오고 가져온 element에 event listener를 추가하는 것임. 그리고 event가 발생하면 임의로 만들고 지정한 function을 실행 시켜준다.

funname()으로 우리가 직접 실행버튼을 누르는게 아니라 JavaScript가 대신 실행버튼을 눌러주는 것이다.

우리는 JavaScript에게 뭘 할지 알려주고 JavaScript는 알려준 동작을 하는 것이다. 우리가 직접 할 필요없이 JavaScript에게 하라고 지시만 하면 된다. 하지만 style을 변경하는 건 css가 하는것이 옳다.

 

---

# window 이벤트 listen 하기

참고 : https://developer.mozilla.org/ko/docs/Web/API/Window

 

Window의 Events
- addEventListener()를 통해 event들을 listen 할 수도 있고 oneventname property에 event listener를 할당함으로써 event listen이 가능하다.

 

 

window를 통해 resize, copy, paste, wifi 와 연관이 있는 event들을 알아보자

const h1 = document.querySelector("div.hello:first-child h1"); 
console.dir(h1);

// window가 resize될 경우에 
function handleWindowResize(){
    document.body.style.backgroundColor = "tomato";
    console.log("resize");
    // document는 body에 접근할 수 있음.
    // document.title은 head에 있는 title을 불러온다. 
}

// 복사동작이 인식될때
function handleWindowCopy(){
    alert("copy success");
}

// 붙여넣기 동작이 인식될때
function handleWindowPaste(){
    alert("paste success");
}

// wifi가 연결이 off일때
function handleWindowOffline(){
    alert("SOS no WIFI");
}

// wifi가 연결이 on일때
function handleWindowOnline(){
    alert("On WIFI");
}

//지금까지 했던 title은 HTML element이다. 
//document가 JavaScript에서 기본적으로 제공되듯 window에서도 함수를 기본적으로 제공해준다. 

//h1은 resize가 불가 하지만 window는 가능
window.addEventListener("resize", handleWindowResize); // resize(화면크기가 바뀜)
//window element의 resize event를 listen 한다. 

//document.div 이런식은 가져올 수 없다. 하지만 body, head, title 이것들은 중요하기 때문에 존재함.
//나머지 element들은 querySelector나 getElementById 등으로 찾아와야한다. 

//Clipboard events 에는 copy를 할 때 동작하는 이벤트
window.addEventListener("copy", handleWindowCopy);
window.addEventListener("paste", handleWindowPaste); 
//copy event를 listen해서 해당 event를 처리한다. 

//wifi event : wifi가 연결되어 있는지 확인 할 수 있다.
window.addEventListener("offline", handleWindowOffline);
window.addEventListener("online", handleWindowOnline);

 

이렇게 copy는 복사 event를 인식하는데 alert 코드를 작성하면 복사 동작을 취했을때 확인할 수 있다.

이것으로 copy, paste, wifi - on, off를 테스트 해보자 

---