js中的触发事件对象event.srcElement与event.target详解

题目：js中的触发事件对象event.srcElement与event.target详解

什么是事件对象

在JavaScript中，事件对象是在事件触发时由浏览器自动创建的一个对象，它包含着当前事件的属性、方法和一些有用的信息。我们可以通过这个对象来获取有关事件的信息。

事件对象属性

在JavaScript中，事件对象包含有一些有用的属性，如下：

• type：表示触发的事件类型（如click、mouseover等）。
• target：表示触发事件的DOM元素，即事件的目标对象。
• srcElement：与target属性类似，表示触发事件的DOM元素。
• currentTarget：表示当前事件处理程序所在的DOM元素。
• keyCode：表示按下的键盘上的键（只适用于键盘事件）。
• clientX、clientY：表示鼠标相对于浏览器窗口可视区域（不包括边框和滚动条）的水平和垂直坐标。
• pageX、pageY：表示鼠标相对于整个文档页面的水平和垂直坐标。
• 等等。

event.srcElement和event.target的区别

在JavaScript中，我们常常使用event.target来获取事件目标，例如：

document.onclick = function(event) {
  alert(event.target.tagName);
}

上面的代码会在页面的任意位置点击的时候，弹出点击的元素的标签名。

但是，在IE8及以下的版本中，并不支持event.target属性，而是支持event.srcElement属性，例如：

document.onclick = function() {
  alert(window.event.srcElement.tagName);
}

规范的做法应该是同时使用event.target和event.srcElement属性进行兼容判断，例如：

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

示例

我们来看一个具体的例子，当点击按钮时，弹出按钮的文本。

HTML代码：

<button id="btn1">Click Me!</button>

JavaScript代码：

var btn = document.getElementById('btn1');
btn.onclick = function(event) {
  var target = event.target || window.event.srcElement;
  alert(target.innerText);
};

这个例子中，点击按钮时，会弹出“Click Me!”。

还有一个例子，在一个div里放了三个input元素（顺序分别是姓、名、年龄），当用户在一个input框输入内容时，自动将光标移到下一个input框。代码如下：

HTML代码：

<div id="inputWrapper">
  <input type="text" id="firstName" maxlength="10"><br>
  <input type="text" id="lastName" maxlength="10"><br>
  <input type="text" id="age" maxlength="3">
</div>

JavaScript代码：

var inputs = document.querySelectorAll('#inputWrapper > input');
for (var i = 0; i < inputs.length; i++) {
  inputs[i].onkeyup = function(event) {
    var target = event.target || window.event.srcElement;
    if (target.value.length >= target.maxLength) {
      var nextInput = getNextInput(target);
      if (nextInput) {
        nextInput.focus();
      }
    }
  };
}

function getNextInput(currentInput) {
  var nextInput = currentInput.nextElementSibling;
  if (nextInput && nextInput.tagName === 'INPUT') {
    return nextInput;
  } else {
    return null;
  }
}

在这个例子中，我们用querySelectorAll方法来获取包含输入框的div元素，然后给里面的三个input元素都绑定了一个onkeyup事件，当当前input框的值长度到达maxlength值时，会自动将光标移到下一个input框。注意，这个例子中，我们用到了nextElementSibling和tagName属性来获取下一个input元素。