event.target

`event.target` 是JavaScript中的一个属性，它在事件触发时非常有用。这个属性指向触发事件的元素，也就是说，无论事件在DOM树的哪个层级发生，`event.target` 总是指向实际触发事件的元素。这与`event.currentTarget`不同，后者在绑定事件监听器的元素上触发事件时，指向该元素本身，不论事件是如何冒泡上去的。

`event.target` 的一个常见用途是在事件委托中。通过在父元素上设置事件监听器，然后使用 `event.target` 来识别实际触发事件的子元素，从而可以对不同的子元素执行不同的操作，而不需要为每个子元素单独绑定监听器。

举个例子，如果你有一个列表项的集合，你可能会在父元素 `<ul>` 上设置一个点击事件监听器，然后通过检查 `event.target` 来判断哪一个 `<li>` 被点击了。

document.querySelector('ul').addEventListener('click', function(event) {
  if (event.target.tagName === 'LI') {
    console.log('List item was clicked!');
  }
});

在这个例子中，如果用户点击了 `<li>` 元素，那么 `event.target` 将会是被点击的 `<li>` 元素，从而可以根据这一信息执行相应的逻辑处理。

相关问题

obj.onmousedown = function(event) { //点击的不是白盒子 // 兼容IE event = event || window.event; if ((event.target ? event.target : event.srcElement).className == 'i') { if ((event.target ? event.target : event.srcElement).style.backgroundColor = "#1AAB8A") { num1 = num1 + 200; } else if ((event.target ? event.target : event.srcElement).style.backgroundColor = "#E15650") { num2 = num2 + 300; } else if ((event.target ? event.target : event.srcElement).style.backgroundColor = "#121B39") { num3 = num3 + 400; } else if ((event.target ? event.target : event.srcElement).style.backgroundColor = "#80A84E") { num4 = num4 + 500; } //点击后的盒子颜色 (event.target ? event.target : event.srcElement).style.backgroundColor = "#bbb"; //清除盒子标记 (event.target ? event.target : event.srcElement).className = ''; //计分 //显示得分 num=num1+num2+num3+num4; count.innerHTML = '当前得分: ' + num; } 代码错误追踪

这段代码存在一些问题：

1. 在判断元素类名是否为'i'时，应该使用双等号(==)而不是单等号(=)。
2. 在判断元素颜色时，也应该使用双等号(==)。
3. 在设置元素颜色时，应该使用backgroundColor属性而不是style.backgroundColor。
4. 在计算得分时，应该先清空之前的得分再重新计算。

下面是修改后的代码：

obj.onmousedown = function(event) {
    //点击的不是白盒子
    // 兼容IE
    event = event || window.event;
    var target = event.target || event.srcElement;
    if (target.className == 'i') {
        if (target.style.backgroundColor == "#1AAB8A") {
            num1 = num1 + 200;
        } else if (target.style.backgroundColor == "#E15650") {
            num2 = num2 + 300;
        } else if (target.style.backgroundColor == "#121B39") {
            num3 = num3 + 400;
        } else if (target.style.backgroundColor == "#80A84E") {
            num4 = num4 + 500;
        }
        //点击后的盒子颜色
        target.style.backgroundColor = "#bbb";
        //清除盒子标记
        target.className = '';
        //计分
        num = num1 + num2 + num3 + num4;
        //显示得分
        count.innerHTML = '当前得分: ' + num;
    }
}

“document.addEventListener("click", function (event) { if (event.target.classList.contains("box-in-button")) { event.target.style.backgroundColor = "transparent"; event.target.innerHTML = "已关注"; event.target.style.backgroundColor = "rgba(0,0,0,.1)"; } }); ”这个代码可以优化吗？你认为这段代码如何？

这段代码可以进行一些优化。首先，我们可以将样式更改集中在一个类中，而不是在JavaScript中直接更改。这样做可以使代码更易读和维护。另外，我们可以使用事件委托，将事件监听器添加到父元素上，从而减少事件监听器的数量。

以下是优化后的代码示例：

HTML：

<button id="parent-box" class="box">
  <span class="box-in-button">关注</span>
</button>

CSS：

.box-in-button {
  background-color: transparent;
}

.box-in-button.followed {
  background-color: rgba(0,0,0,.1);
}

JavaScript：

document.getElementById("parent-box").addEventListener("click", function (event) {
  if (event.target.classList.contains("box-in-button")) {
    event.target.classList.add("followed");
    event.target.innerHTML = "已关注";
  }
});

优化后的代码使得样式更易于管理，并减少了事件监听器的数量。