一、事件處理程序

對事件作出響應，可以分配一個?處理程序 ，?一個在事件發生時運行的函數

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被綁定到了其他東西上