事件处理：-CSDN博客

本文链接：https://blog.csdn.net/Chenche_/article/details/127639444

1、基本概念：

（1）事件：JavaScript可以侦测到的行为（用户在页面上进行的某种操作）

页面加载（浏览器打开页面）、单击鼠标、鼠标进入某个区域、焦点、键盘

（2）事件处理程序：用户进行了某种操作后，所运行的JavaScript程序段

（3）事件驱动式：当事件发生后才去执行相应的程序

（4）事件流：事件发生时，会在发生事件的元素节点与DOM树根节点之间按照特定的顺序进行传播，这个事件传播的过程就是事件流。

（5）在web中对事件流的解决方案：

A、事件捕获：网景公司(Netscape)。事件流传播的顺序应该是从DOM树的根节点到发生事件的元素节点。

B、事件冒泡：微软公司(Microsoft)。事件流传播的顺序应该是从发生事件的元素节点到DOM树的根节点。

冒泡的前提是，父级也定义了相应的事件.当子元素与父元素有相同的事件时，当子元素被触发时父元素也会被触发——冒泡机制

C、w3c的事件流处理：在事件发生阶段采用捕获方式（此时不处理），在事件处理阶段采用冒泡

（6）事件捕获的实现：

addEventListener（事件名，事件处理程序，事件处理方式）

参数1：事件名（click、change、load、mousedown…..）

参数2：事件处理程序

参数3：事件处理方式（true—表示采用事件捕获方式，false—-采用事件冒泡方式） //默认为false

2、事件的绑定方式

（1）行内绑定式

<标签名事件名=“事件处理程序”></标签名>

（2）动态绑定式

DOM对象名.事件名 = 事件处理程序

注意：”行内绑定式”和”动态绑定式”的区别

不同点：

a、 “行内绑定式”中事件名作为标签的属性，”动态绑定式”中事件名作为DOM对象的属性

b、”行内绑定式”的事件处理程序中的this代表的是window对象，”动态绑定式”的事件处理程序中的this代表的是触发事件的DOM对象

相同点：

一个DOM对象的同一个事件只能有一个事件处理程序

（3）事件监听式：可以给DOM对象的同一个事件绑定多个事件处理程序

DOM对象.attachEvent(type, callback); //早期IE浏览器

DOM对象.addEventListener(type, callback, [capture]); //标准浏览器

3、删除事件绑定：

DOM对象.removeEventListener(type, callback);

四、事件对象：

1、来源：当事件发生时，都会产生一个事件对象（event对象）

2、作用：通过事件对象可以了解与事件相关的信息（DOM对象、事件的类型……）

3、获取事件对象：

（1）早期的IE浏览器：window.event

（2）标准浏览器：将一个event对象直接传入事件处理程序中

4、常用属性：

（1）type：代表当前事件的类型

（2）target：返回触发此事件的元素（事件的目标节点）

（3）currentTarget：返回其事件监听器触发该事件的元素

（4）bubbles：表示事件是否是冒泡事件类型

5、常用函数：

（1）stopPropagation()：阻止事件冒泡

（2）preventDefault()：阻止默认行为

五、事件的分类

1、鼠标事件：click

mouseover：鼠标进入

mouseout：鼠标离开

<div id="app" style="width: 300px;height:300px;background-color:red"></div>
    <script>
        document.getElementById('app').addEventListener('mouseover',function(){
            this.style.backgroundColor = 'blue'
        })
        document.getElementById('app').addEventListener('mouseout',function(){
            this.style.backgroundColor = 'red'
        })
    </script>