window.addEventListenerとelement.addEventListenerで同じ要素のイベントを操作したいしたい

Question

前提・実現したいこと

addEventListenerで要素のクリックによってclassListをaddして、windowのクリックによりそのaddされたclassListをremoveすることはできるのでしょうか？ドロップダウンメニューの開閉に関して、display: none, blockの付け外しでul#pulldownmenuをクリックするとul#pulldownindustryが展開し、閉じる時はウインドウ内のいずれかをクリックすることによって閉じるという仕様にしたいと考えているのですが、どうもうまく行きません。

該当のソースコード

<div class="bottom">
      <div class="searchbox1">
        <ul id="pulldownmenu">
          <li id="text">A<span class="allow">&#12297;</span></li>
        </ul>
        <ul id="pulldownindustry" class="none">
          <li>B</li>
          <li>B</li>
          <li>B</li>
          <li>B</li>
          <li>B</li>
          <li>B</li>
        </ul>

#pulldownmenu {
  width: 260px;
  height: 30px;
  border: 1px solid #00AED9;
  list-style: none;
  background: white;
}

#pulldownindustry>li {
  background: white;
}

.allow {
  display: inline-block;
  transform: rotate(90deg);
  color: #00AED9;
}



.none {
  display: none;
  width: 300px;
  list-style: none;
  background: white;
  height: 0px;
}

.selection {
  display: block;
  background: white;
}



.bottom div {
  width: 315px;
  height: 300px;
  background: gray;
  margin-bottom: 17px;
}

'use strict';
{
  const pulldownmenu = document.getElementById('pulldownmenu');
  const pulldownindustry = document.getElementById('pulldownindustry');


  pulldownmenu.addEventListener('click', () => {
    if (pulldownindustry.classList.contains('selection')) {
      return;
    }
    pulldownindustry.classList.add('selection');
    const text = document.getElementById('text');
    text.textContent = 'XXX';
  });

  window.addEventListener('click', () => {
    if (pulldownindustry.classList.contains('selection')) {
      pulldownindustry.classList.remove('selection');
    } else {
      return;
    }
  });

}

試したこと

ディベロッパーツールで確認するとwindow.addEventListnerでclassList.removeを書き込んだ時点で、pulldownmenu.addEventListenerのclassList.addでselectionが追加されなくなることを確認しました。そのため条件分岐でselectionを持っているかどうかで、処理を分けようとしたのですが、それでもうまくい行きません。toggleを使ってul#pulldownmenu要素だけにイベントを仕込めばうまく行くのですが、できればメニューを閉じるのはウインドウのクリックで実現できるようにしたいです。アドバイス頂戴できますと幸いです。

補足情報（FW/ツールのバージョンなど）

アトムエディターでクローム用に開発しています。

Answer 1

こんな感じで

<script>
'use strict';
window.addEventListener('DOMContentLoaded', ()=>{
  const pulldownmenu = document.querySelector('#pulldownmenu');
  const pulldownindustry = document.querySelector('#pulldownindustry');
  pulldownmenu.addEventListener('click', () => {
    pulldownindustry.classList.add('selection');
    document.querySelector('#text').textContent = 'XXX';
  });
});
document.addEventListener('click', e=> {
  const t=e.target;
  if(!t.closest('#pulldownmenu')){
    pulldownindustry.classList.remove('selection');
  }
});

Comments

[YESYUKI17]

ありがとうございます。ご教示いただいたコードを調べて行くうちにイベントバブリングが原因で私のコードが上手く動かないことが理解できました。ただ関数のeの使い方などまだ理解できていないことろもあるので、このコードをもとに勉強させていただきます。もし可能であれば教えてもらったコードで最初のウインドウにイベントリスナーを付けて Domcontentloadedの処理を仕込んでいる理由を教えていただけないでしょうか？