ul以下の複数のliにリスニング・イベントをバインドする

リスナーイベントをliに1つ1つバインドしていくと、liの数が多い場合、たくさんのリスナーをバインドする必要があり、メモリリークを起こしたり、コードが複雑になったりします。そこで、ulタグにリスナーイベントをバインドし、liをクリックするとバブリングでulのクリックイベントが発生するようにすれば、実装も簡単です。

実現：

import React from 'react'; import { useEffect } from 'react';import './css/index.css';function App() { const list = [ { id: "10002", name: 'book1' }, { id: "10003", name: 'book2' }, { id: "10004", name: 'book3' } ] function liClickHandle(event) { event = event || window.event; var target = event.target || event.srcElement; console.log(target.id); switch (target.id) { case "10002": console.log(target) break; case "10003": console.log(target) break; case "10004": console.log(target) break; default: console.log("error") } } useEffect(() => { var ul = document.getElementById("ulid"); ul.addEventListener('click', liClickHandle, false); return () => { ul.removeEventListener('click', liClickHandle, false); }; }, []) return ( <div className="App"> <ul id="ulid"> { list.map((item, index) => { return (<li id={item.id} key={item.id}>{item.name}</li>) }) } </ul> </div> );}export default App;

イベントに耳を傾けること：

addEventListener(event, function, useCapture);

• 最初のパラメータはイベントのタイプです。
• 第2引数は、イベント発生時に呼び出される関数です。
• 3番目のパラメータは、イベントバブリングとイベントキャプチャのどちらを使用するかを指定するブーリアン値です。このパラメータはオプションです。

useCaptureのデフォルト値はfalseで、バブリング伝搬を使用します。この値をtrueに設定すると、イベントはキャプチャを使用して伝搬されます。

HTML DOMにおけるイベント伝播には、バブリングとキャプチャーという2つの方法があります。

イベントプロパゲーションは、イベントが発生したときの要素の順序を定義する方法です。もし