学习前端第四十四天（浏览器事件简介）

一、事件处理程序

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

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

 <button id="btn1" οnclick="fn();console.log('xc')">保存1</button>

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

<script>

        function fn() { console.log("hello") }

        const btn1 = document.getElementById("btn1");

        // 对属性onclick进行修改

        btn1.onclick = function () { fn(); }

    </script>

二、访问元素：this

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

        btn1.onclick = function () {

            fn();

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

        }

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

    <button id="btn1" οnclick="fn();console.log(this)">保存1</button>

    <!-- 这里的this是button自己 -->

三、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被绑定到了其他东西上