乐趣区

关于javascript:JS中的事件上

jiezi

EVENT（上）

  • 之前咱们简略的理解过一些事件，比方 onclick / onload / onscroll / …
  • 明天开始，咱们具体的学习一些 事件

什么是事件

  • 一个事件由什么货色组成

    • 触发谁的事件：事件源
    • 触发什么事件：事件类型
    • 触发当前做什么：事件处理函数
    var oDiv = document.querySelector('div')

oDiv.onclick = function () {}
// 谁来触发事件 => oDiv => 这个事件的事件源就是 oDiv
// 触发什么事件 => onclick => 这个事件类型就是 click
// 触发之后做什么 => function () {} => 这个事件的处理函数
    • 咱们想要在点击 div 当前做什么事件，就把咱们要做的事件写在事件处理函数外面
    var oDiv = document.querySelector('div')

oDiv.onclick = function () {console.log('你点击了 div')
}
    • 当咱们点击 div 的时候，就会执行事件处理函数外部的代码
    • 每点击一次，就会执行一次事件处理函数

事件对象

  • 什么是事件对象？
  • 就是当你触发了一个事件当前，对该事件的一些形容信息

  • 例如：

    • 你触发一个点击事件的时候，你点在哪个地位了，坐标是多少
    • 你触发一个键盘事件的时候，你按的是哪个按钮
    • …
  • 每一个事件都会有一个对应的对象来形容这些信息，咱们就把这个对象叫做 事件对象

  • 浏览器给了咱们一个 黑盒子，叫做 window.event，就是对事件信息的所有形容

    • 比方点击事件
    • 你点在了 0，0 地位，那么你失去的这个事件对象外面对应的就会有这个点位的属性
    • 你点在了 10, 10 地位，那么你失去的这个事件对象外面对应的就会有这个点位的属性
    • …
    oDiv.onclick = function () {console.log(window.event.X 轴坐标点信息)
  console.log(window.event.Y 轴坐标点信息)
}
  • 这个玩意很好用，然而一般来说，好用的货色就会有 兼容性问题
  • 在 IE 低版本 外面这个货色好用，然而在 高版本 IE 和 Chrome 外面不好使了
  • 咱们就得用另一种形式来获取 事件对象

  • 在每一个事件处理函数的行参地位，默认第一个就是 事件对象

    oDiv.onclick = function (e) {
  // e 就是和 IE 的 window.event 一样的货色
  console.log(e.X 轴坐标点信息)
  console.log(e.Y 轴坐标点信息)
}

  • 综上所述，咱们当前在每一个事件外面，想获取事件对象的时候，都用兼容写法

    oDiv.onclick = function (e) {
  e = e || window.event
  console.log(e.X 轴坐标点信息)
  console.log(e.Y 轴坐标点信息)
}

点击事件的光标坐标点获取

  • 方才即然说了，能够获取到坐标点，那么接下来咱们就学习一下怎么获取坐标点
  • 咱们的每一个点击事件的坐标点都不是一对，因为要有一个绝对的坐标系

  • 例如：

    • 绝对事件源（你点击的元素）
    • 绝对页面
    • 绝对浏览器窗口
    • …
  • 因为都不一样，所以咱们获取的 事件对象 外面的属性也不一样

绝对于你点击的元素来说

  • offsetX 和 offsetY

  • 是绝对于你点击的元素的边框内侧开始计算

    <style>
  * {
    margin: 0;
    padding: 0;
  }

  div {
    width: 300px;
    height: 300px;
    padding: 20px;
    border: 10px solid #333;
    margin: 20px 0 0 30px;
  }
</style>
<body>
  <div></div>

  <script>
    var oDiv = document.querySelector('div')

    // 注册点击事件
    oDiv.onclick = function (e) {
      // 事件对象兼容写法
      e = e || window.event

      console.log(e.offsetX)
      console.log(e.offsetY)
    }
  </script>
</body>

绝对于浏览器窗口你点击的坐标点

  • clientX 和 clientY

  • 是绝对于浏览器窗口来计算的，不论你页面滚动到什么状况，都是依据窗口来计算坐标

    <style>
  * {
    margin: 0;
    padding: 0;
  }

  body {
    width: 2000px;
    height: 2000px;
  }

  div {
    width: 300px;
    height: 300px;
    padding: 20px;
    border: 10px solid #333;
    margin: 20px 0 0 30px;
  }
</style>
<body>
  <div></div>

  <script>
    var oDiv = document.querySelector('div')

    // 注册点击事件
    oDiv.onclick = function (e) {
      // 事件对象兼容写法
      e = e || window.event

      console.log(e.clientX)
      console.log(e.clientY)
    }
  </script>
</body>

绝对于页面你点击的坐标点

  • pageX 和 pageY

  • 是绝对于整个页面的坐标点，不论有没有滚动，都是绝对于页面拿到的坐标点

    <style>
  * {
    margin: 0;
    padding: 0;
  }

  body {
    width: 2000px;
    height: 2000px;
  }

  div {
    width: 300px;
    height: 300px;
    padding: 20px;
    border: 10px solid #333;
    margin: 20px 0 0 30px;
  }
</style>
<body>
  <div></div>

  <script>
    var oDiv = document.querySelector('div')

    // 注册点击事件
    oDiv.onclick = function (e) {
      // 事件对象兼容写法
      e = e || window.event

      console.log(e.pageX)
      console.log(e.pageY)
    }
  </script>
</body>

  • 依据页面左上角来说

    • margin-left 是 30
    • 左边框是 10
    • 左右 padding 各是 20
    • 内容区域是 300
    • pageX : 300 + 20 + 20 + 10 + 30 = 380
    • margin-top 是 20
    • 上边框是 10
    • 高低 padding 各是 20
    • 内容区域是 300
    • pageY : 300 + 20 + 20 + 10 + 20 = 270

点击按键信息（理解）

  • 咱们的鼠标个别都有两个按键，一个左键一个右键
  • 咱们的事件对象外面也有这个信息，确定你点击的是左键还是右键
  • 咱们应用 事件对象.button 来获取信息
  • 1 为鼠标左键，2 为鼠标右键

常见的事件（理解）

  • 咱们在写页面的时候常常用到的一些事件
  • 大抵分为几类，浏览器事件 / 鼠标事件 / 键盘事件 / 表单事件 / 触摸事件
  • 不须要都记住，然而大略要晓得

浏览器事件

  • load：页面全副资源加载结束
  • scroll：浏览器滚动的时候触发
  • …

鼠标事件

  • click：点击事件
  • dblclick：双击事件
  • contextmenu：右键单击事件
  • mousedown：鼠标左键按下事件
  • mouseup：鼠标左键抬起事件
  • mousemove：鼠标挪动
  • mouseover：鼠标移入事件
  • mouseout：鼠标移出事件
  • mouseenter：鼠标移入事件
  • mouseleave：鼠标移出事件
  • …

键盘事件

  • keyup：键盘抬起事件
  • keydown：键盘按下事件
  • keypress：键盘按下再抬起事件
  • …

表单事件

  • change : 表单内容扭转事件
  • input : 表单内容输出事件
  • submit : 表单提交事件
  • …

触摸事件

  • touchstart：触摸开始事件
  • touchend：触摸完结事件
  • touchmove：触摸挪动事件
  • …

键盘事件

  • 方才理解了一下鼠标事件，当初来聊聊键盘事件

  • 咱们在键盘事件外面最次要的就是要做两个事件

    • 判断点击的是哪个按键
    • 有没有组合按键，shift + a / ctrl + b / …

  • 咱们先要明确一个问题，就是是不是所有元素都能够绑定键盘事件

    • 咱们说事件有一个要害的货色是，该事件是由谁来触发的
    • 一个 div 元素在页面上，我怎么能让一个键盘事件触发在 div 上
    • 所以说，咱们个别只给能在页面上选中的元素（表单元素）和 document 来绑定键盘事件
    document.onkeyup = function () { // code..} 
oInput.onkeyup = function () { // code..}

确定按键

  • 咱们的键盘上每一个按键都有一个本人独立的编码
  • 咱们就是靠这个编码来确定咱们按下的是哪个按键的
  • 咱们通过 事件对象.keyCode 或者 事件对象.which 来获取

  • 为什么要有两个呢，是因为 FireFox2.0 不反对 keycode 所以要用 which

    document.keyup = function (e) {
  // 事件对象的兼容写法
  e = e || window.event
  
  // 获取键盘码的兼容写法
  var keyCode = e.keyCode || e.which
  
  console.log(keyCode)
}

常见的键盘码（理解）

  • 8：删除键（delete）
  • 9：制表符（tab）
  • 13：回车键（ebter）
  • 16：上档键（shift）
  • 17：ctrl 键
  • 18：alt 键
  • 27：勾销键（esc）
  • 32：空格键（space）
  • …

组合按键

  • 组合案件最次要的就是 alt / shift / ctrl 三个按键
  • 在我点击某一个按键的时候判断一下这三个键有没有按下，有就是组合了，没有就是没有组合

  • 事件对象外面也为咱们提供了三个属性

    • altKey：alt 键按下失去 true，否则失去 false
    • shiftKey：shift 键按下失去 true，否则失去 false
    • ctrlKey：ctrl 键按下失去 true，否则失去 false

  • 咱们就能够通过这三个属性来判断是否按下了

    document.onkeyup = function (e) {
  e = e || window.event
  keyCode = e.keyCode || e.which
  
  if (e.altKey && keyCode === 65) {console.log('你同时按下了 alt 和 a')
  }
}

事件的绑定形式

  • 咱们当初给一个注册事件都是应用 onxxx 的形式
  • 然而这个形式不是很好，只能给一个元素注册一个事件

  • 一旦写了第二个事件，那么第一个就被笼罩了

    oDiv.onclick = function () {console.log('我是第一个事件')
}

oDiv.onclick = function () {console.log('我是第二个事件')
}
    • 当你点击的时候，只会执行第二个，第一个就没有了
  • 咱们还有一种事件监听的形式去给元素绑定事件

  • 应用 addEventListener 的形式增加

    • 这个办法不兼容，在 IE 外面要应用 attachEvent

事件监听

  • addEventListener : 非 IE 7 8 下应用

  • 语法：元素.addEventListener('事件类型'，事件处理函数，冒泡还是捕捉)

    oDiv.addEventListener('click', function () {console.log('我是第一个事件')
}, false)

oDiv.addEventListener('click', function () {console.log('我是第二个事件')
}, false)
    • 当你点击 div 的时候，两个函数都会执行，并且会依照你注册的程序执行
    • 先打印 我是第一个事件 再打印 我是第二个事件
    • 留神：事件类型的时候不要写 on，点击事件就是 click，不是 onclick
  • attachEvent：IE 7 8 下应用

  • 语法：元素.attachEvent('事件类型'，事件处理函数)

    oDiv.attachEvent('onclick', function () {console.log('我是第一个事件')
})

oDiv.attachEvent('onclick', function () {console.log('我是第二个事件')
})
    • 当你点击 div 的时候，两个函数都会执行，并且会依照你注册的程序顺叙执行
    • 先打印 我是第二个事件 再打印 我是第一个事件
    • 留神：事件类型的时候要写 on，点击事件就行 onclick

两个形式的区别

  • 注册事件的时候事件类型参数的书写

    • addEventListener：不必写 on
    • attachEvent：要写 on

  • 参数个数

    • addEventListener：个别是三个罕用参数
    • attachEvent：两个参数

  • 执行程序

    • addEventListener：程序注册，程序执行
    • attachEvent：程序注册，顺叙执行

  • 实用浏览器

    • addEventListener：非 IE 7 8 的浏览器
    • attachEvent：IE 7 8 浏览器
退出移动版