Cute Blinking Unicorn

프론트엔드/JavaScript

이벤트(events), DOM(script 위치, defer속성이용), 콜백함수(addEventListener)

민밥통 2023. 11. 6. 16:23
events 웹 페이지 또는 앱에서 사용자 상호 작용을 감지하고 처리하기 위한 중요한 개념입니다. 이벤트는 사용자의 행동(예: 클릭, 마우스 이동, 키보드 입력 등) 또는 브라우저 또는 웹 페이지 자체에서 발생할 수 있는 것들(예: 페이지 로드, 리사이징, 네트워크 요청 완료 등)을 나타냅니다.

 

 

align-items/content는 부모 요소의 자식들 전체를 묶어서 정렬을 해주는 반면,

부모 요소의 자식 아이템들을 각각 다른 방식으로 정렬하고 싶다면 (정렬을 개별로 설정하고 싶다면)

align-self를 사용한다.

출처: https://letsgojieun.tistory.com/49 [고지은고:티스토리]

 

      ul {
        display: inline-block;
        align-content: flex-start;
        /* 세로로 바뀌어짐 */
        flex-direction: column;
      }
 
      #result {
        width: 500px;
        height: 300px;
        margin: 30px auto;
        border: 2px solid red;
        border-radius: 15px;
      }

  <body>
    <ul>
      <il><a href="#" onclick="alert('버튼을 클릭')">Green</a></il>
      <il><a href="#">Orange</a></il>
      <il><a href="#">Blue</a></il>
    </ul>
    <div id="result"></div>
  </body>

클릭하면 나온다!

박스 색깔 바꾸기!

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="/2023-11-06/function내에활용/solution.js"></script>
    <button id="myButton">Click Me</button>
    <input type="text" id="myInput" />
    <script>
      function changBg(color) {
        // 매개변수 color 추가
        let result = document.querySelector("#result");
        result.style.backgroundColor = color;
      }
    </script>
    <style>
      ul {
        display: inline-block;
        align-content: flex-start;
        /* 세로로 바뀌어짐 */
        flex-direction: column;
      }
      #result {
        width: 500px;
        height: 300px;
        margin: 30px auto;
        border: 2px solid red;
        border-radius: 15px;
      }
    </style>
  </head>
  <body>
    <ul>
      <il><a href="#" onclick="changBg('green')">Green</a></il>
      <il><a href="#" onclick="changBg('orange')">Orange</a></il>
      <il><a href="#" onclick="changBg('blue')">Blue</a></il>
    </ul>
    <div id="result"></div>
  </body>
</html>

DOM을 이용한 이벤트 처리

( 문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface 이다.)

웹요소.이벤트 = 함수

<<

querySelector: id(#)나 클래스명(.) , div

요소.getElementById: ID

getElementByClassName

getElementByTagName

차이 요약:
getElementById은 ID를 사용하며 유일한 요소를 선택합니다.
getElementsByClassName은 클래스 이름을 사용하며 여러 요소를 선택합니다.
getElementsByTagName은 태그 이름을 사용하며 여러 요소를 선택합니다.
각 메서드는 선택된 요소 또는 요소 컬렉션을 반환하므로 반환된 결과를 순환하거나 조작할 수 있습니다.

 

 

 

JavaScript 코드의 위치가 DOM 조작 및 실행 순서에 영향을 미칠 수 있습니다.
  1. HTML 파싱: 브라우저는 HTML 문서를 위에서 아래로 파싱하면서 문서의 구조를 이해합니다. 만나는 요소나 스크립트 태그에 따라 DOM 트리가 구성됩니다.
  2. 스크립트 로딩: 스크립트 태그(<script>)를 만나면 해당 스크립트 파일을 다운로드하고 실행합니다. 스크립트 파일이 로딩되는 동안 다른 HTML 요소의 파싱 및 로딩이 일시 중지됩니다.
  3. 스크립트 실행: 스크립트 파일이 다운로드되면 해당 스크립트가 실행됩니다. 스크립트가 실행되면서 DOM 조작 및 이벤트 처리를 수행할 수 있습니다.
스크립트가 <head> 안에 위치하는 경우: 이 위치에서 스크립트가 실행되는 동안, HTML 문서의 나머지 부분(예: <body> 내의 요소)은 아직 로딩되지 않았으므로 스크립트에서 DOM 요소를 찾지 못할 수 있습니다.스크립트가 <body> 안의 하단에 위치하는 경우: 일반적으로 권장되는 위치입니다. 스크립트가 HTML 문서의 나머지 요소를 찾을 수 있으며, 스크립트가 실행될 때 DOM이 이미 구성되어 있습니다.문서 로드 이벤트 사용: 스크립트가 페이지의 내용을 수정해야 하는 경우, 전체 문서가 로드된 후에 스크립트를 실행하도록 "DOMContentLoaded" 이벤트를 사용할 수 있습니다.

 

 

 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      #result {
        width: 500px;
        height: 300px;
        margin: 30px auto;
        border: 2px solid red;
        border-radius: 15px;
      }
    </style>
  </head>
  <body>
    <button id="button">배경색 바꾸기</button>
    <div id="result"></div>
    <script src="/2023-11-06/이벤트활용/solution.js"></script>
  </body>
</html>
const button = document.getElementById("button");
const resultBox = document.getElementById("result");

button.addEventListener("click", function () {
  changeBackgroundColor();
});

function changeBackgroundColor() {
  const red = Math.floor(Math.random() * 256);
  const green = Math.floor(Math.random() * 256);
  const blue = Math.floor(Math.random() * 256);

  resultBox.style.backgroundColor = `rgb(${red}, ${green}, ${blue})`;
}
 
ㄴ BOM API

 

240 페이지 확인

 

<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

 

    <style>
      #result {
        width: 500px;
        height: 300px;
        margin: 30px auto;
        border: 2px solid red;
        border-radius: 15px;
      }
    </style>
  </head>
  <body>
    <div class="box">Box!</div>
    <script src="/2023-11-06/이벤트활용2/solution.js"></script>
  </body>
</html>

'

바디안에

    <div class="box">Box!</div>

 

    <script src="/2023-11-06/이벤트활용2/solution.js"></script>
 
스크립트를 넣어주면 잘 실행되지만
바디안에 스크립트를 넣지 않으면 되지 않다. 
 

<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script defer src="/2023-11-06/이벤트활용2/solution.js"></script>

 

    <style>
      #result {
        width: 500px;
        height: 300px;
        margin: 30px auto;
        border: 2px solid red;
        border-radius: 15px;
      }
    </style>
  </head>
  <body>
    <div class="box">Box!</div>
  </body>
</html>

 

 <script defer src="/2023-11-06/이벤트활용2/solution.js"></script>

스크립트에 defer를 넣으면 DOM에 있는 요소들을 다 찾아온다.

 

ㄴ 교재 243페이지에서 js에서 js로 요소를 클릭했을 때 동작하는 코드를 만들어 보겠다. 

 

const boxEl = document.querySelector(".box");

console.log(boxEl);

 

boxEl.addEventListener("click", function () {
  console.log("click");
});
// 이 부분에서 익명 함수(anonymous function)가 addEventListener 메서드에 전달되며, 이 함수는 "click" 이벤트가 boxEl 요소에서 발생할 때 실행됩니다. 따라서 "click" 이벤트가 발생하면 "click" 문자열이 콘솔에 출력됩니다.

 

F12번을 눌러서 박스부분을 클릭하면 클릭한 횟수가 뜬다 

이런 걸 콜백함수라고 한다.

함수가 사용된 게 아니고 매개변수로 함수를 넘겨준 거다.

일단 넘겨받은 다음에 호출하게 된다. 

 

addEventListener(이벤트가 나오고, 함수)
메서드 내에 전달된 함수는 콜백 함수(callback function)입니다. 콜백 함수는 이벤트가 발생했을 때 호출되며, 해당 이벤트가 발생할 때 어떤 동작을 수행할지 정의합니다.

 

콜백 함수는 주로 이벤트 처리, 비동기 작업, 타이머 처리 및 다양한 상황에서 사용됩니다.

a, addEventListener(''moseover",aaa)

 

a, addEventListener(''moseoutr",aaa)

a 라는 요소는 하나지만 마우스 오버와 마우스 아웃이라는 이벤트가 생기는 것이다

여러개의 이벤트를 처리하려면 애드이벤트리스너를 이해하면 된다.

 

참고해볼 사이트

https://blogpack.tistory.com/1127

 

[Javascript] 쿼리선택자의 종류와 차이점 - getElementById, getElementsByClassName, getElementsByTagName, querySelecto

DOM에서 HTML 요소를 선택하는 방법은 5가지가 있습니다. getElement로 시작하는 getElementById(), getElementsByClassName(), getElementsByTagName() 3개의 메서드는 HTML 요소(Element), 또는 요소들을 반환합니다. getElemen

blogpack.tistory.com

 

'프론트엔드 > JavaScript' 카테고리의 다른 글

자바스크립트 객체 관련 활용한 날 (마지막 수업! 공부화이팅)  (0) 2023.11.13
이미지클릭시  (0) 2023.11.06
a부터 b까지 값을 구해보기  (0) 2023.11.06
매개변수, 인수, 익명함수, 기명함수, 자기호출함수, 화살표함수  (0) 2023.11.06
함수를 사용하는 이유?  (0) 2023.11.06

'프론트엔드/JavaScript'의 다른글

  • 현재글이벤트(events), DOM(script 위치, defer속성이용), 콜백함수(addEventListener)

관련글

티스토리툴바