JS中Event事件对象的那些事

在JS中，Event事件对象是记录浏览器中发生的事件的细节信息。它可以用来获取有关事件类型、事件源、事件目标、事件发生的时间戳等信息。Event事件对象在JavaScript中是一个非常重要的对象，它可以用来处理各种各样的事件，例如点击事件、鼠标移动事件、键盘事件等等。

Event事件对象提供了很多有用的属性和方法，可以帮助我们更好的理解和处理事件。下面列出了Event事件对象的一些重要属性和方法：

• type ：事件的类型，例如"click"、"mousemove"、"keydown"等。
• target ：事件的目标元素。
• currentTarget ：事件的当前目标元素，在事件冒泡过程中，currentTarget的值会发生变化。
• srcElement ：事件源元素，在IE浏览器中使用。
• timeStamp ：事件发生的时间戳。
• preventDefault() ：阻止事件的默认行为。
• stopPropagation() ：阻止事件在DOM树中继续冒泡。
• stopImmediatePropagation() ：立即阻止事件在DOM树中继续冒泡，并且阻止所有其他事件监听器执行。
• clientX/clientY ：事件发生时鼠标指针的横坐标和纵坐标。
• pageX/pageY ：事件发生时鼠标指针在整个页面中的横坐标和纵坐标。
• keyCode ：事件发生时按下的键盘按键的代码。
• altKey/ctrlKey/shiftKey ：事件发生时是否按下了Alt键、Ctrl键或Shift键。
• button ：事件发生时按下的鼠标按键的代码。

事件监听器

事件监听器是一种在指定元素上侦听特定事件发生的回调函数。当事件发生时，事件监听器就会被触发，并执行相应的代码。在JavaScript中，可以使用addEventListener()方法为元素添加事件监听器，也可以使用removeEventListener()方法移除事件监听器。

// 为元素添加点击事件监听器
element.addEventListener("click", function() {
  // 事件发生时执行的代码
});

// 移除元素的点击事件监听器
element.removeEventListener("click", function() {
  // 事件发生时执行的代码
});

事件委托

事件委托是一种将事件监听器委派给父元素的方法，而不是直接委派给子元素。这样可以减少事件监听器的数量，提高性能。在JavaScript中，可以使用addEventListener()方法为父元素添加事件监听器，并使用target属性来获取触发事件的子元素。

// 为父元素添加点击事件监听器
parentElement.addEventListener("click", function(event) {
  // 获取触发事件的子元素
  var targetElement = event.target;

  // 根据子元素的类型执行相应的代码
  if (targetElement.tagName == "A") {
    // 点击的是链接元素
  } else if (targetElement.tagName == "BUTTON") {
    // 点击的是按钮元素
  }
});

事件冒泡

事件冒泡是指事件从子元素传播到父元素的过程。在JavaScript中，事件默认会冒泡，但可以使用stopPropagation()方法来阻止事件的冒泡。

// 为子元素添加点击事件监听器
childElement.addEventListener("click", function(event) {
  // 阻止事件冒泡
  event.stopPropagation();
});

mouseout/mouseover

mouseout和mouseover事件是鼠标指针移出或移入元素时触发的事件。这两个事件经常一起使用，可以用来检测鼠标指针在元素上移动的情况。

// 为元素添加mouseout事件监听器
element.addEventListener("mouseout", function() {
  // 鼠标指针移出元素时执行的代码
});

// 为元素添加mouseover事件监听器
element.addEventListener("mouseover", function() {
  // 鼠标指针移入元素时执行的代码
});

mouseleave/mouseenter

mouseleave和mouseenter事件是鼠标指针移出或移入元素及其子元素时触发的事件。这两个事件与mouseout和mouseover事件类似，但它们不会触发元素本身的事件。

// 为元素添加mouseleave事件监听器
element.addEventListener("mouseleave", function() {
  // 鼠标指针移出元素及其子元素时执行的代码
});

// 为元素添加mouseenter事件监听器
element.addEventListener("mouseenter", function() {
  // 鼠标指针移入元素及其子元素时执行的代码
});

e.pageX/e.pageYe

e.pageX和e.pageY属性可以获取事件发生时鼠标指针在整个页面中的横坐标和纵坐标。这两个属性与e.clientX和e.clientY属性类似，但e.clientX和e.clientY属性获取的是事件发生时鼠标指针在视口中的横坐标和纵坐标。

// 获取鼠标指针在整个页面中的横坐标
var pageX = event.pageX;

// 获取鼠标指针在整个页面中的纵坐标
var pageY = event.pageY;

e.cilentX/e.clie

e.clientX和e.clientY属性可以获取事件发生时鼠标指针在视口中的横坐标和纵坐标。这两个属性与e.pageX和e.pageY属性类似，但e.pageX和e.pageY属性获取的是事件发生时鼠标指针在整个页面中的横坐标和纵坐标。

// 获取鼠标指针在视口中的横坐标
var clientX = event.clientX;

// 获取鼠标指针在视口中的纵坐标
var clientY = event.clientY;