JS事件总结超详细-思维导图
2022-11-26 21:33:12
michael007js
96
不想看思维导图的可以看下方内容,也是思维导图上的全部内容
事件绑定(监听)
- 直接绑定
- obj.on事件名=函数名
- 高级事件绑定
- addEventListener
- 语法:obj.addEventListener(事件名,函数名,是否捕获)
- 注意:事件名无前缀on 是否捕获参数默认为false
- addEventListener
- 直接绑定
事件解绑
- 直接绑定解绑
- obj.on事件名=null
- 高级事件绑定的解除
- removeEventListener
- 语法:obj.removeEventListener(事件名,函数名,是否捕获)
- 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对象上监听。
- pageshow事件在页面加载时触发,包括第一次加载和从缓存加载两种情况,
网页状态事件
- 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。