前端那些事系列之基础篇事件（九）

事件触发

鼠标事件

• 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);
            }
        })
    })