3-3. 이벤트 핸들링

1. 이벤트란

 1) 클릭이벤트 

 2) 키다운이벤트

 3) 제출 이벤트 : 폼의 내용을 제출

        외 다수 

             .

             .

             .

2. 이벤트 핸들러 함수 작성 시 유의점

  함수 대입 시 괄호는 생략 한다.

 

  함수를 호출하는 것과

 

  함수를 이벤트 핸들러로 대입하는 것은 다름.

 

 

함수 표현식 방식

선호되는 방식

 

const handleClick= function(){
	alert("환영합니다")
 }
 
 const button = document.querySelector("button")
 
 button.onclick = handleClick // handleClick()이벤트 핸들러 함수는 괄호는 생략한다

 

 const button = document.querySelector("button")
 
 button.onclick = function(){
 	alert("환영합니다")
 }

 

 

 

 

 

 

 

이벤트 속성

onClick

onkeydown

 

 

 

addEventListener(이벤트명, 이벤트핸들러)

1) 이전에 추가한 이벤트 핸들러를 제거할 수 있는 대응 메소드가 존재한다.

2) 같은 리스너(타켓)에 대해 다수의 핸들러를 등록할 수 있다.

 

1개 핸들러 등록시

const handleClick = function () {
          const span = document.createElement("span");
          span.textContent = "새로생긴 span 태그 입니다.";
          document.body.append(span);


button1.addEventListener("click", handleClick);

 

 

 

여러개 핸들러 등록 시

이벤트가 발생하면 이벤트 객체가만들어짐

event.target.id 로 이벤드 대상의 id 선택 가능

onst handleClick = function (event) {
        // console.log("e.target", event.target);
        // console.log("event", event);
        if (event.target.id == "span") {
          const span = document.createElement("span");
          span.textContent = "새로생긴 span 태그 입니다.";
          document.body.append(span);
        } else if (event.target.id == "strong") {
          const strong = document.createElement("strong");
          strong.textContent = "새로생긴 strong 태그 입니다.";
          document.body.append(strong);
        } else if (event.target.id == "mark") {
          const mark = document.createElement("mark");
          mark.textContent = "새로생긴 mark 태그 입니다.";
          document.body.append(mark);
        }
      };

      button1.addEventListener("click", handleClick);
      button2.addEventListener("click", handleClick);
      button3.addEventListener("click", handleClick);