事件触发
鼠标事件
-
click 单击鼠标
-
dbclick 双击鼠标
-
mousedown 鼠标被按下未弹起 —— 拖拽开始的处理
-
mouseup 释放鼠标按钮 —— 拖拽结束的处理
-
mousemove 移动鼠标 —— 拖拽的位移计算
-
mouseover 鼠标移动到某个元素上方时
-
mouseenter 鼠标首次从元素外部移入元素范围内触发
-
mouseleave 鼠标移出
键盘类型事件
- keydown 键盘按下任意按键时触发 => 按住不放,会重复触发 - 按钮的动作回调
- keyup 当用户释放键盘上的按键
- keypress 键盘按下任意字符时触发 => 按住不放,会重复触发 - 字符输入的回调
HTML事件
1) 内容型
select 选择文本框(input textarea)中一个或多个字符触发
change 选择文本框内容改变且失去焦点
input 输入内容后回调
focus 聚焦后触发
blur 失去焦点后触发
2)版面内容型
submit form元素上提交按钮
reset form元素上重置按钮
3) 窗口型
load 当前窗口完全加载后 => 触发是在window上
unload 当前页面完全卸载后 => 触发是在window上
resize 窗口大小变化时,触发回调
scroll 滚动触发
事件传播
事件冒泡
当子事件触发时,会沿着关联关系找到父级再次触发,直至触发到根元素。
事件捕获
在捕获的过程中,最外的元素先被触发,然后依次向内执行,直至触发最内元素。
DOM事件流从事件捕获——目标触发——事件冒泡,当要阻止大量底层事件冒泡时,就使用stopPropagation
事件绑定
- DOM0级
将一个函数赋值给一个事件处理属性,直接进行行内绑定(onclick) - DOM2级
DOM2级事件在DOM0级时间段额基础上弥补了一个处理处理程序(addEventListener / removeEventListener)
事件委托 / 代理
当元素节点过多时,给每个元素都挂载监听器,效率会很低。通过dom事件流原理,讲监听事件绑定在父元素上,进行捕获,事件触发后,判断target是否是当前需要的子元素,再执行相关代码。
document.addEventListener('DOMContentLoaded', function() {
let app = document.getElementById('list');
// 利用dom事件流,先捕获再冒泡
app.addEventlistener('click', function(e) {
if(e.target & e.target.nodeName === 'LI') {
let item = e.target;
console.log('click item' + item.innerHTML);
}
})
})