Event

圈圈又叉叉
197 阅读5分钟

事件监听和事件绑定的区别

开发项目的过程避免同一元素上重复添加事件例如onclick = fn。使用addEventListener()事件监听器

  1. 重复添加addEventListener，而且互相不会排斥
  2. 移动端也使用addEventListener，但不支持onclick 这种事件绑定

事件监听

  • addEventListener(type, listener[, options|useCapture])

    type是不用加on的

    listener 一个事件处理函数

    useCapture 是否捕获执行

  • removeEventListener

    • 取消事件监听

    • 取消事件监听时候只能删除命名函数，不能删除匿名

      		  // js当中 对象 是独立的 唯一的
        // 取消/删除事件监听 必须删除的是命名函数
        var fn1 = function(){
            alert(1);
        }

        var fn2 = function(){
            alert(1);
        }

        console.log(fn1==fn2) //false


        document.addEventListener('click',fn1)
        
        // 命名函数的删除（无法删除匿名函数）
        document.removeEventListener('click',fn1)
  • 事件执行顺序-冒泡顺序，捕获顺序

    • 事件执行顺序 --事件冒泡顺序从内到外依次冒泡执行

    • 事件捕获执行，事件监听的第三个参数为true。点击底层时候从外向内捕获，从内向外再冒泡

  • 事件监听相关配置(第三个参数)
    • capture 是否在捕获阶段执行
    • once 是否只执行一次
    • passive 阻止取消默认事件
      • 浏览器提供的默认行为，例如a标签点击会跳转、鼠标右键事件
      • 这个参数会阻止Event.preventDefault()函数生效

Event事件对象

  • 取消冒泡
    • 阻止事件往外执行
    • Event.stopPropagation() 取消冒泡
    • Event.cancelBubble = boolean 取消冒泡
  • Event.target、Event.currentTarget 事件源
    • Event.target获取当前点击事件的dom元素
    • Event.currentTarget 事件源，添加点击事件的dom 元素
  • 事件委托(事件代理)

    • 思路：利用一直存在与页面中的元素，给未来即将添加元素添加事件。利用e.target

    • 事件委托的优点

      1. 可减少需要添加事件绑定的元素
      2. 可给新增DOM元素添加事件（在不刷新页面的情况下）

    • 事件委托的缺点

      1. 事件处理函数中需要判断事件源增加逻辑复杂度
      2. 祖父级和事件源之间不能有阻止冒泡
    • mousenter、mouseleave 事件
      • mouseover mouseout 会触发事件冒泡，出现父级移出再移入的现象
      • mousenter、mouseleave 不会触发事件冒泡，不会在鼠标移动父子级切换过程中触发
    • 鼠标位置获取
      • Event.clientX、Event.clientY、鼠标距离可视区的距离
      • Event.pageX、Event.pageY 、鼠标距离可视区的距离 + 滚动条距离顶部的距离

contextmenu 鼠标右键事件

  • Event.preventDefault() 阻止默认事件
    • 阻止鼠标右键菜单弹出
    • 和事件监听passive 参数互相排斥
  • return false 阻止鼠标右键事件
    • window.oncontextmenu = function(){
    console.log(2);
    
    return false;
}
//这种方法可以阻止鼠标右键事件 ，不推荐
  • 自定义浏览器右键菜单
    • 先阻止后自定义

键盘事件

  • keydown、keyup 任何键按下或者抬起时候触发
  • Event.keyCode、Event.key
    • Event.keyCode 键值的代号
    • Event.key 键的具体值
  • Event.altKey、Event.ctrlKey、shiftKey
    • 功能键的布尔值
  • 制作组合键
  • 问题一：卡顿
    • 浏览器容错机制造成的卡顿问题：系统要区分用户是否连续输入，第一个到第二个之间有一个停顿时间
    • 思路：先开一个定时器，让div一直处于（往4个方向）准备移动的状态（初始4个方向的值都是false，div就保持在原地不动），当按下某个方向键，这个方向的值就改变为true，div就会开始往这个方向移动，松开方向键，这个方向的值就改变为false , div就停止这个方向移动了。
  • 问题二：控制元素移动时候可以同左上，右下的走，利用setInterval
    • 思考：什么时候需要setInterval 什么时候停止移动

鼠标拖拽事件

  • mousedown、mousemove、mouseup
    • mousemove鼠标移动
    • mousedown鼠标按下
    • mouseup鼠标抬起
  • 拖拽公式
    • 拖拽公式：元素当前位置 = (鼠标当前位置 - 鼠标初始位置) + 元素初始位置
  • 获取xy原始值
    • parseFloat(getComputedStyle(el)[attr]);
  • 拖拽问题修复
    • 移动太快，鼠标脱离元素造成的bug.
      • 解决，移动事件加给window 让他不能脱离
    • 元素和文本元素同时存在时候拖动元素，会选中文字
      • 解决，在鼠标添加点击拖拽的事件的函数里面添加e.preventDefault(); 阻止浏览器的默认行为
  • 限制范围拖拽
    • 当前位置和最小值比较
    • 当前位置和最大值比较
  • 复制拖拽
    • cloneNode();

鼠标滚轮事件

  • mousewheel 和 DOMMouseScroll 事件

    • mousewheel 谷歌浏览器鼠标滚轮的事件

    • DOMMouseScroll 火狐浏览器鼠标滚轮的事件

    • 方法：万能的封装：两个方法都添加，封装一个方法

      //调用滚轮函数 
mouseWheel(document.body,function(){
            console.log(1)
        })

        // 鼠标滚轮函数封装
       function mouseWheel(obj,downFn,upFn){
            // 滚轮滚动执行 火狐事件
            obj.addEventListener('DOMMouseScroll',function(e){
                // console.log(e.detail)
                if(e.detail>0){
                    // console.log('向下')
                    downFn&&downFn.call(obj)
                }else{
                    // console.log('向上')
                    upFn&&upFn()
                }
            })
            // 滚轮滚动执行 chrome
            obj.addEventListener('mousewheel',function(e){
                // console.log(e.wheelDelta)

                if(e.wheelDelta>0){
                    // console.log('向上')
                    upFn&&upFn()
                }else{
                    // console.log('向下')
                    downFn&&downFn()
                }
            })
       }
  • Event.wheelDelta 和 Event.detail 滚轮方向获取
    • Event.wheelDelta 正值是向上滚动 --chorme
    • Event.wheelDelta 负值是向下滚动 --chorme
    • Event.detail 负值是向上滚动 -- firefox
    • Event.detail 正值是向下滚动 -- firefox

其他事件

  • dblclick 双击事件
  • 表单事件
    • blur、光标失去焦点
    • focus、光标获得焦点
    • change、值改变的时候触发，多用与checkbox radio ,
    • input、值改变的时候触发，多用与text ,
    • submit、提交事件，用于form表单 + submit button
    • reset、重置表单事件

拓展

碰撞检测和拖拽选框

github case

github.com/Katrina-Den…

avatar
文章
阅读
粉丝