鼠标事件

  • click、mousedown、mousemove、mouseup、contextmenu、 mouseover、mouseout、mouseenter、mouseleave // 都没有驼峰
  • 用button来区分鼠标的按键。 // 扫雷 只有可以mouseup mousedown // e.button = 0/1/2
  • DOM3标准规定：click时间只能监听左键，只能通过mouseup mousedown来判断鼠标键
  • 如何解决 mousedown 和 click 的冲突。
var firstTime = 0;
var lastTime = 0;
var key = false;
document.onmousedown = function () {
  firstTime = new Date().getTime();
};
document.onmouseup = function () {
  lastTime = new Date().getTime();
  if (lastTime - firstTime < 300) {
    key = true;
  }
};
document.onclick = function () {
  if (key) {
    console.log("click");
    key = false;
  }
};

事件练习

  • 拖拽应用
  • 应用mousedown mousemove mouseup
  • 随机移动的方块 // 点不到我吧 // 雪花飘落
  • mouseover

键盘事件

  • keydown keypress keyup
  • keydown > keypress > keyup
  • keydown 和 keypress的区别
    • keydown 可以响应任何键盘按键，keypress只能响应字符类按键
    • keypress 返回ASCII码，可以转换成响应字符。
      document.onkeypress = function (e) { consolo.log(String.fromCharCode(e.charCode)); }

事件分类

  • 文本操作事件
  • input 内容有变化触发，focus ，blur，change 聚焦和失去焦点两个状态不一触发
  • 窗体操作类（window上的事件）
  • scroll(滚动条滚动 事件触发) load(慢，所有结构渲染完毕后 触发)
  • 小练习：fixed定位js兼容版