7.事件

事件类型

鼠标事件
onclick 点击
ondblclick 双击
onmouseenter onmouseleave
鼠标移入移出 (不支持冒泡
onmouseover onmouseout 鼠标移入移出 (支持冒泡
onmousemove
鼠标移动
onmousedown onmouseup 鼠标按下抬起
oncontextmenu 鼠标右键
onselectstart 鼠标开始选中
表单事件
onfocus (输入框)获取焦点
onblur (输入框)失去焦点
onchange 当表单元素(单选按钮,复选框,select)发生改变时触发
oninput 当输入框中的内容发生改变时触发
onsubmit 当提交表单内容时触发
onreset 当重置表单内容时触发
键盘事件
onkeydown 按下键盘按键
onkeyup 松开键盘按键
onkeypress 按下松开
*窗口事件

onload 当网页内容加载完毕的时候触发
onresize 窗口大小发生改变时触发
onscroll 当滚动窗口的滚动条时触发

绑定事件的方式

  • DOM零级事件和二级事件的区别:
    • 0级:onclick(绑定事件)写在标签内,或获取元素绑定事件
    • 2级:获取元素,以监听addEventListener的方式来绑定事件
    • 区别:如果同一个元素绑定多个相同事件,DOM0级事件会覆盖,执行最后的事件;DOM2级事件会依次执行所有事件;DOM0级事件兼容性更好,代码简洁
    • 注意:DOM0级事件可以和DOM2级事件共存
  • 移除事件时DOM的区别
    • DOM0级:解除绑定设置为null即可
    • DOM2级:因为是通过方法绑定的事件,所以必须明确移除的事件函数
  • 冒泡,捕获,事件监听时,DOM零级事件和二级事件的区别
    • 0级:只能触发冒泡,不能触发捕获阶段
    • 2级:可以用监听方法的第三个参数来表示冒泡false,捕获true

事件流的三个阶段

事件流:当一个节点产生一个事件时,该事件会在目标节点(产生事件的节点)与根节点之间
按照一定顺序进行传播,传播过程中所经过的节点都会收到该事件,这个过程就称之为事件流。
事件流的三个阶段
1.捕获阶段:从window对象依次向下传播(父到子),达到目标节点,即为捕获
捕获阶段不影响事件函数的执行
2.目标阶段
3.冒泡阶段:从目标节点依次向上传播(子到父),到达window对象,即为冒泡。
阻止冒泡 // e.stopPropagation()
e.cancelBubble = true; //IE使用

事件对象event

  • 只有触发时才存在

    事件委托:利用冒泡来实现,优势:减少事件注册,节省内存空间,执行效率提高;新增元素节点时,不需要给新增节点绑定事件