【web前端初级课程】第八章 什么是事件？

目录

一、事件情况汇总

二、标签绑定

三、使用DOM0事件模型

四、使用DOM2事件模型

五、相关练习：图片切换

一、事件情况汇总

事件分为三部分：事件源：绑定事件的标签、事件对象：就是事件产生的相关数据、事件处理函数

二、标签绑定

2222

缺点：

1.违背了三层分离原则

2.无法获得事件对象

3.事件源需要在绑定的标签使用this关键传递

三、使用DOM0事件模型

语法结构：绑定事件标签.onXXX=匿名函数（事件处理函数）

点击一下

这种方式完美的解决了三层分离问题，而且默认事件处理函数的第一个参数就是事件对象。

事件触发时，this就是指该事件在dom对象上触发。

四、使用DOM2事件模型

（一）语法结构

标签.addEventListener("xxxxx",匿名函数(事件处理函数))

let btn = document.getElementById("box");
btn.addEventListener("click", function(event){
    alert("ok");
    console.log(this);
}, false);

（二）注意

第一个参数不需要加on，直接写事件名称即可;

第二个参数是事件处理函数，函数第一个参数默认就是事件对象;

第三个参数Boolean值，表示捕获或者冒泡流。（true为捕获，false为冒泡）

（三）取消事件的绑定

dom2事件模型取消事件：div.removeEventListener("click",fn) 

dom0事件模型取消事件：div.onclick = null

五、相关练习：图片切换

练习代码：

都看到这里了，创作不易，大家点个赞再走呗！！- ̗̀(๑ᵔ⌔ᵔ๑)