我在某个课程中看到了这段代码，它的目标是在单击特定的<p>元素后，删除所有拥有该类的元素上的编辑类，然后将编辑类添加到单击的<p>元素中。
let elements = document.querySelectorAll("p");
elements.forEach(function (ele) {
ele.onclick = function () {
elements.forEach(function (ele) {
ele.classList.remove("edit");
})
this.classList.add("edit");
}
})<body>
<p>Mustapha</p>
<p>Ali</p>
<p>Osama</p>
<p>Hamza</p>
</body>这段代码运行得很好，但我想确保的是，为什么课程所有者使用关键字this将类编辑添加到单击的元素中，而不是仅使用ele参数。我尝试使用参数ele而不是this关键字，并注意到代码运行良好。
对于处理程序方法，处理的event是参数。在这样的处理程序方法中，this将是全局范围，处理程序在中定义(例如button.onclick=>单击的按钮(，即。window
请注意，箭头函数的处理程序方法的作用域将始终为window。
此外，不需要将处理程序方法附加到每个p元素。尝试使用事件委派，例如：
document.addEventListener(`click`, handle);
function handle(evt) {
if (evt.target.classList.contains(`canEdit`)) {
document.querySelectorAll(`.canEdit`).forEach( el =>
el.classList.remove(`edit`) );
evt.target.classList.add(`edit`);
}
}.edit {
color: red;
}
p.canEdit {
cursor: pointer;
}<p class="canEdit">Mustapha</p>
<p class="canEdit">Ali</p>
<p class="canEdit">Osama</p>
<p class="canEdit">Hamza</p>
<p>Abdel</p>