JavaScript データ属性をトリガーにしたクリックイベントでエラー

JavaScriptでデータ属性をトリガーにしてdata-checkbox="trigger"をクリックした際に、data-checkbox="check-mark"のついてるものにhiddenクラスをつけたり消したりしたいのですが、
下記のようなエラーが出て解決できません。
checkBoxTrigger.addEventLisntener箇所がエラー起きてるようですが、
原因がわからないので、どなたかご教授いただけないでしょうか?

Uncaught TypeError: checkBoxTrigger.addEventLisntener is not a function

const checkBoxTrigger = document.querySelector("[data-checkbox=trigger]")

checkBoxTrigger.addEventLisntener("click", (event) => {
    const triggerElement = event.target;
    const checkMark = triggerElement.querySelector("[data-checkbox=check-mark]");
    if(!checkMark) return;
    // Toggle hidden , defaultはhidden
    if(checkMark.classList.contains("hidden"))
    checkMark.classList.remove("hidden");
    else checkMark.classList.add("hidden");
    })

<label data-checkbox="trigger">
   <span data-checkbox="check-mark" class="hidden"></span>
</label>

行動規範の内容に同意します

回答1件

ベストアンサー

data-checkboxがどのくらい設置されているかによります
またtriggerが反映するcheck-markが内包されているものだけなのかにもよります
単純に書くと

javascript
1<style>
2.hidden{display:none}
3</style>
4<script>
5window.addEventListener('DOMContentLoaded', ()=>{
6  document.querySelector('[data-checkbox="trigger"]').addEventListener('click',()=>{
7    document.querySelector('[data-checkbox="check-mark"]').classList.toggle('hidden');
8  });
9});
10</script>
11<label data-checkbox="trigger">trigger
12   <span data-checkbox="check-mark" class="hidden">check-mark</span>
13</label>