导语：之前已经说过了事件的来龙去脉和属性以及方法，今天就说一下鼠标和键盘事件的案例。

温馨提示:

前提是你要引入一个gjs.js文件 https://felab.guanqi.xyz/assets/js/gjs.min.js 才可以运行。

<script src="https://felab.guanqi.xyz/assets/js/gjs.min.js"></script>

鼠标和键盘事件:

鼠标和键盘事件就是设备相关的事件，可以使用鼠标和键盘对文档进行操作，触发相应的事件。

鼠标事件案例

既然之前已经知道了如何使用鼠标事件，那本节就提出两个案例，来对学过的知识的实践。

本节有两个案例，第一个是有关右击鼠标显示自定义菜单的；第二个是有关如何使用鼠标进行拖拽元素。

鼠标右击自定义菜单

• 原理

• 当鼠标右键按下后，获取鼠标坐标，然后赋值并且显示菜单元素；

• 当鼠标左键按下后，隐藏菜单元素；

• 菜单样式

<ul id="list">
    <li><a href="#menu1">菜单1</a></li>
    <li><a href="#menu2">菜单2</a></li>
    <li><a href="#menu3">菜单3</a></li>
    <li><a href="#menu4">菜单4</a></li>
</ul>

#list {
  margin: 0;
  padding: 0;
  width: 150px;
  height: 240px;
  border: 1px solid #eee;
  box-shadow: 1px 1px 5px #eee;
  list-style: none;
}
#list li {
  width: 150px;
  height: 60px;
  line-height: 60px;
  text-align: center;
}
#list li:hover {
  background-color: #ddd;
}
#list li:hover a {
  color: #333;
}
#list li a {
  display: inline-block;
  width: 100%;
  color: #666;
  text-decoration: none;
}

• 动效js操作

var uls = $g.eid('list');
$g.addEvent(document, 'contextmenu', function (e) {
  $g.prevent(e);
  $g.stoppro(e);
  uls.style.left = e.clientX + 'px';
  uls.style.top = e.clientY + 'px';
  uls.style.display = 'block';
}, false);
$g.addEvent(document, 'click', function () {
  uls.style.display = 'none';
}, false);

这个案例就到此为止，请点这里 (opens new window)在GitHub上查看效果。

元素拖拽示例

• 原理

• 1.当点击鼠标，获取到鼠标坐标位置；然后减去元素距离左/上边的距离；

• 2.当移动元素，获取到元素距离左上的距离；用鼠标的坐标值减去上一步的值；

• 3.当放开鼠标，禁用鼠标移动事件和按下 事件；

• 元素和样式

<div class="box"></div>

.box {
  position: absolute;
  right: 0;
  top: 0;
  width: 150px;
  height: 150px;
  line-height: 150px;
  background-color: #f00;
  color: #fff;
  font-size: 20px;
  text-align: center;
}

• js动效

var box = $g.eone('.box');
var box1 = $g.eone('.box1');
new $g.Drag(box);
new $g.Drag(box1);

这个案例就到此为止，请点这里 (opens new window)在GitHub上查看效果。

键盘事件案例

键盘事件案例一般是用于鼠标事件案例的替代选择，如果用户的设备只支持键盘，就可以使用键盘事件代替是鼠标事件。

大多数事件都是有鼠标事件对应的键盘事件，两个事件都是可以触发同一函数方法的。

这个案例就是模拟聊天窗口，按住Enter键盘键，然后发送聊天内容。

聊天窗口模拟案例

• 原理

当输入框输完内容后，按下键盘上的Enter发送聊天内容。

<div id="box"></div>
<input type="text" name="con" id="con" placeholder="请输入聊天内容">
<button id="send">发送</button>

#box {
  padding: 10px 15px;
  width: 250px;
  height: 400px;
  background-color: #f9f9f9;
  border: 1px solid #eee;
  overflow: auto;
}
#con {
  margin: 10px 0;
  padding: 0 10px;  
  width: 200px;
  height: 30px;
  line-height: 30px;
  color: #333;
}
#send {
  position: relative;
  top: 2px;
  width: 50px;
  height: 35px;
  line-height: 35px;
  border: none;
  border: 1px solid #f8f8f8;
  cursor: pointer;
}

var box = $g.eid('box');
var con = $g.eid('con');
var send = $g.eid('send');

$g.addEvent(send, 'click', sendCon, false);

function sendCon() {
  if (con.value == '') {
    alert('请输入内容！');
    return;
  }
  box.innerHTML += '<p style="margin:2px auto;">' + con.value + '</p><br>'
  con.value = '';
}

$g.addEvent(con, 'keypress', sendKey, false);

function sendKey(e) {
  var e = e || window.event;
  var code = e.code;
  if (code == 'Enter' || e.keyCode == 13) {
    if (con.value == '') {
      alert('请输入内容！');
      return;
    }
    box.innerHTML += '<p style="margin:2px auto;">' + con.value + '</p><br>'
    con.value = '';
  }
}

如果想看效果，可以点这里 (opens new window)在GitHub上查看。