특정클래스 찾기

html

<div class="todos">
  <div class="item" dataset="1">
    <div class="content">
      <input type="checkbox" class='todo_checkbox' />
      <label>테스트1</label>
      <input type="text" value="테스트1" />
    </div>
  </div>
  <div class="item" dataset="2">
    <div class="content">
      <input type="checkbox" class='todo_checkbox' />
      <label>테스트2</label>
      <input type="text" value="테스트2" />
    </div>
  </div>
  ...
</div>

js

  const init = () => { 
    //체크박스 클릭시 이벤트 발생(but todos어디든 클릭해도 이벤트발생)
    $todos.addEventListener('click', toggleTodo )
  }
  init()

현재 init함수 실행 시 todos클래스의 어떤 부분을 클릭을 해도 이벤트가 발생이 됩니다. 만약, 클래스네임이 todo_checkbox인 경우에만 클릭이벤트가 발생하게 하려면 toggleTodo함수를 어떻게 작성해야 해야할까요?

필요 바탕지식

1. 클릭한 요소의 클래스 이름 찾기

$todos의 자식 요소들을 클릭하면 콘솔창에 해당 클래스 이름을 알 수 있습니다.

  const toggleTodo = (e) => {
     //todo_checkbox를 클릭한 경우에만 동작하게끔
    console.log(e.target.className)
  }

따라서 클래스 네임이 todo_checkbox가 아닌 경우 바로 리턴시킴으로써 todo_checkbox인 경우에만 이벤트가 발생하도록 할 수 있습니다.

  const toggleTodo = (e) => {
    if(e.target.className !== 'todo_checkbox') return
  }

2. todo_checkbox가 몇번째 item의 자식요소인지 찾기

각 item들에는 data아이디가 할당되어 있습니다. todo_checkbox를 클릭하는 경우 e.target.closest('.item')을 이용해 가장 가까운 item을 찾아 그 아이템의 data-id를 가져와 몇번째 item의 요소인지를 찾을 수 있습니다.

  const toggleTodo = (e) => { 
    if(e.target.className !== 'todo_checkbox') return
    //클릭한 아이템의 가장 가까운 클래스 네임이 item인 요소 찾기
    const $item = e.target.closest('.item')
    //찾은 item요소의 data-id찾기
    const id = $item.dataset.id
  }