js事件源window.event.srcElement兼容性写法(详解)

当我们处理JavaScript事件的时候，我们想要知道事件触发的元素是哪个，这时候我们就需要使用事件源属相，通常使用 window.event.srcElement 来获取触发事件的元素。但是，在不同的浏览器中可能存在兼容性问题，下面将详细介绍如何兼容不同浏览器获取元素的方式。

普通方式获取元素

在事件处理程序中，通过访问 event 参数可以获取触发该事件的元素。在IE中，通过 window.event.srcElement 可以获取到当前事件的触发元素，而在其他浏览器中可以通过 event.target 来获取。然而，有些浏览器（如Firefox）同时支持 event.srcElement 属性，但它是 undefined 值。

示例代码如下：

function handleClick(event) {
  var target = event.target || event.srcElement;
}

这里使用了 JavaScript 中的或（||）运算符。如果 event.target 存在且规定了值，那么变量 target 将会被设置为 event.target；否则，变量 target 将会被设置为 event.srcElement。

IE中的获取元素

在IE中，我们可以通过 window.event.srcElement 来获取元素：

var event = window.event || arguments.callee.caller.arguments[0];
var target = event.srcElement;

这里使用了 arguments.callee.caller，它指的是当前正在执行的函数的名称。由于在IE浏览器中，事件处理程序是以函数的形式调用的，而函数的参数 event 实际上就是被触发的事件对象。所以我们直接通过 arguments.callee.caller.arguments[0] 来获取事件对象。然后我们就可以通过事件对象的 srcElement 属性来获取事件的触发元素了。

其他浏览器的兼容性写法

在其他浏览器中，事件对象 event 会自动传递给事件处理程序并且包含 target 属性。

var event = window.event || arguments.callee.caller.arguments[0];
var target = event.target || event.srcElement;

这里仍然使用了或（||）运算符，如果 event.target 存在且规定了值，那么变量 target 将会被设置为 event.target；否则，变量 target 将会被设置为 event.srcElement。

示例1

假设有一个页面上有以下 HTML 代码：

<button onclick="getTarget(event)">Click me</button>

在IE中，我们需要使用下面的 JavaScript代码来获取触发该事件的按钮元素：

function getTarget(event) {
  var target = event.srcElement;
  alert(target.innerText);
}

在其他浏览器中，我们可以使用下面的代码：

function getTarget(event) {
  var target = event.target;
  alert(target.textContent);
}

示例2

如果需要在使用 JavaScript 添加的事件处理程序中获取事件源，则需采用以下方法：

var btn = document.getElementById("btn");
btn.onclick = function(event) {
  var target = event.target || event.srcElement;
  alert(target.tagName);
};

这段代码获取了具有“btn”ID的按钮，并为其添加了一个点击事件处理程序。当单击按钮时，我们可以使用 event 参数来获取事件源。在其他浏览器中，我们可以使用 event.target 来获取事件源，而在IE中，我们必须使用 event.srcElement。

总之，在处理 JavaScript 代码的事件时，需要考虑到不同浏览器之间的差异，并选择正确的兼容性写法，否则可能会出现事件兼容性问题。