常见事件

ZShuai
3 min

# 常见事件

本章节列出常见的元素事件

# 剪贴板事件

# copy

当用户通过浏览器 UI(例如,使用 Ctrl/⌘ + C 键盘快捷方式或从菜单中选择“复制”)启动复制操作并响应允许的 document.execCommand('copy') 调用时触发 copy 事件

  • 如果默认事件没有取消,就复制选中内容到剪切板;
  • 如果取消了默认事件,但是调用了 setData()方法:就复制 clipboardData 的内容到到剪切板;
  • 如果取消了默认行为,而且没有调用 setData()方法,就没有任何行为;
// Ctrl + C 会进入该方法,Ctrl + v 的内容是 xxx
document.addEventListener("copy", function (e) {
  e.clipboardData.setData("text/plain", "xxx");
  e.preventDefault(); // 取消了默认事件,调用了setData('xxx')方法:就复制'xxx'到到剪切板
});

# cut

用户剪切操作Ctrl/⌘ + x触发; 行为和copy事件基本一样

// Ctrl + X 会进入该方法,Ctrl + v 的内容是 cut
document.addEventListener("cut", function (e) {
  e.clipboardData.setData("text/plain", "cut");
  e.preventDefault();
});

# paste

当用户在浏览器用户界面发起粘贴 Ctrl/⌘ + v 操作时,会触发 paste 事件。

  • 如果光标位于可编辑的上下文中,则默认操作是将剪贴板的内容插入光标所在位置的文档中
  • 访问剪贴板内容: e.clipboardData.getData("text")
  • 要转换剪贴板的内容,必须 event.preventDefault() 取消默认操作,然后手动插入想要的数据

例子: 将粘贴板的内容全部转为大写

// element.addEventListener("paste",(e) => {}) 也是可以的
document.addEventListener("paste", function (event) {
  // 获取粘贴板上文本
  let paste = (event.clipboardData || window.clipboardData).getData("text");

  paste = paste.toUpperCase();

  // window.getSelection(): 返回的对象表示用户选择的文本范围或光标的当前位置。
  const selection = window.getSelection();
  if (!selection.rangeCount) return false;

  // 删除选区中的内容
  selection.deleteFromDocument();

  // 插入新内容
  selection.getRangeAt(0).insertNode(document.createTextNode(paste));

  // 将当前的选区折叠到最末尾的一个点 (页面效果:粘贴后,光标在粘贴文本的最后)
  selection.collapseToEnd();

  // 阻止默认行为,自定义行为
  event.preventDefault();
});

TIP

也可以在具体某一个 dom 元素上监听 paste 事件

参考资源:window.getSelection()

# 键盘事件

# keydown

keydown 事件触发于键盘按键按下的时候。与 keypress (en-US) 事件不同的是,所有按键均会触发 keydown 事件,无论这些按键是否会产生字符值

const input = document.querySelector("input");
input.addEventListener("keydown", (e) => {
  console.log(e.keyCode);
  console.log(e.code);
});
// 输入大写 A,  e.keyCode = 65;  e.code = 'KeyA'
// 输入小写 a,  e.keyCode = 65;  e.code = 'KeyA'
// 不能区分大小写

WARNING

keypress 事件能区分大小写,不过准备废弃

# keyup

keyup 事件在按键被松开时触发。

const input = document.querySelector("input");
input.addEventListener("keyup", (e) => {
  console.log("keyup keyCode :", e.keyCode);
  console.log("keyup code :", e.code);
});

# 鼠标事件

# dblclick

在单个元素上单击两次鼠标的指针设备按钮 (通常是小鼠的主按钮) 时,将触发 dblclick 事件。

# mousedown

mousedown 事件在指针设备(鼠标)按钮按下时触发。

element.addEventListener("mousedown", (e) => {
  console.log("mousedown", e);
});

# mouseup

mousedown 事件在指针设备(鼠标)按钮放开时触发。与 mousedown 事件相反。

element.addEventListener("mouseup", (e) => {
  console.log("mouseup", e);
});

# mouseenter

当定点设备(通常指鼠标)移动到元素上时就会触发 mouseenter 事件

element.addEventListener("mouseenter", (e) => {
  console.log("mouseenter", e);
});

# mouseleave

指点设备(通常是鼠标)的指针移出某个元素时,会触发 mouseleave 事件。

element.addEventListener("mouseleave", (e) => {
  console.log("mouseleave", e);
});

# mousemove

当指针设备 ( 通常指鼠标 ) 在元素上移动时,mousemove 事件被触发。

element.addEventListener("mousemove", (e) => {
  console.log("mousemove");
});

# mouseout

  • 当移动指针设备(通常是鼠标),使指针不再包含在这个元素或其子元素中时, mouseout 触发
  • 父元素移入子元素时, mouseout 也会触发; mouseleave 不会
element.addEventListener("mouseout", (e) => {
  console.log("mouseout");
});

# mouseover

  • 当使用定点设备(如鼠标或触控板)将光标移动到元素或其子元素上时,将向元素激发 mouseover 事件。
  • 父元素移入子元素时, mouseover 也会触发; mouseenter 不会
element.addEventListener("mouseover", (e) => {
  console.log("mouseover");
});

# contextmenu

该事件通常在鼠标点击右键或者按下键盘上的菜单键时被触发

例子: noContext 上禁止菜单右键

let noContext = document.getElementById("noContextMenu");
noContext.addEventListener("contextmenu", (e) => {
  e.preventDefault();
});

# Touch 事件

const el = document.getElementById("canvas");
el.addEventListener("touchstart", handleStart);
el.addEventListener("touchend", handleEnd);
el.addEventListener("touchcancel", handleCancel);
el.addEventListener("touchmove", handleMove);

function handleStart(e) {
  console.log(e);
}

# touchstart

当一个或多个触摸点与触控设备表面接触时触发 touchstart 事件。

# touchcancel

当触摸点被中断时会触发 touchcancel 事件,中断方式基于特定实现而有所不同(例如, 创建了太多的触摸点)。

# touchend

当从触摸表面移除一个或多个触摸点时,触发 touchend 事件。

# touchmove

当一个或多个触摸点沿触摸表面移动时,触发 touchmove 事件。

# 拖拽事件

# drag

当元素被拖动时触发 drag 事件 (每几百毫秒触发一次)

document.addEventListener("drag", (e) => {
  console.log("drag");
});
// or
var targetEle = document.getElementById("targetId");
targetEle.addEventListener("drag", (e) => {
  console.log("drag");
});

# dragstart

当用户开始拖动一个元素 dragstart 事件就会触发。

document.addEventListener("dragstart", (e) => {
  console.log("dragstart");
});
// or
var targetEle = document.getElementById("targetId");
targetEle.addEventListener("dragstart", (e) => {
  console.log("dragstart");
});

# dragend

拖放结束时触发 (释放鼠标按钮 或 单击esc键)。

document.addEventListener("dragend", (e) => {
  console.log("dragend");
});
// or
var targetEle = document.getElementById("targetId");
targetEle.addEventListener("dragend", (e) => {
  console.log("dragend");
});

# dragenter

当拖动元素进入有效的放置目标时,dragenter 事件被触发。

document.addEventListener("dragenter", (e) => {
  console.log("dragenter");
});
// or
var targetEle = document.getElementById("targetId");
targetEle.addEventListener("dragenter", (e) => {
  console.log("dragenter");
});

# dragleave

当拖动元素离开可放置目标节点,将会触发 dragleave 事件。

document.addEventListener("dragleave", (e) => {
  console.log("dragleave");
});
// or
var targetEle = document.getElementById("targetId");
targetEle.addEventListener("dragleave", (e) => {
  console.log("dragleave");
});

# dragover

当拖动元素被拖拽到一个有效的放置目标上时,触发 dragover 事件 (每几百毫秒触发一次)

document.addEventListener("dragover", (e) => {
  console.log("dragover");
});
// or
var targetEle = document.getElementById("targetId");
targetEle.addEventListener("dragover", (e) => {
  console.log("dragover");
});

# drop

当拖动的元素放到一个有效的释放目标位置时,drop 事件被抛出。

document.addEventListener("drop", (e) => {
  e.preventDefault();
  // 将拖动的元素到所选择的放置目标节点中
  if (e.target.className == "dropzone") console.log(drop);
});
// or
var targetEle = document.getElementById("targetId");
targetEle.addEventListener("drop", (e) => {
  console.log("drop");
});

# 其他事件

# 选择文本事件 select

只有在选择了<input type=“text”><textarea>中的文本后,选择事件才会触发。

var inputDom = document.getElementById("input");
inputDom.onselect = (e) => console.log(e);
// or
inputDom.addEventListener("select", (e) => console.log(e));

# 窗口变化事件 resize

浏览器调整窗口大小后,将触发 resize 事件。

window.onresize = () => console.log(2);
window.addEventListener("resize", () => console.log(1));
Last Updated: 2/10/2023, 6:53:47 AM