js中的一些事件

一、事件分类

JS 中的事件可以分为以下几类：

• 1.操作元素相关事件：这些事件与页面上的特定元素相关联，例如点击按钮、鼠标移动等。
• 2.操作对象相关事件：这些事件与浏览器、文档对象等相关联，例如页面加载、窗口大小改变等。

二、操作元素相关事件

1.click 事件
click 事件在用户单击一个元素时触发。例如，当用户单击一个按钮时，click 事件就会被触发。

// 示例代码
var btn = document.getElementById("myButton");
btn.addEventListener("click", function() {
  console.log("按钮被点击了");
});

常用属性：

• target：返回触发事件的元素。
• clientX / clientY：返回鼠标指针相对于浏览器窗口可视区域的水平和垂直坐标。
  2.mouseover / mouseout 事件
  mouseover 和 mouseout 事件分别在鼠标指针移动到元素上和移出元素时触发。例如，在鼠标移动到一个元素上时，我们可以通过 mouseover 事件来改变该元素的背景色或者显示一些提示信息。

// 示例代码
var div = document.getElementById("myDiv");
div.addEventListener("mouseover", function() {
  this.style.backgroundColor = "red";
});
div.addEventListener("mouseout", function() {
  this.style.backgroundColor = "white";
});

常用属性：

• target：返回触发事件的元素。
• relatedTarget：返回与事件相关的元素。
  3.mousedown / mouseup 事件
  mousedown 和 mouseup 事件分别在鼠标按钮按下和松开时触发。例如，在用户按下鼠标左键时，我们可以通过 mousedown 事件来改变某个元素的颜色或样式。

// 示例代码
var btn = document.getElementById("myButton");
btn.addEventListener("mousedown", function() {
  this.style.backgroundColor = "red";
});
btn.addEventListener("mouseup", function() {
  this.style.backgroundColor = "green";
});

常用属性：

• target：返回触发事件的元素。
• button：返回按下的鼠标按钮的编号（0 表示左键，1 表示中间键，2 表示右键）。
  4.dblclick 事件
  dblclick 事件在用户双击一个元素时触发。例如，当用户双击一个单元格时，我们可以通过 dblclick 事件来将该单元格转换成编辑模式。

// 示例代码
var td = document.getElementById("myTd");
td.addEventListener("dblclick", function() {
  this.contentEditable = true;
});

常用属性：

• target：返回触发事件的元素。
  5.keydown / keyup 事件
  keydown 和 keyup 事件分别在用户按下和松开键盘上的键时触发。例如，当用户按下回车键时，我们可以通过 keydown 事件来触发某个操作。

// 示例代码
document.addEventListener("keydown", function(event) {
  if (event.keyCode === 13) {
    console.log("用户按下了回车键");
  }
});

常用属性：

• target：返回触发事件的元素。
• keyCode：返回按下的键的 ASCII 码。

三、操作对象相关事件

1.load / unload 事件
load 和 unload 事件分别在页面加载完毕和卸载时触发。例如，当页面加载完毕后，我们可以通过 load 事件来初始化页面或者向服务器请求数据。

// 示例代码
window.addEventListener("load", function() {
  console.log("页面加载完成");
});

常用属性：

• target：返回触发事件的元素
  2.resize 事件
  resize 事件在浏览器窗口大小改变时触发。例如，当用户缩小或放大浏览器窗口时，我们可以通过 resize 事件来重新布局页面。

// 示例代码
window.addEventListener("resize", function() {
  console.log("浏览器窗口大小改变了");
});

常用属性：

• target：返回触发事件的元素。
  3.scroll 事件
  scroll 事件在页面滚动时触发。例如，当用户滚动页面时，我们可以通过 scroll 事件来隐藏或显示某些元素。

// 示例代码
window.addEventListener("scroll", function() {
  console.log("页面被滚动了");
});

常用属性：

• target：返回触发事件的元素。
• scrollLeft / scrollTop：返回页面滚动的水平和垂直像素值。
  4.error 事件
  error 事件在加载外部文件（如图片、脚本等）失败时触发。例如，当我们向服务器请求一张图片时，如果该图片不存在，则会触发 error 事件。

// 示例代码
var img = document.getElementById("myImg");
img.addEventListener("error", function() {
  console.log("图片加载失败");
});

常用属性：

• target：返回触发事件的元素。

四、总结

以上就是 JS 中常用的事件以及它们所属的分类。通过使用这些事件，我们可以为网页添加各种交互效果和响应式功能。在实际开发中，我们可以根据具体需求选择合适的事件来实现相应的功能。

• 打卡1.07