22.04.24

거의 한 달만에 작성하는... (그만큼 공부 안 했다는 의미임.)

코드잇 강의

• 마우스 이벤트 프로퍼티
  

아주아주 오랜만에 보는 프로퍼티. 예전에 드래그 한 영역의 문자를 클립보드에 자동으로 복사하는 기능을 추가로 구현할 때 사용해 봤다.

• mouseEnter(&mouseLeave) vs mouseOver(&mouseOut): mouseEnter에서는 이벤트 버블링이 일어나지 않으며 자식 요소의 영역을 계산하지 않음

늘 애매하게 차이를 인지하고 있던 내용인데 이렇게 확실히 정리할 수 있어서 좋은 기회였다.

• 사용자 정의 속성을 선택할 때는 이렇게도 가져올 수 있다는 사실... e.target.dataset.title getAttribute에 뭐에 똥싸고 있었는데;
• 마지막 childElement를 제거할 때: e.target.lastElementChild.remove() (target의 자식 노드 중에 마지막을 골라서 제거하던 바보같은 나...)

실습 코드의 모범 답안과 내가 싼 똥을 기록하며 오늘은 여기까지 해야겠다.

const chatBox = document.querySelector('#chat-box');
const input = document.querySelector('#input');
const send = document.querySelector('#send');

function sendMyText() {
  const newMessage = input.value;
  if (newMessage) {
    const div = document.createElement('div');
    div.classList.add('bubble', 'my-bubble');
    div.innerText = newMessage;
    chatBox.append(div);
  } else {
    alert('메시지를 입력하세요...');
  }

  input.value = '';
}

send.addEventListener('click', sendMyText);

function sendMyTextByEnter (e) {
  if (e.key === 'Enter' && !e.shiftKey) {
    sendMyText();
    e.preventDefault();
  }
}

input.addEventListener('keypress', sendMyTextByEnter);

const chatBox = document.querySelector('#chat-box');
const input = document.querySelector('#input');
const send = document.querySelector('#send');

function sendMyText(e) {
  console.log(e.type)
  const newMessage = input.value;
  if (newMessage) {
    if(e.type === 'click' || (e.key === 'Enter') && !e.shiftKey ){
    const div = document.createElement('div');
    div.classList.add('bubble', 'my-bubble');
    div.innerText = newMessage;
    chatBox.append(div);
    e.preventDefault()
    input.value = '';
    }
  } 
  else if(e.key === 'Enter' || e.type === 'click'){
    alert('메시지를 입력하세요...');
    e.preventDefault();
  }

}

send.addEventListener('click', sendMyText);
input.addEventListener('keypress', sendMyText)
// 내가 싼 똥...