一、事件处理程序

对事件作出响应，可以分配一个 处理程序 ， 一个在事件发生时运行的函数

1、HTML特性绑定事件处理函数

 保存1

2、DOM属性绑定事件处理函数

二、访问元素：this

事件处理函数中的this指向绑定事件函数的对象

        btn1.onclick = function () {

            fn();

            console.log(this === btn1);  // true

        }

特性绑定的事件函数中的this指向特性的主人

    保存1

   

三、addEventListener

为一个事件分配多个处理程序

        const btn1 = document.getElementById("btn1");
        // addEventListener (标准)事件处理函数绑定，一个事件绑定多个函数
        // on（前缀）click（事件名）
        btn1.addEventListener("click", function () {
            console.log("xc")
        })
        btn1.addEventListener("click", function () {
            console.log("xxx")
        })
        btn1.addEventListener("click", function () {
            console.log("dawdw")
        })

addEventListener的参数，（事件，函数，第三个参数）

第三个参数可加上一个对象{ once：true }，会在被触发后自动删除监听器。

        // addEventListener 第三个参数
        btn1.addEventListener(
            "click",
            function () {
                console.log("xc")
            },
            {
                once: true   // 此函数只触发一次
            }
        )

使用removeEventListener移除事件处理函数，需要用函数名表示移除的函数

function handler() {
  alert( 'Thanks!' );
}
input.addEventListener("click", handler);
// ....
input.removeEventListener("click", handler);

四、事件对象

当事件发生时，浏览器会创建一个 event 对象，将详细信息放入其中，并将其作为参数传递给处理程序

event.type  事件类型，如click，

event.clientX, event.clientY  指针事件的指针在窗口的相对坐标

event.currentTarget 处理事件的元素，一般与“this”相同，除非处理程序是一个箭头函数，或者它的this被绑定到了其他东西上