js鼠标按键事件和键盘按键事件用法实例汇总

下面是“js鼠标按键事件和键盘按键事件用法实例汇总”的完整攻略。

一、鼠标按键事件

鼠标按键事件是指用户通过鼠标在网页上进行的操作，常用的鼠标按键事件有mousedown、mouseup、click、dbclick、mousemove等。

1. mousedown事件

mousedown事件在鼠标按下的时候触发，常用于实现鼠标拖动等交互效果。示例代码如下：

document.getElementById("box").addEventListener("mousedown", function(event) {
  console.log("鼠标按下");
}, false);

2. mouseup事件

mouseup事件在鼠标松开的时候触发，常用于实现鼠标拖动等交互效果。示例代码如下：

document.getElementById("box").addEventListener("mouseup", function(event) {
  console.log("鼠标松开");
}, false);

3. click事件

click事件在鼠标单击的时候触发，常用于实现点击按钮、链接等操作。示例代码如下：

document.getElementById("btn").addEventListener("click", function(event) {
  console.log("按钮被点击");
}, false);

二、键盘按键事件

键盘按键事件是指用户通过键盘在网页上进行的操作，常用的键盘按键事件有keydown、keyup等。

1. keydown事件

keydown事件在键盘按下的时候触发，常用于实现快捷键等功能。示例代码如下：

document.addEventListener("keydown", function(event) {
  if (event.keyCode === 13) {
    console.log("回车键被按下");
  }
}, false);

2. keyup事件

keyup事件在键盘松开的时候触发，常用于实现快捷键等功能。示例代码如下：

document.addEventListener("keyup", function(event) {
  if (event.keyCode === 13) {
    console.log("回车键被松开");
  }
}, false);

总结

以上就是“js鼠标按键事件和键盘按键事件用法实例汇总”的完整攻略，通过使用这些事件，我们可以实现更加智能化、交互性更好的网页应用。