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使用