이벤트 : 웹 페이지에서 발생하는 대부분의 일. ex)마우스를 움직이는 일, 클릭, 스크롤, 키보드 입력 등

<body>
  <div>
    <button id="myBtn">Click!</button>
  </div>
</body>
// 이벤트(Event)와 버튼 클릭
const btn = document.querySelector('#myBtn');

// 이벤트 핸들링(Event Handling)
btn.onclick = function() { // 이벤트 핸들러(Event Handler)
  console.log('Hello Codeit!');
};

해당 태그를 변수로 담고, onclick이라는 프로퍼티에 함수를 할당해주면 버튼에 대한 클릭이벤트에 원하는 동작을 할 수 있다.

이벤트 핸들링 : 이벤트가 발생했을 때 어떤 특별한 동작을 하도록 이벤트를 다루는 것

이벤트 핸들러 : 구체적인 동작들을 코드로 표현한 함수 부분

그리고 잘 사용하진 않지만 HTML에서 바로 이벤트 핸들러를 등록 할 수도 있다.

<body>
  <div>
    <button id="myBtn" onclick="console.log('Hello Codeit!')">Click!</button>
  </div>
</body>

'코린이 개념잡기 > JavaScript' 카테고리의 다른 글

console.log와 console.dir의 차이  (0) 2024.12.13
객체, 요소, 노드  (1) 2024.12.13
태그 선택하기  (0) 2024.12.12
조건문  (0) 2024.01.20
함수  (0) 2024.01.20

+ Recent posts