자바스크립트 6️⃣ - 이벤트

 

이벤트(event) 

: 사용중이거나 프로그래밍 중인 시스템 내에서 일어나는 사건 

ex) 클릭 이벤트(click), 키다운 이벤트(key down/up), 제출 이벤트(submit) 등등 

 

이벤트 핸들러(event handler) 

: 이벤트가 발생되면 실행될 코드 블록  ➡️ 주로 함수가 이 역할을 담당

따라서, 이벤드 핸들러 등록 = 이벤트 핸들러 역할을 수행할 함수를 정의하는 것 

 

이벤트 핸들러/이벤트 리스너 : 이벤트가 발생하면, 이 함수를 호출해라 

 

이벤트 핸들러 등록 

target.addEventListener('click', function(){})

 

함수에 소괄호를 붙인다 = 지금 바로 사용한다. 

따라서 소괄호가 없다면 이벤트가 실행될 때 함수를 사용한다는 의미

 

 

연습 1️⃣)

const p = document.getElementById("text");

function sayHello() {
  console.log("Hello!");
}

p.addEventListener("click", sayHello);

 

---

 

연습 2️⃣)

<p id="text">click me</p>
<p id="content">press me</p>

<script>

  const p = document.getElementById("text");
  const c = document.getElementById("content");

  function sayHello() {
    console.log("Hello!");
  }

  p.addEventListener("click", sayHello);

  const sayGoodBye = function () {
    console.log("Good Bye!");
  };

c.addEventListener("click", sayGoodBye);

<script>

 

 

---

 

연습 3️⃣)

c.addEventListener("click", function () {
  console.log("bye bye");
});

 

---

 

- 처음부터 혼자 작성해보기 

<p id="content"> test 1 </p>
<p id="content2"> test 2 </p>

<script>
  const c1 = document.getElementById("content")
  const c2 = document.getElementById("content2")

  function sayHi(){
    console.log("hihi");
  }

  c1.addEventListener("click", sayHi)

  c2.addEventListener("click", function(){
    console.log("byebye");
  })
</script>

 

 

 

이벤트 객체 

 

추가적인 기능과 정보를 제공하기 위해 이벤트 핸들러에 자동으로 전달되는 데이터 

이벤트 핸들러 함수에 매개변수를 추가하여 이벤트 발생시 마다 전달받을수 있도록 하여 사용

 

이벤트가 발생하면 만들지 않은 데이터가 자동으로 생김 

➡️ 이벤트 객체는 눈에 보이지 않음 

 

객체 : 변수와 기능을 포함한 데이터 

 

연습 1️⃣)

  <h1> make object </h1>
  
<script>
  const h = document.querySelector("h1")

  h.addEventListener("click", function(event) {
    console.log("what is event object ");
    console.log(event);
  })
<script>

 

 

연습 2️⃣)

h.addEventListener("click", function (event) {
  console.log("what is event object ");

  //event.target 으로 지정한 경우
  console.log(event.target);
});