JavaScript 事件

事件级别

DOM0级事件处理程序（后添加的会覆盖之前添加的事件）
DOM2级事件处理程序（可以为同一元素绑定多个事件，事件执行顺序：先添加的先执行）

DOMO    element.onclick=function()}
DOM2    element.addEventListener('click' ,function(){},false) //false（默认）冒泡阶段触发
DOM3    element.addEventListener("keyup' ,function(){},false)

//DOM 0 级事件
let para = document.getElementById("para");
para.onclick = function () {
    alert("1");
};
para.onclick = function () {
    alert("2");
};

//DOM2 级事件
let para = document.getElementById("para");
para.addEventListener("click", function () {
    alert("1");
});
para.addEventListener("click", function () {
    alert("2");
});

事件类型

onload 和 onunload 事件

当用户进入后及离开页面时，会触发 onload 和 onunload 事件。
onload 事件可用于检测访问者的浏览器类型和浏览器版本，然后基于该信息加载网页的恰当版本。
onload 和 onunload 事件可用于处理 cookie。

onchange 事件

onchange 事件经常与输入字段验证结合使用。

//当用户改变输入字段内容时，会调用 upperCase() 函数。



    
    Title

onmouseover 和 onmouseout 事件

onmouseover 和 onmouseout 事件可用于当用户将鼠标移至 HTML 元素上或移出时触发某个函数：




    
    Title

onmousedown, onmouseup 以及 onclick 事件

onmousedown, onmouseup 以及 onclick 事件构成了完整的鼠标点击事件。

首先当鼠标按钮被点击时，onmousedown 事件被触发；然后当鼠标按钮被释放时，onmouseup 事件被触发；最后，当鼠标点击完成后，onclick 事件被触发。

演示

事件监听器

定义：事件句柄是指事件发生时要进行的操作。

addEventListener() 方法

为指定元素指定事件处理程序。

element.addEventListener(event, function, useCapture);

event:事件类型
function:事件句柄
useCapture：指定使用事件冒泡还是事件捕获。此参数是可选的。默认值是 false：冒泡传播；true：捕获传播。

注意：请勿对事件使用 "on" 前缀；请使用 "click" 代替 "onclick"。
说明：

addEventListener() 方法为元素附加事件处理程序而不会覆盖已有的事件处理程序。
能够向一个元素添加多个事件处理程序。
能够向一个元素添加多个相同类型的事件处理程序，例如两个 "click" 事件。
能够向任何 DOM 对象添加事件处理程序而非仅仅 HTML 元素，例如 window 对象。

removeEventListener()方法

删除事件监听器。如果要移除事件句柄，addEventListener() 的执行函数必须使用外部函数
示例：

para

IE 8、Opera 6.0 及其更早版本不支持 addEventListener() 和 removeEventListener() 方法。不过，对于这些特殊的浏览器版本，您可以使用 attachEvent() 方法向元素添加事件处理程序，并由 detachEvent() 方法删除：

element.attachEvent(event, function);
element.detachEvent(event, function);

跨浏览器解决方案：

let x = document.getElementById("myBtn");
if (x.addEventListener) {                    // 针对主流浏览器，除了 IE 8 及更正版本
    x.addEventListener("click", myFunction);
} else if (x.attachEvent) {                  // 针对 IE 8 及更早版本
    x.attachEvent("onclick", myFunction);
}

事件模型

事件流

事件流：当前页面与用户交互的过程中，事件是如何传到野蛮上的。
事件流经过三个阶段：事件通过捕获到达目标，再从目标元素冒泡到Window对象

DOM事件捕获的具体流程

事件代理（事件委托）

事件代理，又称事件委托（Delegation）。当事件触发时，把要做的事委托给父元素（或父元素的父元素）来处理。利用事件的冒泡机制，管理某一类型元素上的所有事件。

示例：

要求：给每个 li 添加点击事件，弹出相应内容
分析：如果我们通过for循环为每个li单独绑定click事件，由于元素数量过多无疑会造成网页性能下降，有内存泄露的风险。
如果将click事件绑定在ul元素上，只需要绑定一次事件，通过Event对象的target属性返回事件源（即事件的目标节点），可以做不同的处理，这就是事件代理，原本需要目标元素处理的事件，交由其父元素代为执行。采用事件代理避免了频繁的操作DOM，优化效果可想而知。

Event 对象

Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

Event 对象的常见应用

event.preventDefault() //阻止链接默认跳转的行为
event.stopPropagation() //阻止冒泡的行为
event.stoplmmediatePropagation() //事件优先级相关。当一个按钮“点击”注册了两个事件，在第一个事件中载这句话会阻止第二个事件的发生。
event.currentTarget //当前所绑定的事件
event.target //返回触发此事件的元素（事件的目标节点）。

自定义事件 / 模拟事件

（面试中非常重要的点）


    para

CustomEvent 和 Event 的区别：

CustomEvent 除了可以指定事件名，还可以在后面跟一个object 做指定参数。

let para = document.getElementById("para");
let eve = new CustomEvent("pillar", {
    color: "red",
    sport: {
        run: "running",
    }
});
para.addEventListener("pillar", function (event) {
    console.log(event);
});
para.dispatchEvent(eve);

编写一个通用的事件监听函数（兼容普通绑定和事件代理）

function bindEvent(elem, type, selector, fn) {
    if (fn == null) {
        fn = selector
        selector = null
    }
    elem.addEventListener(type, event => {
        const target = event.target
        if (selector) {
            // 代理绑定
            if (target.matches(selector)) { //判断当前创建的dom元素符不符合一个css选择器
                fn.call(target, event)
            }
        } else {
            // 普通绑定
            fn.call(target, event)
        }
    })
}