Javascript 未捕获类型错误：无法读取属性'；增补列表器'；我的JS文件中的未定义错误

在本例中，当我将鼠标悬停在cardBody元素上时，输出必须写入“mouseenter”。当我带着鼠标离开时，输出必须是“mouseover”。但是，我得到一个错误Uncaught TypeError:无法读取未定义的属性'addEventListener'。我到处搜索这个问题，但是没有解决我的错误的方法。

只有一个元素的类名为

卡体。
因此，您应该指出
document.queryselectoral（“.card body”）[0]


const cardBody=document.queryselectoral（“.cardBody”）[0]；
const title=document.querySelector（“任务标题”）；
cardBody.addEventListener（“鼠标指针”，运行）；
cardBody.addEventListener（“mouseleave”，run）；
函数运行（e）{
console.log（e.type）；
}


托多的

    <div class="card-body">
                <hr>
                <h5 class="card-title" id = "tasks-title">Todo's</h5>
                <div class="form-row">
                        <div class="form-group col-md-6">
                            <input class="form-control" type="text" name="filter" id = "filter" placeholder="Search A Todo">
                        </div>
                </div>
  <div>

const cardBody = document.querySelectorAll(".card-body")[2];

const title = document.querySelector("#tasks-title");

cardBody.addEventListener("mouseenter",run);
cardBody.addEventListener("mouseleave", run);

function run(e) {
 console.log(e.type);}