简单总结一下js中的事件

• 事件处理程序
• 事件委托
• 各种各样的事件总结
• 事件中的this指向

事件处理程序

1. 直接在DOM中绑定事件

<input type="button"  onchange="hello()">
<script>
function hello(){
    console.log(this);
}
</script>

缺点： 这类事件不能移除

此方法this指向window

image.png

2. 在js中添加事件处理程序（DOM0级别事件处理程序）

<input type="text" id="input">

<script>
    let _input = document.getElementById('input')
    _input.onchange = function() {
        console.log(this)
    }
</script>

优点：使得HTML和js代码完全分离，方法可以移除（赋值为null）
缺点： 不能同时处理多个事件

此时的this指向当前元素

image.png

DOM2级事件处理程序（addEventListener）

element.addEventListener(event, function, useCapture)
event : （必需）事件名，支持所有DOM事件。
function：（必需）指定要事件触发时执行的函数。
useCapture：（可选）指定事件是否在捕获或冒泡阶段执行。true，捕获。false，冒泡。默认false。

关于事件冒泡和事件捕获
W3C规范中定义了3个事件阶段，依次是捕获阶段、目标阶段、冒泡阶段。
事件捕获是从外往里逐个触发
事件冒泡是从里往外逐个触发
事件的执行顺序 捕获阶段 > 目标阶段 > 冒泡阶段

<input type="text" id="input">
<script>
    let _input = document.getElementById('input')
    _input.addEventListener('change', function() {
        console.log(this, '---change')
    }, false)
    _input.addEventListener('click', function() {
        console.log(this, '---click')
    }, false)
</script>

优点：

1. DOM2级事件处理方法可以添加多个事件处理程序，多个事件相互不影响
2. 事件可以移除。移除公式：元素节点.removeEventListener（事件名，函数名，事件流）

注意：移除时，函数的参数要与添加时一致，相应事件的函数不能是匿名函数

this指向当前元素

image.png

事件委托

通过在上级节点监听事件处理下级节点

其需要两个条件，事件和上级节点

利用事件冒泡的特性，当当前节点触发某类事件时，也会从当前节点开始逐级向上触发父级节点的同类事件

document.getElementById("div1").onclick = function(e){
    e = e || window.event;
    var curDom = e.target;     //event对象的target属性可以返回触发当前事件的dom对象
    switch(curDom.id){  //这里输出其id属性作为比较值
        case "btn1":
            console.log(1);
        break
        case "btn2":
            console.log(2);
        break
        case "btn3":
            console.log(3);
        break
        default:
            break;
    }
    console.log(e.target.innerHTML);
    console.log(this);
};

各种各样的事件

touch事件未收录，请百度...