クローンすべてをクリックしたときにリスナーが実行

クローンすべてをクリックしたときにリスナーが実行

https://okwave.jp/qa/q9323157.html

せっかく書いたのに、投稿しようと思ったらブロックされていた。もう見た人にあげる。好きなようにして!
3行で収まるんだよ!ES6をなめるな!
Mapを使ってみた。Array.every なんて久々に使ったぜ。

<!DOCTYPE html>
<title>クリックイベントは1つでいいだろう</title>
<style>
ul li.touched {background:#884}
p.hide {display:none}
</style>

<body>
<h1>例文です</h1>
<h3>すべての項目をクリックして
<ul></ul>
<p class="hide">すべての項目がクリックされました</p>

<script>
let mess = [
'質問の表題は、その不明瞭な事象を的確に表現すること',
'今後同じような悩みを抱えるであろう人のために、質問を撒き散らかさない。くだらない質問があちこちにあるとウンザリ',
'あちこちの掲示版に撒き散らかすのなら、その場所も記すこと',
'これからの人のために、自分なりの解決策を記しておくこと',
'撒き散らした場所にも解決策を記すか、その解決策に導けるように記して置くこと',
'1行程度で済ませるお礼ならしなくてもよい。但しポイントなどが付加されるならそれを行うこと',
'時間を割いて回答して頂いた人の回答の評価を故意に下げないこと',
'自分の過去の質問を読み返した時に、恥ずかしくなるような質問はしないこと。名前を変えれば良いなんて思わぬこと',
'同類の質問を何度も繰り返すのなら、ちゃんと過去のものは閉じること。というか、締め切らず喰い下がれ'
],_,m=new Map(),d=document;

mess.forEach(i=>m.set((_=d.querySelector('ul').appendChild(d.createElement('li')),_.textContent=i,_),0));
d.addEventListener('click',({target:_})=>m.has(_)?((m.get(_)?0:m.set(_,_.className='touched')),[...m.values()].every(_=>_)?d.querySelector('p.hide').className='d':0):0);

</script>