헷갈리는 메소드 정리

🌟 click 이벤트

1) javascript method
2) jquery method

1. javascript method

// 버튼 변수 선언
  const button = document.getElementById("myButton");

// 버튼을 클릭했을 시 텍스트 출력
  button.onclick = function() {
    console.log("Button clicked!");
  };

1) addEventListener 메소드를 이용한 클릭 이벤트

// 버튼 변수 선언
 const button = document.getElementById("myButton");

  button.addEventListener("click", function() {
    console.log("Button clicked!");
  });

// 화살표 함수를 이용했을 때
const button = document.getElementById("myButton");

  button.addEventListener("click", () => {
    console.log("Button clicked!");
  });

더불어, 이벤트 핸들러 함수를 분리하여 코드를 구조화하고 관리하기 쉽게 만들 수 있다.

// 버튼 변수 선언
 const button = document.getElementById("myButton");

// 함수 생성 
 function handleClick() {
    console.log("Button clicked!");
  }

 
button.addEventListener("click", handleClick);

2) onclick "속성"을 이용한 클릭 이벤트

.onclick의 경우 메소드가 아닌 이벤트 핸들러를 등록하기 위한 속성이며, 해당 속성에 함수를 할당할 수 있다.

// 버튼 변수 선언
  const button = document.getElementById("myButton");

// 버튼을 클릭했을 시 텍스트 출력
  button.onclick = function() {
    console.log("Button clicked!");
  };

2. jquery method

1) .on() 메소드를 이용한 클릭 이벤트

const element = $('#myElement');

element.on('click', function() {
  // 이벤트 핸들러 내용
});

2) .click() 메소드를 이용한 클릭 이벤트

$('#myButton').click(function() {
  console.log('Button clicked!');
});

++ 이벤트 위임

❓ 이벤트 위임이란?

• 여러 요소에 개별적으로 이벤트 리스너를 등록하는 대신, 상위 요소에 하나의 이벤트 리스너를 등록하여 하위 요소들의 이벤트를 처리하는 방법이다.

이벤트 위임을 사용할 경우 메모리 사용과 성능을 향상시킬 수 있으며, 동적으로 생성되는 요소들에 대해서도 이벤트 처리를 쉽게 관리할 수 있다.

ex)

<ul id="myList">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<script>
  const list = document.getElementById('myList');

  list.addEventListener('click', function(event) {
    const target = event.target;
    // 이벤트 객체의 'target' 프로퍼티를 통해 클릭된 요소를 확인할 수 있다. 
    if (target.nodeName === 'LI') {
      // 이벤트 핸들러 내용, 클릭된 요소의 노드 이름을 확인하고, <li> 요소를 클릭했을 때에만 특정 동작을 수행하도록 한다.
    }
  });
</script>

위 코드에서 <ul> 요소에 이벤트 리스너를 등록하여 클릭 이벤트를 처리합니다. 클릭이 발생하면 이벤트 객체에는 클릭된 요소가 포함됩니다. 이벤트 객체의 target 프로퍼티를 통해 클릭된 요소를 확인할 수 있습니다.

이벤트 핸들러 함수 내부에서 event.target.nodeName 을 통해 클릭된 요소의 노드 이름을 확인하고, 이 코드에서는 <li> 요소를 클릭했을 때에만 특정 동작을 수행하도록 하고 있습니다. 즉, 이벤트가 <ul> 요소에 등록되어 있지만, 실제로는 <li> 요소를 클릭할 때 이벤트가 처리된다.