2023.03.22 js 와 다양한 event들

이무헌·2023년 3월 22일
0

html,css,js

목록 보기
13/21
post-thumbnail

1.createElement

하나의 태그를 변수로 만들어서 js상에서 조작할 수 있다.

let _div = document.createElement("div");

이렇게 되면 _div라는 변수는 div태그가 저장된 주소를 가리키는 변수가 된다.
다양한 변화를 줄 수 있다.

_div.innerHTML = "<p>내용이</p><div>없냐</div>?";
_div.classList.add("new_tag");

이러면 _div가지고 있는 div태그 안에 innerHtml에서 입력한 문자및 태그와 classList로 추가한 클래스를 넣어진다.

document.body.append(_div);

body에 붙이자.

누가봐도 적용됐다.
주의)append 함수는 복붙이 아니라 이동이다. 즉, 원래 있던 태그는 사라지고 append한 부분으로 이동! 하는 것이다.

2. 여러 이벤트들

/ load=>페이지 기타 요소들의 그릴 준비 로딩이 끝날을 때
// on이 붙으면 어트리뷰트 방식

// load이벤트 구독
// addEventListener('이벤트의 타입',함수의 내용)을 사용해서
// 이벤트를 구독해놓는다.
window.addEventListener("load", function () {
  // load이벤트가 실행되면 내용실헹
});

//onresize:브라우저의 창 크기가 바뀌면 실행되는 이벤트
window.addEventListener("resize", () => {});

// scroll 이벤트:사용자가 태그나 페이지에서 스크롤 했을 때
// 스크롤 값이 없으면 동작 하지 않아요.

// 태그의 이벤트로 원하는 이벤트를 구독하면 그 태그에서 그 이벤트가 발생할 때
// 실행된다.

// 여기는 우리가 생성한 태그에서 scroll 이벤트에 구독
_div.onscroll = () => {
  // 스크롤 이벤트가 실행되면 우리가 추가할 기능
  console.log("나 스크롤 되고있니?.");
};
// 여기는 body 태그에서 스크롤 이벤트가 발생할 때
document.body.addEventListener("scroll", () => {
  console.log("나 스크롤 되고있니?.");
});

scroll,resize등등 여러 윈도우를 조작 했을 때 일어나는 이벤트 들이다.

// onkeydown:사용자가 키보드를 눌렀을 때
window.onkeydown = function () {
  console.log("나 키보드 눌렀음");
};
// onkeyup: 사용자가 키보드를 누르고 땠을때

window.onkeyup = function () {
  console.log("키보드를 똈음");
};

// onkeypress:키보드를 누르고 있을 때(누르고 있으면 계속 실행)
window.onkeypress=function(){
    console.log('키보드를 누르고 있는 동안')
}

키보드 이벤트와 관련된 이벤트들이다.
onkeypress느 deprecated됐다.. 어차피 onkeydown으로 누르고 있을 때를 잡을 수 있어서 인 것 같다.

// 마우스 이벤트
// click:사용자가 해당 태그를 클릭했을 때 발생하는 이벤트
window.onclick=function(){
    console.log('asd');
}

// dbclick:더블 클릭 했을 때 실행되는 함수
window.ondblclick=function(){
    console.log('더블 asd')
}

//mousedown:마우스를 누르자 마자 실행되는 이벤트
window.onmousedown=function(){
    console.log('마우스 키다운');
}

// mouseup:마우스를 누르다가 땠을 때 실행되는 이벤트
window.onmouseup=function(){
    console.log('마우스 키 업')
}

// 마우스 키를 누르고 이동한 뒤 키를 뗐을 때
// 좌표로 계산해서 동작해야 하는 기능을 만들 때 사용합니다.

// mousemove: 마우스가 태그 위에서 이동 되는 동안
_div.onmousemove = function () {
  console.log("마우스 이동");
};

let box = document.querySelector(".box");

// mouseenter:마우스를 태그위로 올려졌을때 실행되는 이벤트
// hover같네 ㅎㅎ
box.onmouseenter = function () {
  console.log("마우스가 올려짐");
};

// mouseleave:마우스가 태그에서 위에서 빠져 나갔을 때 실행되는 이벤트
// hover 같네
box.onmouseleave = function () {
  console.log("마우스가 나가짐");
};

// 기능을 hover처럼 추가 할 수 있겠구나.

// 개발할 때 pc, 모바일 이렇게 웹을 만들텐데
// 모바일 환경에서 실행되는 이벤트

// 모바일 터치
// touchstart:화면을 터치한 순간
window.ontouchstart = function () {
  console.log("모바일 터치됐어");
};

// touchend:화면을 터치하다가 떼면
window.ontouchend = function () {
  console.log("뗐다!");
};

//touchmove:화면을 터치하고 이동할 때.
window.ontouchmove = function () {
  console.log("터치하고 이동중");
};

마우스 클릭,더블클릭,클릭후 이동,클릭후 뗐을 때, 터치했을 때, 터치하고 화면을 움직일때 등등 클릭과 관련된 이벤트들이다.

3.drag이벤트

drag이벤트는 하나의 객체가 아닌 여러 객체가 필요하니 디자인을 좀 했다.

 <style>
      .container {
        width: 800px;
        height: 800px;
        border: 1px solid;
        display: flex;
        flex-wrap: wrap;
      }
      .box {
        width: 400px;
        height: 400px;
        border: 1px solid red;
        box-sizing: border-box;
      }
      #item {
        width: 100%;
        height: 100%;
        background-color: grey;
      }
    </style>
 <div class="container">
      <div class="box">
        <!-- 드래그를 허용시켜주는 어트리뷰트 속성 true false로 설정하면 되는데 -->
        <div id="item" class="item" draggable="true"></div>
      </div>
      <div class="box">
        
      </div>
      <div class="box"></div>
      <div class="box"></div>
    </div>

먼저 드래그가 시작됐을 때이다.

let _target = null;
    // ondragstart:드래그가 시작될 때
 document.ondragstart = function (e) {
      //   e.target에 item클래스가 있는 태그였으면

      if (e.target.classList.contains("item")) {
        console.log(e.target);
        // 전역공간에 담아 놓고 드래그할 태그를
        _target = e.target;
        //e.target.style 태그의 스타일 값을 추가 할 수있다.
        // e.target.style 안에 적용시킬 스타일의 키값에 스타일 value를 추가해주면된다.
        // css에서 작성하던 이름과는 좀 달라요 카멜
        e.target.style.backgroundColor = "red";
      }
    };

하나의 대상을 클릭후 드래그가 시작된다.
이 때 item이라는 클래스가 있다면 _target을 선택한 객체로 한다.

움직이는 순간 빨간색이 됐다.

다음은 끝났을 때이다. 드래그가 끝나면 색을 또 변경시키자

   // ondragend
    document.ondragend = function (e) {
      // 드래그 끝났으니까 초기화
      _target = null;
      //   e.target에 item클래스가 있는 태그였으면
      if (e.target.classList.contains("item")) {
        // 처음에 입혀줬던 색으로 다시 변경
        e.target.style.backgroundColor = "grey";
      }
    };

원래 있던 회색으로 변경시켜줬다. 여기서 e.target은 당연히 item이 있는 태그, 즉 처음 드래그를 시작한 그 객체이다.
이제 영역침범을 해보자

  // 드래그 하고 태그의 위에 올려졌을 때

    document.ondragenter = function (e) {
      // e.target이 box클래스를 가지고 있고 _target 이 비어있지 않을때
      if (e.target.classList.contains("box") && _target !== null) {
        e.target.style.backgroundColor = "silver";
      }
    };
    

영역을 침범하면 당연히 다른 div,즉 class가 box인 태그이다.

들어갔으면 나오자

    // ondragleave:드래그 하다가 태그위에서 빠져나갔을 때
    document.ondragleave=function(e){
        if (e.target.classList.contains("box") && _target !== null) {
            //배경을 파란색으로 변경
        e.target.style.backgroundColor = "blue";
      }
    }

만약 다른 태그로 가서 드랍을 한다면? leave와 비슷해보이지만 leave는 드래그한 이미지가 다시 원래대로 돌아간다.마치 이미지가 원한은 곳에 드랍되듯이 자연스럽게 만들어보고 싶다.

그러기 위해선 일단 이미지가 다시 돌아가는 것을 막아줘야 한다.

  // ondragover:drop 이 완료됐을 때 발생하는 이벤트가 ondragover 이벤트이다.
    document.ondragover=function(e){
        if (e.target.classList.contains("box") && _target !== null) {
            // preventDefault:기본 동작을 없애준다. 브라우저에서 기본적으로 동작하는 기능을 제거해준다.
            e.preventDefault();
            // form 태그 쓰다가 새로고침되는 현상을 막아준다
      }
    }

drop이 완료됐을 때 e.preventDefault();로 이미지가 돌아가는 것을 막아주자

// ondrop:드래그 한다가 마우스 버튼을 떼면 드롭
    document.ondrop = function (e) {
      if (e.target.classList.contains("box") && _target !== null) {
        e.target.style.backgroundColor = "transparent";
        // 원하는 위치에 태그에 내용으로 태그를 이동시켜줄 수 있다.
        e.target.append(_target)
      }
    };

원하는 곳에 태그를 떨구자 ㅎㅎ

성공적으로 드랍됐다.

  1. append로 줬으므로 기존에 있던 div안의 item태그는 없어졋다.
  2. e.target.style.backgroundColor = "transparent"; 이 부분은 드랍된 곳, 즉 box의 배경색이 달라지지만, item태그가 옮겨 졌으므로 덮어씌워지게 된다. 즉, 어떤 색을 줘도 색이 보이지 않는다.()(이동하게 되면 보이게 된다.)
## 4.cookie

HTTP 쿠키(HTTP cookie)란 하이퍼 텍스트의 기록서(HTTP)의 일종으로서 인터넷 사용자가 어떠한 웹사이트를 방문할 경우 사용자의 웹 브라우저를 통해 인터넷 사용자의 컴퓨터나 다른 기기에 설치되는 작은 기록 정보 파일을 일컫는다.[1] 쿠키, 웹 쿠키, 브라우저 쿠키라고도 한다. 이 기록 파일에 담긴 정보는 인터넷 사용자가 같은 웹사이트를 방문할 때마다 읽히고 수시로 새로운 정보로 바뀐다. 이 수단은 넷스케이프의 프로그램 개발자였던 루 몬툴리(Lou Montulli)가 고안한 뒤로 오늘날 많은 서버 및 웹사이트들이 브라우저의 신속성을 위해 즐겨 쓰고 있다.[2]
출처:wikipedia

사용자의 pc에 저장되어 있다 같은 사이트를 들어갈 때 쿠키에 담긴 정보를 이용해 사용자에게 적합한 응답을 내주는 것이다.

console.log(document.cookie);

쿠키는 이렇게 간단하게 불러올 수 있다. 물론 저장된 것이 없으니 null이 뜬다.

Date 생성자 함수

    let date = new Date();
    console.log(date);

현재시간이 ms단위로 출력된다.
쿠키의 기간을 1일로 하고 싶다면 하루를 ms단위로 바꿔주고 더해주면 된다.

date.setTime(date.getTime() + time * 24 * 60 * 60 * 1000);

그 후 UTC방식으로 포맷시켜주자

let currentTime=date.toUTCString()

이제 쿠키를 정해진 형식으로 (정규식)으로 넣자

    document.cookie = name+"="+value+";expires"+date.toUTCString()+";path=/";

삭제는 만료기간을 고의로 바꿔주면 된다.

function deleteCookie(name){
    document.cookie = name +"=; expires=Thu, 01 Jan 1999 00:00:10 GMT;";
}

5.localStorage

로컬 스토리지 : 브라우저에 데이터를 저장하는 방법들중 하나고.
pc에 데이터가 저장되고, 쿠키와 세션과 다른점 만료일이 없어. 만료 기간이 없다.

브라우저에 저장하는 방법이다. key,value형태로 저장된다.

window.localStorage.setItem("user_id","soo");
let a = window.localStorage.getItem("user_id");
console.log(a); //soo

정말 간단하다.
리덕스를 사용했을 때 꽤 신세를 졌다.

profile
개발당시에 직면한 이슈를 정리하는 곳

0개의 댓글