在前端开发中，我们经常会使用事件（Event）来处理用户与页面的交互。当我们绑定一个事件时，浏览器会自动创建一个事件对象（Event Object），该对象包含了与该事件相关的信息和方法。
其中，事件对象有三个属性：target、toElement和srcElement。这三个属性都指向产生事件的元素，但它们之间还是存在区别的。
event.target
event.target 属性指向最初被点击的元素，在事件冒泡阶段不会改变。如果该元素包含其他元素，那么 event.target 指向的就是最内层的元素，而不是包含它们的容器元素。
-- -------------------- ---- ------- ---- --------------- ------------- ----------- ------ -------- --- --------- - ------------------------------------- ----------------------------------- --------------- - ---------------------------------- -- -------- --- ---------
在上面的示例中，当我们点击按钮时，事件处理程序会输出 BUTTON。
event.toElement
event.toElement 是 IE 特有的属性，它与 event.target 很相似，也指向最初被点击的元素。但是，与 event.target 不同的是，event.toElement 在事件冒泡过程中会发生改变，因此在捕获阶段和冒泡阶段中，event.toElement 可能会指向不同的元素。
-- -------------------- ---- ------- ---- --------------- ------------- ----------- ------ -------- --- --------- - ------------------------------------- ----------------------------------- --------------- - ------------------------------------- -- -------- -- ------ ---------
在上面的示例中，我们通过设置 useCapture 参数为 true 将事件处理程序添加到捕获阶段。当我们点击按钮时，事件处理程序会输出 DIV，因为此时 event.toElement 指向的是容器元素。
event.srcElement
event.srcElement 是与 event.toElement 相对应的非 IE 属性，它也是指向最初被点击的元素。但是，与 event.toElement 不同的是，event.srcElement 在事件冒泡过程中不会发生改变，它始终指向最初被点击的元素。
-- -------------------- ---- ------- ---- --------------- ------------- ----------- ------ -------- --- --------- - ------------------------------------- ----------------------------------- --------------- - -------------------------------------- -- -------- -- ------ ---------
在上面的示例中，我们同样将事件处理程序添加到了捕获阶段，并且使用了 event.srcElement 来输出最初被点击的元素，这时输出结果也是 BUTTON。
总结
总的来说，event.target、event.toElement 和 event.srcElement 这三个属性都指向产生事件的元素。它们之间的区别在于：
event.target指向最初被点击的元素，在事件冒泡阶段不会改变。event.toElement是 IE 特有的属性，与event.target很相似，但是在事件冒泡过程中可能会发生改变。event.srcElement是与event.toElement相对应的非 IE 属性，也是指向最初被点击的元素，但在事件冒泡过程中不会发生改变。
我们可以根据具体的需求选择适合自己的属性来处理事件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/24289