特定のクラスの検索

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が何番目のサブエレメントであるかを検索

各エントリにはデータIDが1つあります.todo_checkboxをクリックすると、e.target.closest('.item')を使用して最近のアイテムを検索し、そのアイテムのdata-idを取得して、いくつかのアイテムの要素を検索できます.

  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
  }