JavaScript 的事件流模型有哪些?
- 事件冒泡:由最具体的元素接收,并往上传播
- 事件捕获:由最不具体的元素接收,并往下传播
- DOM 事件流:事件捕获 -> 目标阶段 -> 事件冒泡
如何阻止事件冒泡?
function stopBubble(e) {
if (e.stopPropagation) {
e.stopPropagation()
} else {
window.event.cancelBubble = true;
}
}
如何阻止事件默认行为?
function stopDefault(e) {
if (e.preventDefault) {
e.preventDefault();
} else {
window.event.returnValue = false;
}
}
⭐ 什么是事件委托?
当子元素都需要绑定相同事件时,可以将事件绑在父元素上,优点有:
- 绑定在父元素,则只需绑定一次,节省性能
- 后续新增的子元素也可以触发父元素绑定的事件
鼠标事件有哪些?
事件 |
说明 |
click |
单机鼠标左键触发 |
dbclick |
双击鼠标左键触发 |
mousedown |
单机鼠标任意一个按键都触发 |
mouseup |
松开任意鼠标按键时触发 |
mouseover |
鼠标指针出某个元素到另一个元素上时触发 |
mouseout |
鼠标指针位于某个元素上且将要移出元素边界时触发 |
mousemove |
鼠标在某个元素上时持续发生 |
mouseenter |
鼠标进入某个元素边界时触发 |
mouseleave |
鼠标离开某个元素边界时触发 |
键盘事件有哪些?
注明:event 对象上的 keyCode 属性,是按下的按键的 ASCLL 值,通过这个值可辨别是按下哪个按键。ASCLL 表在此 ASCII 码一览表,ASCII 码对照表
事件 |
说明 |
onkeydown |
某个键盘按键被按下时触发 |
onkeyup |
某个键盘按键被松开时触发 |
onkeypress |
某个按键被按下时触发,不监听功能键,如ctrl,shift |
JS中鼠标事件的各个坐标?
属性 |
说明 |
兼容性 |
offsetX |
以当前的目标元素左上角为原点,定位x轴坐标 |
除Mozilla外都兼容 |
offsetY |
以当前的目标元素左上角为原点,定位y轴坐标 |
除Mozilla外都兼容 |
clientX |
以浏览器可视窗口左上角为原点,定位x轴坐标 |
都兼容 |
clientY |
以浏览器可视窗口左上角为原点,定位y轴坐标 |
都兼容 |
pageX |
以doument对象左上角为原点,定位x轴坐标 |
除IE外都兼容 |
pageY |
以doument对象左上角为原点,定位y轴坐标 |
除IE外都兼容 |
screenX |
以计算机屏幕左上顶角为原点,定位x轴坐标(多屏幕会影响) |
全兼容 |
screenY |
以计算机屏幕左上顶角为原点,定位y轴坐标 |
全兼容 |
layerX |
最近的绝对定位的父元素(如果没有,则为 document 对象)左上顶角为元素,定位 x 轴坐标 |
Mozilla 和 Safari |
layerY |
最近的绝对定位的父元素(如果没有,则为 document 对象)左上顶角为元素,定位 y 轴坐标 |
Mozilla 和 Safari |
target 和 currentTarget 的区别?