新手小白的js之路---事件

三七就是二十一
19 阅读4分钟

一、事件

1.组成

  • 事件源---box
  • 事件类型---onclick
  • 事件处理函数---function( ) { }

2.事件的绑定方式

(1) onXXX（onclick/onchange）

  • on只是一个固定开头，真正的事件类型应该是（click/change）
  • 方便，但同一个元素只能通过这个方式绑定一个事件

(2) 事件监听

  • 标签. addEventListener(' ', function( ) { })
  • 可以绑定多个事件

3.事件对象

  • window. event
  • event → ev → e

二、 事件传播

当我们在子元素内触发了一个事件的时候，他的对应的父元素也会触发相同的事件

默认的事件传播方式为 冒泡

1. 事件冒泡---从最下层传播到最上层

  • 当点击了一个元素的时候，相当于触发了这个元素的点击事件，当一个元素的点击事件被触发时，那么按照JS中事件冒泡的特性会将这个事件的触发也传递给自己的父级

  • 冒泡会从点击的元素开始，一直到页面最顶层的元素，如果元素没有绑定点击事件，也会触发事件冒泡

  • 从目标开始，逐层向上传递事件，这个过程叫做事件冒泡

      1. 目标
      1. 目标的父元素
      1. 目标的父元素的父元素
      1. 目标的父元素的父元素.....
      1. body
      1. document
      1. window

  • 语法：

    // DOM元素.addEventListener('事件类型', 事件处理函数, 布尔值 决定当前的传播方式)
    // 第三个参数默认为 false, 代表传播方式为冒泡
  
    box1.addEventListener( 'click', function () {
        console.log('box11111111111111111111111111111')
    }, true)

    box2.addEventListener('click', function () {
        console.log('box22222222222222222222222222')
    }, true)

    document.body.addEventListener('click', function () {
        console.log('body........................')
    }, true)

2. 事件捕获---从最上层传播到最下层

  • 捕获: 从页面的最顶层, 一直向下传递到 目标
      1. window
      1. document
      1. body
      1. 目标的父元素
      1. 目标
    box1.addEventListener('click', function () {
        console.log('1111111111111111111')
    }, true)
        
    box2.addEventListener('click', function () {
        console.log('22222222222222222222')
    }, true)

    document.body.addEventListener('click', function () {
        console.log('body')
    }, true)

三、事件委托

利用事件冒泡的原理，将所有子元素的一个事件（点击事件），委托给共同的父级（其实就是将子级的事件, 委托给共同的父级）

  • 优点:
      1. 简化代码量与内存空间
      1. 后续的子元素, 都会有对应的事件
    // html代码
    <ul>
        <li class="my_li">11111111111111111111</li>
        <li class="my_li">22222222222222</li>
        <li class="my_li">333333333333333333333</li>
        <li class="my_li">4444444444444444444</li>
    </ul>

    var ul = document.querySelector('ul')
    var lis = [...document.querySelectorAll('li')]
    
    ul.onclick = function (e) {
        // console.log('ul 的事件触发了', e.target)
        if (e.target.className === 'my_li') {
            console.log('点击了 li , 开始执行代码')
        }
    }

四、 阻止事件冒泡和默认行为

    // html代码
    <div class="box_1">
        <div class="box_2">
            <a href="https://www.baidu.com">点击跳转百度</a>
        </div>
    </div>

    var box1 = document.querySelector('.box_1')
    var box2 = document.querySelector('.box_2')
    
    box1.onclick = function () {
        console.log('box11111111111111111')
    }
    box2.onclick = function (e) {
        console.log('box22222222222222')
        // 禁止事件冒泡
        e.stopPropagation();
    }

    var aEl = document.querySelector('a')

    aEl.onclick = function (e) {
        console.log(123)

        // 禁止默认行为
        e.preventDefault()
    }

五、鼠标事件

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

六、键盘事件

目前只有input输入框和document对象可以绑定键盘事件

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

七、表单事件

  • 输入框获取焦点---focus
  • 输入框失去焦点---blur
  • 表单内容改变事件---change（根据上一次输入框的内容做对比，节约请求发送）
  • 表单内容输入事件---input

八、触摸事件

  • 触摸开始事件---touchstart
  • 触摸结束事件---touchend
  • 触摸移动事件---touchmove

九、元素的偏移量

  • 针对于参考父级的顶部与左侧的距离

    • offsetWidth/offsetHeight

      • 获取元素的尺寸：元素的内容+元素的内边距+元素的边框
      • 例如：console. log(‘宽度’, 类名. offsetWidth)

    • clientWidth、clientHeight

      • 获取元素的尺寸：元素的内容+元素的内边距
      • 例如：console. log(‘宽度’, 类名. clientWidth)

十、获取浏览器窗口尺寸

  • 包含滚动条尺寸
    • window.innerWidth
    • window.innerHeught
  • 不包含滚动条
    • document. documentElement. clientWidth
    • document. documentElement. clientHeight

十一、鼠标定位

  • 相对于事件源
    • offsetX，offsetY
  • 相对于浏览器窗口
    • clientX，clientY
  • 相对于页面（可滚动）
    • pageX，pageY
avatar
文章
阅读
粉丝