简单总结一下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);
};

各种各样的事件

事件名称	内容	备注
onload（页面加载事件）	onload事件将会在页面或者图像加载完成后立即执行	如果在onload事件中，想要加载多个函数，有两种方法可以实现;1.将多个函数同时封装成一个函数，用onload调用；2.直接在onload事件中加载多个函数，每个函数之间用“，”隔开；
onunload（卸载事件）	onunload事件在整个页面卸载时触发（右上角X不会触发），只要用户从一个页面切换到另一个页面，就会触发	只有IE有效
onresize（窗口变化事件）	窗口或者框架的大小变化时在window或者框架上触发	无
onscroll （界面滚动事件）	当滚动条滚动时触发	无
select（选择input或textarea中的一个或多个字）	当用户选择inp或者textarea中的一个或多个字的时候触发（只要选中就触发）	无
change（当input或textarea或select中内容改变或失去焦点)	当用户在input标签，或者textarea或select内内容改变且失去焦点后触发	无
focus（聚焦事件）	当页面或元素获得焦点时在window及相关元素上面触发	无
blur（离焦事件）	当页面或元素离开焦点时在window及相关元素上面触发	无
submit（点击提交按钮时触发）	当用户点击提交按钮时在<form>元素上触发	无
reset（点击重置按钮触发）	当用户点击重置按钮时在<from>元素上触发	无
keydown	当按下键盘任意按键时触发（持续调用）	无
keyup	当抬起键盘任意按键时触发	无
keypress	按下非（ctrl,alt,shift,capsLock,NumLock）时调用（持续触发）；	无
click	鼠标点击事件	无
dblclick	鼠标双击事件	无
mouseover	光标划过事件	无
mouseout	光标划出事件	无
mouseup	鼠标抬起事件	无
mousedown	鼠标按下事件	无

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