事件处理程序

事件意味着用户或浏览器执行的某种动作。比如，单击（ click）、加载（ load）、鼠标悬停。为响应事件而调用的函数被称为事件处理程序（或事件监听器）。
1.HTML事件处理程序
方式一：

<input type="button" value="点击" onclick="alert('HTML事件处理程序')"/>

方式二：
调用在其他地方定义的脚本

<input type="button" value="点击" onclick="showMessage()"/>

<script>
    function showMessage() {
        alert("HTML事件处理程序");
    }
</script>

2.DOM0 事件处理程序
把一个函数赋值给（ DOM 元素的）一个事件处理程序属性
addEventListener()和 removeEventListener()。这两个方法暴露在所有 DOM 节点上，它们接收 3 个参数：事件名、事件处理函数和一个布尔值， true 表示在捕获阶段调用事件处理程序， false（默认值）表示在冒泡阶段调用事件处理程序

<input type="button" value="点击" id="myBtn"/>

<script>
    let btn = document.getElementById("myBtn");
    btn.onclick = function() {
        alert("DOM0 事件处理程序");
    };
    btn.onclick = function() {
        alert("DOM0 事件处理程序2");
    };
    // 只会弹出DOM0 事件处理程序2
</script>

多个事件处理程序只会触发最后一个事件
通过将事件处理程序属性的值设置为 null，可以移除通过 DOM0 方式添加的事件处理程序

btn.onclick = null; // 移除事件处理程序

3.DOM2 事件处理程序

<script>
    let btn = document.getElementById("myBtn");
    btn.addEventListener("click", function() {
        alert("DOM2 事件处理程序");
    }, false);
    btn.addEventListener("click", function() {
        alert("DOM2 事件处理程序2");
    }, false);
</script>

使用 DOM2方式的主要优势是可以为同一个事件添加多个事件处理程序。多个事件处理程序以添加顺序来触发
通过 addEventListener()添加的事件处理程序只能使用 removeEventListener()并传入与添加时同样的参数来移除

<script>
    let btn = document.getElementById("myBtn");
    handler=function() {
        alert("DOM2 事件处理程序");
    }
    btn.addEventListener("click",handler , false);
    btn.removeEventListener("click", handler, false);
</script>

事件对象
event 对象是传给事件处理程序的唯一参数

<script>
    let btn = document.getElementById("myBtn");
    btn.onclick = function(event) {
        console.log(event);
    };
</script>