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() 函数。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="text" id="fname" onchange="upperCase()">
<script>
    function upperCase() {
        let fname = document.getElementById("fname");
        fname.value = fname.value.toUpperCase();
    }
</script>
</body>
</html>

onmouseover 和 onmouseout 事件

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            text-align: center;
            font-size: 30px;
            background: #0b6cbc;
        }
    </style>
</head>
<body>
    <div class="box" onmouseover="mOver(this)" onmouseout="mOut(this)"></div>
    <script>
        function mOver(obj){
            obj.innerHTML = "你把鼠标移上来了"
        }
        function mOut(obj){
            obj.innerHTML = "你把鼠标移出去了"
        }
    </script>
</body>
</html>

onmousedown, onmouseup 以及 onclick 事件

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

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

<div class="box" onmousedown="mDown(this)" onmouseup="mUp(this)">演示</div>
<script>
    function mDown(obj) {
        obj.innerHTML = "你点下去了";
    }

    function mUp(obj) {
        obj.innerHTML = "你的点击释放了";
    }

</script>

事件监听器

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

addEventListener() 方法

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

element.addEventListener(event, function, useCapture);

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

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

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

removeEventListener()方法

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

<p id="para">para</p>
<script>
    let para = document.getElementById("para");
    function say() {
        alert("被点击了");
    }
    para.addEventListener("click", say, false);
    setTimeout(function () {
        para.removeEventListener("click", say);
    }, 3000);
</script>

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

事件模型

事件模型.png

事件流

事件流.png

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

DOM事件捕获的具体流程

事件捕获.png

事件代理（事件委托）

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

示例：

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

<ul id="list">
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
    <li>555</li>
</ul>
</body>
<script>
    let ul = document.getElementById("list");
    ul.addEventListener("click", function (event) {
        alert(event.target.innerHTML);
    })
</script>

Event 对象

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

Event 对象的常见应用

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

自定义事件 / 模拟事件

（面试中非常重要的点）

<p id="para">
    para
</p>
<script>
    let para = document.getElementById("para");
    // 新建事件实例
    let eve = new Event("pillar");
    // 添加监听函数
    para.addEventListener("pillar", function () {
        alert("pillar");
    });
    setTimeout(() => {
        // 触发事件
        para.dispatchEvent(eve);
    }, 3000);
</script>

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

JavaScript 事件

事件级别

事件类型

onload 和 onunload 事件

onchange 事件

onmouseover 和 onmouseout 事件

onmousedown, onmouseup 以及 onclick 事件

事件监听器

addEventListener() 方法

removeEventListener()方法

事件模型

事件流

DOM事件捕获的具体流程

事件代理（事件委托）

Event 对象

自定义事件 / 模拟事件

梁柱

引用和评论

简述字符集与编码

腾讯新闻中心首页改版啦

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具

开发插件集合

JS校验身份证号