JavaScript 的事件流模型有哪些?

如何阻止事件冒泡?

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 的区别?