event.target【转载】

"event.target" 是 JavaScript 事件模型中的一个属性，它表示触发事件的 DOM 元素节点。当一个事件被触发时，事件处理程序中的 "event" 参数就是这个事件对象，可以通过访问 "event.target" 属性来获取触发事件的元素节点。

例如，在以下代码中，当用户单击页面上的某个按钮时，"event.target" 将返回该按钮的 DOM 元素节点：

document.addEventListener('click', function(event) {
  console.log('You clicked on:', event.target);
});

在上面的代码中，我们使用 "addEventListener" 方法来监听 "click" 事件，并在事件处理程序中打印出触发事件的元素节点。

相关问题

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. 在 if 语句中，比较颜色值时应该使用双等号 `==`，而不是赋值符号 `=`。

2. 在比较颜色值时，应该使用 RGB 值而不是颜色名称。例如，应该使用 `rgb(26, 171, 138)` 而不是 `#1AAB8A`。

3. 在计算得分时，应该将四个得分相加，而不是分别累加到 num1、num2、num3 和 num4 中。

下面是修改后的代码：

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 == "rgb(26, 171, 138)") {
      num1 = num1 + 200;
    } else if ((event.target ? event.target : event.srcElement).style.backgroundColor == "rgb(225, 86, 80)") {
      num2 = num2 + 300;
    } else if ((event.target ? event.target : event.srcElement).style.backgroundColor == "rgb(18, 27, 57)") {
      num3 = num3 + 400;
    } else if ((event.target ? event.target : event.srcElement).style.backgroundColor == "rgb(128, 168, 78)") {
      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;
  }
}

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>` 元素，从而可以根据这一信息执行相应的逻辑处理。