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

  • 只有触发时才存在

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