JavaScript基础事件与事件委派

1.事件

1.1 事件的概念

JS中事件是 计算机与用户交互的行为。例如：点击事件、输入事件、鼠标移入移出事件等。

1.2 事件四要素

1.事件源：事件发生的源头--相当于肇事者（通常谁绑定事件，事件源就是谁）

2.事件类型：描述事件发生的类型--相当于事件的性质（交通事故）

3.事件处理函数：事件发生时执行的函数（功能代码）--相当于事件的处理方案

4.事件对象：记录事件发生的相关信息，发生事件时系统自动进行创建--相当于目击者

2.注册事件的3种方式

1.在标签上注册事件
    <button onclick="函数名()">点我</button>

2.在DOM上注册事件
    const node = document.querySelector('选择器')
    // 方式1
    node.onclick = function(){
        // 函数体(功能代码)
    }
    // 方式2
    function fn(){}
    node.onclick = fn

3.W3C标准注册事件【常用】
    const node = document.querySelector('选择器')
    // 方式1
    node.addEventListener('事件类型type', function(event/e事件对象){
        // 函数体(功能代码)
    }, useCapture是否使用捕获)
    // 方式2
    function fn(){}
    node.addEventListener('事件类型type', fn, useCapture是否使用捕获)

3.常用事件

4.事件对象

targetNode.addEventListener('事件类型type', function(event/e事件对象){
    // 事件对象 event
    // 事件源 event.target
    // 事件类型 event.type
    // 阻止默认事件方法 event.preventDefault()，在DOM与W3C中均能生效
    // 阻止事件传播 event.propagation()
})

5.事件机制

1.绑定事件时默认为冒泡事件（useCapture为false）

2.捕获事件比冒泡事件优先执行

3.捕获事件：事件从顶层（父）一层层向底层（子）传播

4.冒泡事件：事件从底层（子）一层层向顶层（父）传播

6.事件委派

1.为什么要使用事件委派？【掌握】

用户交互时产生的节点，无法在页面加载时绑定上事件。

2.什么是事件委派？【重点】

2-1.将事件绑定在页面加载时就存在的公共父节点上

2-2.利用事件冒泡机制，事件从底层一层层向上传播

2-3.通过事件对象反查事件源，再根据事件源的nodeName等属性进行判断

7.事件处理函数返回值

事件处理函数返回值一般用于控制浏览器默认事件，return true允许默认行为，return false阻止默认行为
注意：处理函数返回值在W3C标准注册事件中不生效！！！要使用e.preventDefault()方法阻止！！！

// 1-1.a标签-标签绑定事件
<a href="https://www.baidu.com" onclick="return fn()" >点击跳转</>
// 注意：onclick后要使用return 函数名()的格式！！！
function fn(){ 
    return false; // 阻止默认浏览器行为
}
// 1-2.a标签-dom绑定事件
const aNode = document.querySelector('a')
aNode.onclick = function(){
    return false; // 阻止浏览器默认行为
}
// 2.form表单，一般用于form提交时进行表单验证阻止跳转
const formNode = document.querySelector('form')
formNode.onsubmit = function(){
    return false; // 阻止浏览器默认行为
}