js事件对象

js事件对象概念说明

在JavaScript中，事件对象是在事件触发时由浏览器自动创建的一个对象。它包含了与事件相关的信息，例如触发事件的元素、事件类型、鼠标的坐标等。

可以通过事件处理函数的第一个参数来访问事件对象。例如，在一个鼠标点击事件处理函数中，可以使用event参数来获取鼠标点击的坐标：

function handleClick(event) {
  var x = event.clientX;  // 鼠标点击的水平坐标
  var y = event.clientY;  // 鼠标点击的垂直坐标
  console.log(x, y);
}

事件对象还包含其他属性和方法，以下是一些常用的属性和方法：

• event.target：返回触发事件的元素。
• event.type：返回事件的类型，例如'click'、'mousedown'等。
• event.preventDefault()：取消事件的默认行为。
• event.stopPropagation()：阻止事件冒泡。

js事件对象e的ts类型校验

在TypeScript中，可以使用Event类型来对事件对象进行类型校验。Event是一个内置的基类，它包含了事件对象的常用属性和方法。

首先，需要在事件处理函数中指定事件对象的类型为Event：

function handleClick(event: Event) {
  // 处理事件
}

然后，可以通过类型断言或类型细化来访问事件对象的特定属性。例如，对于鼠标点击事件，可以使用MouseEvent类型来访问鼠标相关的属性：

function handleClick(event: Event) {
  // 类型断言方式
  const mouseEvent = event as MouseEvent;
  const x = mouseEvent.clientX;
  const y = mouseEvent.clientY;

  // 类型细化方式
  if (event instanceof MouseEvent) {
    const x = event.clientX;
    const y = event.clientY;
  }
}

在这里，我们将event对象分别断言为MouseEvent类型和使用instanceof运算符进行类型细化。

需要注意的是，对于不同的事件类型，可能需要使用不同的事件对象类型进行校验。可以查阅相关的文档或参考其他资源来确定正确的事件对象类型。

获取事件对象的兼容

获取事件对象的兼容写法如下：

function getEvent(event) {
  return event || window.event;
}

function getTarget(event) {
  const eventObj = getEvent(event);
  return eventObj.target || eventObj.srcElement;
}

function preventDefault(event) {
  const eventObj = getEvent(event);
  if (eventObj.preventDefault) {
    eventObj.preventDefault();
  } else {
    eventObj.returnValue = false;
  }
}

function stopPropagation(event) {
  const eventObj = getEvent(event);
  if (eventObj.stopPropagation) {
    eventObj.stopPropagation();
  } else {
    eventObj.cancelBubble = true;
  }
}

上述代码中的getEvent函数用于获取事件对象，它先返回传入的事件对象 event，如果不存在则返回 window.event。

getTarget函数用于获取事件的目标元素。它首先调用 getEvent 函数获取事件对象，然后根据事件对象的类型来返回目标元素。在现代浏览器中，可以直接使用 event.target。但在兼容旧版 IE 的情况下，需要使用 event.srcElement。

preventDefault函数用于阻止事件的默认行为。它先调用 getEvent 函数获取事件对象，然后根据事件对象是否具有 preventDefault 方法来决定如何阻止默认行为。

stopPropagation函数用于阻止事件的冒泡。它也是先调用 getEvent 函数获取事件对象，然后根据事件对象是否具有 stopPropagation 方法来决定如何停止冒泡。

以上代码可以在不同浏览器环境中兼容地处理事件对象的获取和常用操作。