js基础知识 —— 事件对象

一、什么是事件？

• 当触发一个事件以后, 对该事件的一些描述信息，像鼠标点击时的坐标，触发键盘事件时按下的那个按键，每一个事件都会有一个对象来描述这信息, 我们就把这个对象叫做事件对象

1.点击事件的光标位置

0.获取元素

    var oDiv = document.querySelector('div')
    oDiv.onclick = function (e){
        // 在函数内填写鼠标事件
    }

1.1 相对于事件源的鼠标事件

    console.log('相对于事件源X轴',e.offsetX)
    console.log('相对于事件源Y轴',e.offsetY)

1.2 相对于页面的鼠标事件

    console.log('相对于页面X轴',e.pageX)
    console.log('相对于页面Y轴',e.pageY)

1.3 相对于浏览器窗口

    console.log('相对于浏览器窗口X轴',e.clientX)
    console.log('相对于浏览器窗口Y轴',e.clientY)

2.获取键盘按键

• 键盘的每一个按键都有一个自己的编码
• 可以通过 事件对象.keyCode 来获取，获取到的为按键对应的代码，但因为 e.keyCode已经被移除了, 但是很多主流浏览器还支持使用，现在推荐使用: e.key 1.代码如下

    var ipt = document.querySelector('input')
    ipt.onkeyup = function (e){
      // console.log('编码',e.keyCode)
      // console.log('所按按键',e.key)

      // 组合按键 ctrl alt shift  (返回的是true/false)
      // console.log(e.ctrlKey)
      // console.log(e.altKey)
      // console.log(e.shiftKey)

      if (e.altKey && e.keyCode === 81){
        console.log('按下组合键alt + q')
      }
    }

二、onXX绑定事件的弊端

• 如果注册事件使用 onXXX，由于只能给元素注册一个事件, 如果写了第二个, 那么第一个就会被覆盖掉
• 解决:如果想要两个事件全都存在, 我们可以使用 事件监听 的方式去给元素绑定事件
  • 事件监听使用：addEventListener
    • 语法：元素.addEventListener('事件类型', 事件处理函数, 第三个形参)
    • 事件类型：全部都不需要加 on
    • 执行顺序会按照我们的注册的顺序执行(也就是代码书写的顺序)

三、事件传播

• 在一个包含结构里，给父元素添加一个点击事件，若点击了子元素，也就相当于点击了父元素
  • 注1:只会传播同类事件, 如果是点击事件, 那么只会触发父级或者父级的父级他们注册的点击事件, 其他类型的事件不会得到触发
  • 注2:只会从点击的元素开始, 按照 html 的结构, 逐层向上触发同类型的事件
  • 注3:内部元素不管有没有该事件, 只要上层元素有该事件, 那么上层元素的事件就会触发

四、事件的冒泡与捕获

• 目标：你点击在那个元素上, 那么这个事件的目标 就是这个元素
• 事件的冒泡与捕获(面试题):
  • 冒泡: 就是从 目标 的事件处理函数开始, 依次向上, 一直到 window 的事件处理函数触发，也就是说从下向上的执行事件处理函数
  • 捕获: 就是从 window 的事件处理函数开始, 依次向下, 一直到 目标 的事件处理函数触发，也就是说从上向下的执行事件处理函数
  • 二者区别: 就是在事件的传播中, 多个同类型的事件处理函数的执行顺序不同, 仅此而已

五、事件委托

• 就是要把我自己做的事, 委托给别人, 帮我完成，也就是把子元素的事件委托给父元素来做
• 点击子元素的时候, 不管子元素有没有点击事件, 只要父元素有点击事件, 那么就可以触发父元素的点击事件
• target：这个属性是事件对象里的属性, 表示你点击的目标
• 事件委托的优点：
  • 在无序列表中，页面上本身没有 li, 通过 代码添加了一些 li 这些 li 是没有点击事件的, 每次动态的添加 li, 还需要重新给 li 绑定一次点击事件这时候使用事件委托就比较合适，因为: 新加进来的 li 也是 ul 的子元素, 点击的时候也可以触发 ul 的点击事件

六、默认行为与阻止默认行为

默认行为: 不用我们注册, 但是自己存在的事情

• 比如: 鼠标右键单击, 会弹出一个菜单；点击 a 标签后, 自己会跳转到页面
• 这些不需要我们注册就是能实现的事情, 我们叫做 默认事件

阻止默认事件： 不希望浏览器执行默认事件时, 比如 点击 a 标签不跳转页面, 那么就需要阻止默认事件

• 两种方式:
  • 1. e.preventDefault() ---> 非 IE 浏览器
  • 2. e.returnValue = false ----> IE 浏览器 (了解即可)