05 Event

1 addEventListener

• EventTarget 인터페이스의 메서드로 지정한 유형의 이벤트를 대상이 수신할 때 마다 호출할 함수를 설정함
• 등록: DOM객체. addEventListener(이벤트명, 실행할 함수명, 옵션);
• 삭제: DOM객체. removeEventListener(이벤트명, 실행했던 함수명);
•  대상
  • 이벤트를 지원하는 모든 객체
  • Element, Document, Widow + XMLHttpRequest
  • type: 수신할 이벤트 유형을 나타내는 문자열
  • listerner: 지정한 이벤트를 수신할 객체
  • options: 이벤트 수신기의 특징을 지정할 수 있는 객체
  • useCapture: 이벤트 타겟으로 이벤트가 전달되기 전 이 수신기가 먼저 발동되어야 함을 나타내는 불리언 값 _ 기본값을 false

addEventListener(type, listener);
addEventListener(type, listener, options);
addEventListener(type, listener, useCapture);

 

1) preventDefault

• Event 인터페이스의 메서드로 어떤 이벤트를 명시적으로 처리하지 않은 경우 해당 이벤트에 대한 사용자의 기본 동작을 실행하지 않도록함
• 등록: event.preventDefault();
• 동작 예시
  • 기본 클릭 동작 방지하기
  • 키 입력이 입력 칸을 채우는 것을 방지 Ex.영문만 입력하도록
• stopPropagation(): 이벤트가 상위 엘리먼트에 전달되는 것을 막음

2) text-transform_CSS

• 텍스트를 모두 대문자 또는 소문자로 표시하거나 각 단어를 대문자로 표시하는 데 사용함
• 옵션
  • capitalize: 각 단어의 첫 글자를 대문자로 변환
  • uppercase: 모든 문자를 대문자로 변환
  • lowercase: 모든 문자를 소문자로 변환
  • none: 모든 문자의 대소문자가 바뀌지 않도록함
  • full-width: 정사각형 안에 문자를 강제로 작성하여 일반적인 동아시아 문자(예: 중국어 또는 일본어)로 정렬할 수 있도록 함
  • full-size-kana: 독성 문제를 보완하기 위해 모든 작은 가나 문자를 동등한 전체 크기 가나로 변환

 

3) Console

• 디버깅 콘솔에 접근할 수 있는 메서드를 제공
• console.log() : 일반 메세지를 출력
• console.dir() : 주어진 JavaScript 객체의 속성 목록을 상호작용 가능한 형태로 표시
• console.count() : 주어진 레이블로 메서드를 호출한 횟수를 출력
• console.error() : 오류 메시지를 출력

 

const $div = document.querySelector('.container');
const $form = document.querySelector('form');
const $input = document.querySelector('input');
const $button = document.querySelector('button');

// 1. 이벤트 핸들러
// target.이벤트이름 = 콜백함수 
// 콜백 함수이므로 괄호를 쓰지 않음, alert만 실행됨

// $div.onclick = () => console.log("clicked");
// $div.onclick = () => alert("clicked");

// function handleClick () {
//     console.log("clicked");
// }

// 2.addEventListener
// $div.addEventListener('click', handleClick);
// $div.addEventListener('click', () => alert("clicked"));

// function handleClick () {
//      console.log("clicked");
// }

//3. remove 
// $div.removeEventListener('click', handleClick);

// 4. 인자
$div.addEventListener('click', handleClick);

function handleClick (event) {
    console.log(event.target.innerText);
}

//handleChange는 실행하고 커서가 한 번 다른곳에 가야 실행됨
//dir은 객체에 대한 접근이 가능하게 함
$input.addEventListener('change', handleChange);
function handleChange (event) {
    console.dir(event.target.value);
}

//preventDefault는 submit을 하면 새로고침 되는 것을 막음
//event의 기본적인 동작 자체를 막음으로 값은 따로 저장해 줘야함
$form.addEventListener('submit', handleSubmit);
function handleSubmit (event) {
    event.preventDefault();
    const inputValue = $input.value;
    console.log(inputValue);
    $input.value=''; //초기화
}