js获取事件源及触发该事件的对象

获取事件源对象和触发该事件的对象是 Javascript 事件处理的重要操作。下面，我将为大家分享完整的攻略。

获取事件源对象

事件源对象指的是触发该事件的元素或节点。通常，我们使用 event.target、event.srcElement 等属性来获取事件源对象。

• event.target：事件发生时，事件的目标节点（最深嵌套的节点）。
• event.srcElement：事件发生时，事件的源节点（最开始触发事件的节点）。

这两个属性的区别在于，event.srcElement 属性是 IE8 及以下浏览器的特殊属性，而 event.target 是所有现代浏览器均支持的属性。

下面是获取事件源对象的示例代码：

document.addEventListener('click', function(event) {
  // 获取事件源对象
  var targetNode = event.target || event.srcElement;

  console.log('事件源对象为：', targetNode);
});

获取触发事件的对象

触发事件的对象指的是将事件绑定到该对象上的元素或节点，也就是事件监听函数中的 this 对象。我们可以使用 call 或 apply 方法，来指定事件监听函数中的 this 对象。

下面是一个使用 call 方法指定 this 对象的示例代码：

var button = document.querySelector('button');

button.addEventListener('click', function(event) {
  // 获取触发事件的对象
  var triggerNode = this;

  console.log('触发事件的对象为：', triggerNode);
});

除了使用 call 或 apply 方法之外，我们还可以使用箭头函数来指定 this 对象：

var button = document.querySelector('button');

button.addEventListener('click', (event) => {
  // 获取触发事件的对象
  var triggerNode = this;

  console.log('触发事件的对象为：', triggerNode);
});

总之，获取事件源对象和触发事件的对象是 Javascript 事件处理中非常重要的操作，掌握了这两个操作，可以更好的处理事件相关的操作。