본문 바로가기
JavaScript

JavaScript <event 2> 색상 변경 이벤트

by wlals5855 2024. 6. 9.

<HTML>

 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JS 이벤트 02</title>
  <style>
    #colorButton,
    .colorDiv {
      padding: 10px;
      margin: 5px;
      text-align: center;
      border: 1px solid #ddd;
    }
 
    .colorDiv {
      width: 100px;
      height: 100px;
      display: inline-block;
      background-color: #f0f0f0;
    }

    /* 실습 문제 */
    #grid-container {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: repeat(4, 1fr);
      gap: 10px;
      width: 100%;
      height: 200px;
    }
    .tile {
      border: 1px solid #333;
      background-color: #f0f0f0;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  </style>
</head>
<body>
  <h2>이벤트 객체</h2>
  <button id="colorButton">색 변경</button>
  <div id="colorDiv1" class="colorDiv"></div>
  <div id="colorDiv2" class="colorDiv"></div>
  <div id="colorDiv3" class="colorDiv"></div>
  <div id="colorDiv4" class="colorDiv"></div>

  <hr />
  <div id="grid-container">
    <div class="tile">1</div>
    <div class="tile">2</div>
    <div class="tile">3</div>
    <div class="tile">4</div>
    <div class="tile">5</div>
    <div class="tile">6</div>
    <div class="tile">7</div>
    <div class="tile">8</div>
    <div class="tile">9</div>
    <div class="tile">10</div>
    <div class="tile">11</div>
    <div class="tile">12</div>
    <div class="tile">13</div>
    <div class="tile">14</div>
    <div class="tile">15</div>
    <div class="tile">16</div>
  </div>

  <hr />
  <h2>기본 행동 방지하기</h2>

  <form>
    <div>
      <label for="fname">Name: </label>
      <input type="text" id="fname"/>
    </div>
    <div>
      <label for="email">Email: </label>
      <input type="email" id="email" />
    </div>
    <div>
      <input type="submit" id="submit" />
    </div>
  </form>
  <p></p>

  <hr />
  <h2>이벤트 버블링과 캡쳐</h2>

  <div id="parentDiv">
    parentDiv
    <button id="childButton">Click Me</button>
  </div>
 
  <script src="./event02.js"></script>
</body>
</html>

 

⭐ 이벤트 객체

  • 이벤트 핸들러가 호출될 때, 브라우저는 자동으로 이벤트 객체를 생성하영 이벤트 핸들러에 전달
  • 이벤트가 발생할 때 브라우저에 의해 자동으로 생성되며 이벤트핸들러에 전달되는 객체
  • 이벤트와 관련되 다양한 속성과 메소드를 포함

 

✔️ 이벤트 객체의 일잔적인 속성

  • type: 이벤트의 유형을 지정(예: 'click', 'mouseover')
  • target: 이벤트가 발생한 요소를 참조, 이벤트 발생 시 변경으로 적용할 요소를 결정하는 데 유용
  • currentTarget: target과 유사하지만, 이벤트 리스너가 실제로 첨부된 요소르 참조
  • preventDefault():브라우저가 해당 이벤트에 대해 기본적으로 수행하는 동작을 방지하는 메서드
  • stopPropagation(): 이벤트가 이벤트 체인을 따라 버블이되는 것을 중단시키는 메서드
  • ex) 마우스 이벤트 - 마우스의 위치, 버튼 상태 등에 대한 정보를 포함
  • ex) 키보드이벤트 - 눌린 키에 대한 정보를 포함

 

  • event, evt, e등과 같은 이름을 명명된 매개변수로 전달
 
function random(number) {
  return Math.floor(Math.random() * (number + 1));
}
  • 이벤트 객체인 e를 함수에 포함
  • 이벤트 객체의 target프로퍼티를 사용하여 이벤트가 일어나는 버튼 그 자체에 실행
 
function bgChange(e) {
  const randomColor = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;

  e.target.style.backgroundColor = randomColor;
  }
 
  • target 프로퍼티
    : 항상 이벤트가 발생된 요소에 대한 참조
  • document.body.style
    : 웹 문서의 전체 스타일 설정
  • e.target (해당 이벤트가 발생한 그 객체에서만 스탕리을 지정)
    : div를 클릭할 경우 해당 이벤트 리스너가 실행되는 주체는 (e.target) div 요소 자체
  • JS에서 스타일 지정 방식
    : CSS의 스타일 지정법을 lowerCamelCase로 지정
  • background-color: backgroundColo
  • border-radius: borderRadius
 
const colorButton = document.getElementById('colorButton');

const divs = document.querySelectorAll('.colorDiv');

colorButton.addEventListener('click', bgChange);

for (let i = 0; i < divs.length; i++) {
  divs[i].addEventListener('click', bgChange);
}
 

 

  • getElementById는 문서에서 id를 사용해 요소 선택
    : querySelector와의 차이점 - # 사용하지 X
  • 이벤트 객체 실습
    : 16개의 타일 세트
    : queryslectorAll()을 사용하여 16개의 타일의 참조를 tiles 상수에 할당
  • 반복문을 사용하여 16개의 타일에 이벤트 핸들러를 등록
  • 각각의 타일을 클릭했을 때 클릭된 타일의 배경색이 변경되도록 지정
 
function tileChange() {
  const randomColor = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  return randomColor;
}
 
  • 위에서 만들 랜덤함수를 rgb에 담아 컬러를 랜덤으로 만드는 함수를 만든다.
 
const tiles = document.querySelectorAll('.tile');
 
for (let i = 0; i < tiles.length; i++) {
  tiles[i].onclick = function(e) {
    e.target.style.backgroundColor = tileChange();
  }
}
  • 선택자를 사용하여 전체 요소들을 배열로 가져오기
  • 반복문 사용: 각 tile 요소에 onclick 이벤트 핸들러 할당
    : 해당 이벤트는 이벤트 객체를 전달받기 
    : 해당 객채에서 일어난 요소값을 찾아 색상 부여

< 결과 >

 

'JavaScript' 카테고리의 다른 글

JavaScript <event> 이벤트 버블링과 캡쳐  (0) 2024.06.10
JavaScript <event 3> 기본 행동 방지 이벤트  (0) 2024.06.09
JavaScript <event 1>  (0) 2024.06.07
JavaScript <객체Object4>  (0) 2024.06.06
JavaScript <객체Object 3>  (0) 2024.06.05

관련글

티스토리툴바