JavaScript - 5 [EventListener, if else 구문]

EventListener

: 지정한 이벤트가 대상에 전달 될때마다 호출할 함수를 설정한다.

DOM 객체 대부분에서 호출할수 있는 것같다.

 

JS는 이벤트가 일어나면 이벤트이름에 해당하는 인자를 받는 함수들에 항상 보내준다.

 

target.addEventListener("type", function);

- 아래코드에서 addEventListener 부분에서 handClick이 handClick() 이렇게 적혀있었다면

"click" 이라는 이벤트를 기다리기전에 바로 함수를 실행한다.

console.dir(document);
// id가 title인 것을 찾을 때
let title = document.querySelector("#title");
// className이 title인 것을 찾을 때
let classTitle = document.querySelector(".title");
function handleClick(){
    title.style.color = "green";
}
title.addEventListener("click", handleClick);
classTitle.innerHTML = "Hi classTitle";

 

window.addEventListener("resize", 함수이름)

- resize 이벤트가 생성되면 함수이름에 해당하는 일들이 일어난다.

let title = document.querySelector(".title");
function resized (){
    title.style.color = "red";
    title.innerHTML = "wow";
}

window.addEventListener("resize", resized);

이벤트 인자를 받으면 해당 이벤트의 이름을 출력해보려고 했는데 잘 안됐다;

let title = document.querySelector(".title");
function handleResize (event){
    console.log(`Happening! ${event}!!`);    
}

window.addEventListener("resize", handleResize);

이외 다양한 이벤트들을 알아보고 써먹고 싶다면 

developer.mozilla.org/ko/docs/Web/Events

이벤트 참조

 

 

if else 구문

- 완벽하게 자바와 같다.

 

if (조건문) {

 

} else if (조건문2) {

 

} else {

 

}

 

if(20 <= 5){
    console.log("20이 더 큽니다.");
} else if("Doodream" === "Doodream"){
    comsole.log("Same");
} else {
    console.log("nothing");
}

 

이 코드에서 '===' 라는 비교연산자를 처음보았다. JS에서 이코드는 무려!! 객체를 깊게 비교해준다.

즉, String이 완벽하게 같은 문자열인지 비교해주고 다른 object들도 같은지 비교해준다.

 

let object = {
    name : "doodream"
}

if(20 <= 5){
    console.log("20이 더 큽니다.");
} else if("Doodream" === "Doodream"){
    console.log("Same");
    let isSame = object === object;
    console.log(isSame);
} else {
    console.log("nothing");
}

보라 객체를 그냥 비교해버리지 않나;; 자바 같으면 Objects.deepEquals(객체1, 객체2); 이렇게 비교할텐데

이걸 === 이렇게 끝내네;

 

이외 비교연산자들도 java와 같다. &&, ||, true, false도 같다. !true = false

if(true && true){
    console.log(`&&`);
} 

if(!true || !true){
    console.log(`fail`);
}else{
    console.log('||');
}

 

if else와 이벤트를 이용한 간단한 구현이다.

const title = document.querySelector(".title")
const BASE_COLOR = "rgb(163, 79, 79)";
const CHANGE_COLOR = "rgb(153, 218, 101)";

function handClick(){
    const titleColor = title.style.color;
    if(titleColor === BASE_COLOR){
        title.style.color = CHANGE_COLOR;
    }else{
        title.style.color = BASE_COLOR;
    }
}

function init(){
    title.style.color = BASE_COLOR;
    title.addEventListener("mouseenter", handClick);
}

init();