事件对象

事件对象

• 定义:当触发一个事件以后，对该事件的一些描述信息
• 语法: 元素.onclick = function () { console.log(e.X轴的坐标); console.log(e.Y轴的坐标); }

获取光标位置

• 坐标是一个相对的数据

  • => 相对于事件源 (就是我们点击的那个元素)
  • => 相对于页面
  • => 相对于浏览器窗口

  <div></div>
  ​
  var box = document.querySelector('div') //获取元素
  ​
  box.onclick = function (e) {
  

  • 1.相对与事件源的 鼠标坐标点

    • 注意:相对于点击元素的边框内侧开始计算

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

  • 2.相对于页面

    • 注意:当页面有滚动条后,页面的 Y 轴会根据滚动的距离增加

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

  • 3.相对于浏览器窗口

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

  }

获取键盘按键

• 键盘的每一个按键都有一个自己的编码

  我们可以通过事件对象.keyCode 来获取 注意:e.keyCode已经被移除了,但是很多主流浏览器还支持使用

  • 现在我们用 e.key

      <input type="text">        
      var inp = document.querySelector('input') // 获取元素
  ​
      inp.onkeyup = function (e) {
      console.log(e.keyCode)
      }
      inp.onkeyup = function (e) {
          console.log(e.key)
      }
  

• 组合按键 alt / ctrl / shift

  inp.onkeyup = function (e) {
      // console.log(e.ctrlKey)
  }
  

  • 例如:已知q键对应的编码是 81

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

onXXX绑定事件的弊端

1.弊端:

• 只能给元素注册一个事件，如果写了第二个，那么第一个就会被覆盖掉

    <div></div>
    var box = document.querySelector('div')     // 获取元素
​
    // 1.给 box 添加第一个点击事件
        box.onclick = function () {
            console.log('触发点击事件1')
        }
​
    // 2.给 box 添加第二个点击事件
        box.onclick = function () {
            console.log('触发点击事件2')        //只会触发点击事件2,事件1会被覆盖掉
        }

2.解决方法:

• 使用事件监听的方法给元素绑定,用 addEventListener 去给元素通过事件监听的方式

  • 语法: 元素.addEventListener('事件类型',事件处理函数,第三个形参)

  • 注意:

    • 1.这里的事件类型。全部都一样不要加 on
    • 2.执行顺序会按照我们的注册的顺序执行(也就是代码书写的顺序)

        <div></div>
        var box = document.querySelector('div')     // 获取元素
​
        box.addEventListener('click',function(){
        console.log('绑定的第一个事件')
        })
​
        box.addEventListener('click',function(){
            console.log('绑定的第三个事件')
        })
​
        box.addEventListener('click',function(){
            console.log('绑定的第二个事件')
        })
        /*
        这三个事件会按顺序同时触发
        */

事件传播

• 0. 只会传播同类事件, 如果是点击事件, 那么只会触发父级或者父级的父级他们注册的点击事件, 其他类型的事件不会得到触发
• 2. 只会从点击的元素开始, 按照 html 的结构, 逐层向上触发同类型的事件
• 3. 内部元素不管有没有该事件, 只要上层元素有该事件, 那么上层元素的事件就会触发

事件的冒泡与捕获

• 目标: 你点击在那个元素上, 那么这个事件的目标 就是这个元素

• 事件的冒泡与捕获(面试题):

  • 冒泡: 就是从 目标 的事件处理函数开始, 依次向上, 一直到 window 的事件处理函数触发(从下向上的执行 事件处理函数)

  • 捕获: 就是从 window 的事件处理函数开始, 依次向下, 一直到 目标 的事件处理函数触发(从上向下的执行 事件处理函数)

  • 区别: 就是在事件的传播中, 多个同类型的事件处理函数的执行顺序不同, 仅此而已

  • 注意:addEventListener第三个参数就是决定当前传播方式为捕获还是冒泡

    • 默认第三个参数为faLse,代表传播方式为冒泡

• 1.按照事件冒泡的形式传播(从下向上的执行)

  box1.onclick = function() {
      console.log('我是内层div,我的点击事件被触发了')
  }
  ​
  box.onclick = function() {
      console.log('我是外层div,我的点击事件被触发了')
  }
  ​
  oBody.onclick = function() {
      console.log('我是body,我的点击事件被触发了')
  }
  

• 2.按照事件捕获的形式传播(从上向下的执行)

  box1.addEventListener('click',function(){
      console.log('我是内层div,我的点击事件被触发了');
  },true)
  ​
  box.addEventListener('click',function(){
      console.log('我是外层div,我的点击事件被触发了');
  },true)
  ​
  oBody.addEventListener('click',function(){
      console.log('我是body,我的点击事件被触发了');
  },true)
  

事件委托

• 把子元素的事件委托给父元素来做

    <ul>
        <li>1</li>
    </ul>
    // 获取元素
    var oUl = document.querySelector('ul')
​
    // 事件委托
    oUl.onclick = function (e) {
        if (e.target.nodeName === 'LI') {
            console.log('我是 li 标签,我被点击了')
        }
    }

默认行为

• 定义:不需要我们注册就是能实现的事情, 我们叫做 默认事件

  • 比如:鼠标右键单击, 会弹出一个菜单 / 点击 a 标签后, 自己会跳转到页面

• 阻止默认事件:

  • 两种方式:

    • 0. e.preventDefault() -> 非 IE 浏览器
    • 2. e.returnValue = false -> IE 浏览器

    <a href="https://www.baidu.com/">点我跳转百度</a> 
    // 获取元素
    var oA = document.querySelector('a')
​
    // 阻止页面跳转
        oA.onclick = function (e) {
            e.preventDefault()
            console.log('被拦截跳转')
        }