JS事件与事件委托

文章目录

1.JS事件类型 - 三大类

1.鼠标类型

click	单击鼠标
dbclick	双击鼠标
mousedown	鼠标被按下未弹起
mouseup	释放鼠标按钮
mousemove	移动鼠标
mouseenter	鼠标首次从元素外部移入元素范围内触发
mouseleave	鼠标移出

2.键盘类型事件

keydown	键盘按下任意字符时触发 => 按住不放，会重复触发
keyup	当用户释放键盘上的按钮
keypress	键盘按下任意按键时触发 => 按住不放，会重复触发

keydown 与 keypress区别
keydown为按钮的动作回调，即按下按钮后触发；keypress为字符输入的回调，即字符输入后回调

3.HTMl类型

a.内容类

select	选择文本框（input textarea）中一个或多个字符触发
change	选择文本框内容改变且失去焦点
input	输入内容后回调
focus	聚焦后触发
blur	失去焦点后触发

b.版面内容型

submit	form元素上提交按钮
reset	form元素上重置按钮

c.窗口型

load	当前窗口完全加载后 => 触发是在window上
unload	当前页面完全卸载后 => 触发是在window上
resize	窗口大小变化时，触发回调
scroll	滚动触发

window.load / window.unload

2.事件的传播

1.事件的传播模型：冒泡&捕获

捕获的粒度是 —— 从粗到细（从外到内）
冒泡的粒度是 —— 从细到粗（从内到外）

2.DOM的事件流 - 层级事件的传播上

事件捕获阶段 => 目标触发阶段 => 事件冒泡阶段

问题：冒泡会导致大量底层事件被上层感知从而产生困扰
冒泡阻断 - stopPropagation

3.事件绑定 - DOM0级与DOM2级事件

1.DOM0级事件

直接进行内绑定

 <input type="button" id="myButton" value="DOM0"
            onclick="console.log('click DOM0 button');">

2.DOM2级事件

利用addEventListener / removeEventListener

target.addEventListener(type, listener[, useCapture])

问题：DOM0 & DOM2优先级问题
DOM2 强度更大，会覆盖DOM0


<html lang="en">
    <body>
        <button id="clickMe"> click me </button>

        <input type="button" id="myButton" value="DOM0"
            onclick="console.log('click DOM0 button');">
    </body>
</html>

<script>
 document.getElementById('myButton').onclick = function() {
    
    
        console.log('click DOM2 button');
    }
</script>

在这里插入图片描述

4.事件委托 / 代理

addEventLIstenr(事件类型,事件处理函数,是否捕获[默认false])

问题：有一个列表，点击每个节点的时候，实现打印节点的内容

 <ul id="list">
        <li class="item">js</li>
        <li class="item">es</li>
        <li class="item">ts</li>
        <li class="item">react</li>
        <li class="item">vue</li>
    </ul>
    
  document.addEventListener('DOMContentLoaded', function() {
    
    
        let app = document.getElementById('list');
        let items = app.getElementsByClassName('item');

        for(let item of items) {
    
    
            item.addEventListener('click', function() {
    
    
                console.log('click item' + item.innerHTML);
            })
        }
    })

DOMContentLoaded 解析：当初始HTML文档已完全加载和解析时，将触发DOMContentLoaded事件，而不需要等待样式表，图像和子框架页面加载（事件可以用来检测HTML页面是否完全加载完毕(fully-loaded)）。

问题：如果当前的节点列表非常大，每个节点挂在监听器，效率非常低

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