随笔博文

JS事件总结超详细-思维导图

2022-11-26 21:33:12 michael007js 96

图片关键词

不想看思维导图的可以看下方内容,也是思维导图上的全部内容


  • 事件绑定(监听)

    • 直接绑定
      • obj.on事件名=函数名
    • 高级事件绑定
      • addEventListener
        • 语法:obj.addEventListener(事件名,函数名,是否捕获)
        • 注意:事件名无前缀on 是否捕获参数默认为false
  • 事件解绑

    • 直接绑定解绑
      • obj.on事件名=null
    • 高级事件绑定的解除
      • removeEventListener
        • 语法:obj.removeEventListener(事件名,函数名,是否捕获)
  • 事件对象

    • event

      • 功能:表示事件的状态,如事件在其中发生的元素,键盘的按键状态,鼠标的位置,鼠标按钮的状态
      • 属性:
        • clientX:返回鼠标位置对于浏览器窗口左上角的水平坐标(单位像素)
        • clientY: 返回鼠标位置相对于浏览器窗口左上角的垂直坐标(单位像素)
        • movementX: 返回当前位置与上一个mousemove事件之间的水平距离(单位像素)
        • movementY: 返回当前位置与上一个mousemove事件之间的垂直距离(单位像素)
        • screenX: 返回鼠标位置相对于屏幕左上角的水平坐标(单位像素)
        • screenY:返回鼠标位置相对于屏幕左上角的垂直坐标(单位像素)
        • offsetX:返回鼠标位置与目标节点左侧的padding边缘的水平距离(单位像素)
        • offsetY:返回鼠标位置与目标节点上方的padding边缘的垂直距离(单位像素)
        • pageX:返回鼠标位置与文档左侧边缘的距离(单位像素)
        • pageY:返回与文档上侧边缘的距离(单位像素)
        • target:返回事件的目标节点(触发该事件的节点)
  • 事件停止传播与阻止行为

    • 停止事件传播
      • ev.stopPropagation()
    • 阻止行为
      • ev.preventDefault()
  • 鼠标事件" class="reference-link">鼠标事件

    • click:按下鼠标(通常是按下主按钮)时触发。
    • dblclick:在同一个元素上双击鼠标时触发。
    • mousedown:按下鼠标键时触发。
    • mouseup:释放按下的鼠标键时触发。
    • mousemove:当鼠标在一个节点内部移动时触发。当鼠标持续移动时,该事件会连续触发。为了避免性能问题,建议对该事件的监听函数做一些限定,比如限定一段时间内只能运行一次。
    • mouseenter:鼠标进入一个节点时触发,进入子节点不会触发这个事件(详见后文)。
    • mouseover:鼠标进入一个节点时触发,进入子节点会再一次触发这个事件(详见后文)。
    • mouseout:鼠标离开一个节点时触发,离开父节点也会触发这个事件(详见后文)。
    • mouseleave:鼠标离开一个节点时触发,离开父节点不会触发这个事件(详见后文)。
    • contextmenu:按下鼠标右键时(上下文菜单出现前)触发,或者按下“上下文菜单键”时触发。
    • wheel:滚动鼠标的滚轮时触发,该事件继承的是WheelEvent接口。
      • 属性:wheelDelta 向上:120 向下:-120
  • 键盘事件

    • keydown:按下键盘时触发。
    • keypress:按下有值的键时触发,即按下 Ctrl、Alt、Shift、Meta 这样无值的键,这个事件不会触发。对于有值的键,按下时先触发keydown事件,再触发这个事件。
    • keyup:松开键盘时触发该事件。
    • 相关属性:
      • KeyboardEvent.altKey:是否按下 Alt 键
      • KeyboardEvent.ctrlKey:是否按下 Ctrl 键
      • KeyboardEvent.metaKey:是否按下 meta 键(Mac 系统是一个四瓣的小花,Windows 系统是 windows 键)
      • KeyboardEvent.shiftKey:是否按下 Shift 键
      • KeyboardEvent.key(最简单快捷)
        • 返回一个字符串,表示按下的键名。该属性只读。
        • 如果按下的键代表可打印字符,则返回这个字符,比如数字、字母。
        • 如果按下的键代表不可打印的特殊字符,则返回预定义的键值,比如 Backspace,Tab,Enter,Shift,Control,Alt,CapsLock,Esc,Spacebar,PageUp,PageDown,End,Home,Left,Right,Up,Down,PrintScreen,Insert,Del,Win,F1~F12,NumLock,Scroll 等。
        • 如果同时按下一个控制键和一个符号键,则返回符号键的键名。比如,按下 Ctrl + a,则返回a;按下 Shift + a,则返回大写的A。
      • KeyboardEvent.repeat:返回一个布尔值,代表该键是否被按着不放
  • 进度事件

    • abort:外部资源中止加载时(比如用户取消)触发。如果发生错误导致中止,不会触发该事件。
    • error:由于错误导致外部资源无法加载时触发。
    • load:外部资源加载成功时触发。
    • loadstart:外部资源开始加载时触发。
    • loadend:外部资源停止加载时触发,发生顺序排在error、abort、load等事件的后面。
    • progress:外部资源加载过程中不断触发。
    • timeout:加载超时时触发。
  • 表单事件

    • blur:元素失去焦点时触发
    • focus:元素获得焦点时触发
    • change:表单内容发生改变时触发
    • reset:表单重置时触发
    • submit:元素提交时触发
    • input:元素获取用户输入时触发
    • search:用户向搜索域输入文本时触发
    • select:用户选取文本时触发
  • 触摸事件

    • Touch:一个触摸点
    • TouchList:多个触摸点的集合
    • TouchEvent:触摸引发的事件实例
  • 拖拉事件

    • drag:拖拉过程中,在被拖拉的节点上持续触发(相隔几百毫秒)。
    • dragstart:用户开始拖拉时,在被拖拉的节点上触发,该事件的target属性是被拖拉的节点。通常应该在这个事件的监听函数中,指定拖拉的数据。
    • dragend:拖拉结束时(释放鼠标键或按下 ESC 键)在被拖拉的节点上触发,该事件的target属性是被拖拉的节点。它与dragstart事件,在同一个节点上触发。不管拖拉是否跨窗口,或者中途被取消,dragend事件总是会触发的。
    • dragenter:拖拉进入当前节点时,在当前节点上触发一次,该事件的target属性是当前节点。通常应该在这个事件的监听函数中,指定是否允许在当前节点放下(drop)拖拉的数据。如果当前节点没有该事件的监听函数,或者监听函数不执行任何操作,就意味着不允许在当前节点放下数据。在视觉上显示拖拉进入当前节点,也是在这个事件的监听函数中设置。
    • dragover:拖拉到当前节点上方时,在当前节点上持续触发(相隔几百毫秒),该事件的target属性是当前节点。该事件与dragenter事件的区别是,dragenter事件在进入该节点时触发,然后只要没有离开这个节点,dragover事件会持续触发。
    • dragleave:拖拉操作离开当前节点范围时,在当前节点上触发,该事件的target属性是当前节点。如果要在视觉上显示拖拉离开操作当前节点,就在这个事件的监听函数中设置。
    • drop:被拖拉的节点或选中的文本,释放到目标节点时,在目标节点上触发。注意,如果当前节点不允许drop,即使在该节点上方松开鼠标键,也不会触发该事件。如果用户按下 ESC 键,取消这个操作,也不会触发该事件。该事件的监听函数负责取出拖拉数据,并进行相关处理。
  • beforeunload事件

    • 在窗口、文档、各种资源将要卸载前触发。它可以用来防止用户不小心卸载资源。
  • unload事件

    • 在窗口关闭或者document对象将要卸载时触发。它的触发顺序排在beforeunload、pagehide事件后面。
  • session历史事件

    • pageshow事件在页面加载时触发,包括第一次加载和从缓存加载两种情况,
      • 第一次加载时,它的触发顺序排在load事件后面。从缓存加载时,load事件不会触发
      • 第一次加载时,它的触发顺序排在load事件后面。从缓存加载时,load事件不会触发
    • pagehide事件与pageshow事件类似,当用户通过“前进/后退”按钮,离开当前页面时触发
    • popstate事件在浏览器的history对象的当前记录发生显式切换时触发
    • hashchange事件在 URL 的 hash 部分(即#号后面的部分,包括#号)发生变化时触发。该事件一般在window对象上监听。
  • 网页状态事件

    • DOMContentLoaded 事件 网页下载并解析完成以后,浏览器就会在document对象上触发
    • readystatechange事件当 Document 对象和 XMLHttpRequest 对象的readyState属性发生变化时触发。
  • 窗口事件

    • scroll事件 在文档或文档元素滚动时触发,主要出现在用户拖动滚动条。
    • resize事件在改变浏览器窗口大小时触发,主要发生在window对象上面
    • fullscreenchange事件在进入或退出全屏状态时触发,该事件发生在document对象上面。
    • fullscreenerror事件在浏览器无法切换到全屏状态时触发。
  • 剪贴板事件

    • cut:将选中的内容从文档中移除,加入剪贴板时触发。
    • copy:进行复制动作时触发。
    • paste:剪贴板内容粘贴到文档后触发。
  • 焦点事件

    • focus:元素节点获得焦点后触发,该事件不会冒泡。
    • blur:元素节点失去焦点后触发,该事件不会冒泡。
    • focusin:元素节点将要获得焦点时触发,发生在focus事件之前。该事件会冒泡。
    • focusout:元素节点将要失去焦点时触发,发生在blur事件之前。该事件会冒泡。
    • 这四个事件的事件对象都继承了FocusEvent接口。FocusEvent实例具有以下属性。
    • FocusEvent.target:事件的目标节点。
    • FocusEvent.relatedTarget:对于focusin事件,返回失去焦点的节点;对于focusout事件,返回将要接受焦点的节点;对于focus和blur事件,返回null。
    • 注意事项:由于focus和blur事件不会冒泡,只能在捕获阶段触发,所以addEventListener方法的第三个参数需要设为true。
首页
关于博主
我的博客
搜索