SEB Section 1 Event

이벤트 객체

• pos기를 만드는 과정 중 일부이다. 화면에 두 버튼이 있다. 이 버튼을 클릭할 때, 각각 음료의 이름을 출력하는 프로그램이다.

let menus = document.querySelectorAll("button"); //모든 버튼을 가져옵니다.

let btnAmericano = menus[0];
let btnCaffelatte = menus[1];

btnAmericano.onclick = handleClick;
btnCaffelatte.onclick = handleClick; // 이상으로 for 문으로 충분히 구현할 수 있는 내용입니다.

function handleClick() {
  // 아래의 빈 칸(____)을 채우세요.
  let currentMenu = ____; // TODO
  console.log(currentMenu + "를 클릭하셨습니다.");

• 이때 눌리는 버튼의 메뉴이름을 가져오는 방법은 무엇일까?

event

• 사용자가 버튼에 따라 출력되는 이름이 달라지므로, 클릭된 이벤트 객체에서 메뉴의 이름을 가져온다.
• 이벤트 객체는 사용자 입력(onclick, onkeyup, onscroll 등)을 트리거로 발생한 이벤트 정보를 담은 객체이다.

let menus = document.querySelectorAll("button"); //모든 버튼을 가져옵니다.

let btnAmericano = menus[0];
let btnCaffelatte = menus[1];

btnAmericano.onclick = handleClick;
btnCaffelatte.onclick = handleClick; // 이상으로 for 문으로 충분히 구현할 수 있는 내용입니다.

function handleClick(event) {
  // 아래의 빈 칸(____)을 채우세요.
  console.log(event);
  let currentMenu = ____; // TODO
  console.log(currentMenu + "를 클릭하셨습니다.");

• 여기서 handclick 함수에 매개변수를 event로 받아 console.log를 찍어보면, onclick이 발생한 버튼의 대한 정보인 객체를 가져오게 된다.
• 이때 정보 안에 target 이라는 key에 onclick이 발생한 타겟에 대한 태그 정보가 나오게 된다. 따라서 event.target을 하면 해당 태그를 가져올 수 있게된다.
• 이 event.target에 textContext 혹은 innerHTML을 이용하여 해당 문자열을 가져오면 된다.

let menus = document.querySelectorAll("button"); //모든 버튼을 가져옵니다.

let btnAmericano = menus[0];
let btnCaffelatte = menus[1];

btnAmericano.onclick = handleClick;
btnCaffelatte.onclick = handleClick; // 이상으로 for 문으로 충분히 구현할 수 있는 내용입니다.

function handleClick(event) {
  // 아래의 빈 칸(____)을 채우세요.
//   console.log(event);
  let currentMenu = event.target.innerHTML; // TODO
  console.log(currentMenu + "를 클릭하셨습니다.");

이벤트 메소드

onsubmit

• 현재 창에서 폼을 제출하는 이벤트를 다루는 이벤트 핸들러이다.
• 제출 이벤트는 사용자가 폼 내부에 있는 제출버튼을 눌렀을 때 발생한다.

onchange

• onchange 속성은 change 이벤트의 이벤트 핸들러를 설정하고 반환한다.
• target.onchange = functionRef;
• functionRef는 null 또는 이벤트 핸들러를 지정하는 js function 함수 중 하나여야 한다.

onmouseover

• onmouseover 프로퍼티는 mouseover 이벤트의 프로세스인 이벤트 핸들러의 혼합 이벤트 이다.
• onmouseover과 onmouseout 이벤트와 같이 사용할 때가 있다.
• element.onmouseover = function

onkeyup

• 사용자가 눌렀던 키를 놓을 때 발생한다.

event.prevnetDefault

• 어떤 이벤트를 명시적으로 처리하지 않은 경우, 해당 이벤트에 대한 사용자 에이전트의 기본 동작을 실행하지 않도록 지정한다.

• preventDefalut()를 호출한 이벤트도 수신기 중 하나에서 stopPropagation() 또는 stopImmediatePropagation()을 호출하기 전까지는 다른 이벤트와 마찬가지로 전파한다.

• 예제