DOM事件概念以及绑定事件解绑事件（含代码解析）

目录

什么是事件？

 事件三要素

 事件的执行步骤

代码讲解

事件对象

概念

 实例​

高级事件

绑定事件

绑定HTML元素

绑定DOM对象

代码讲解

解绑事件

解绑HTML元素

解绑DOM对象

代码讲解

---

什么是事件？

       HTML 事件是发生在 HTML 元素上的事情。

       例如:HTML 页面完成加载、HTML input 字段改变时、HTML 按钮被点击；下图是一些常见的事件，在JavaScript里面我们常用的事件有很多鼠标事件和键盘事件。

 事件三要素

• 事件源：事件被触发的对象  （是谁干了这件事！）
• 事件类型：如何触发什么事件 ，例如：鼠标点击、鼠标经过、键盘按下（干了啥！）
• 事件处理程序：通过函数赋值的方式（怎么干的！）

 事件的执行步骤

• 获取事件源
• 注册事件（绑定事件）元素可以不用添加事件
• 添加事件处理程序（采用函数赋值的形式）   

代码讲解

事件对象

概念

        Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。事件在浏览器中是以对象的形式存在的，即event。触发一个事件，就会产生一个事件对象event，该对象包含着所有与事件有关的信息。包括导致事件的元素、事件的类型以及其他与特定事件相关的信息。事件通常与函数结合使用，函数不会在事件发生前被执行！

 实例

高级事件

绑定事件

绑定HTML元素

特点：绑定事件唯一性，只能添加一个处理函数，若设置多个后面的函数会将前面的函数覆盖。

语法：element.Event Handlers = function() {}

参数： 

• element：事件源，引起事件的元素或者节点；
• Event Handlers：事件句柄，触发事件的行为，例如：onclick（点击鼠标）；
• function() {}：匿名函数，处理事件的方法；

绑定DOM对象

特点：绑定事件不唯一，可以添加多个处理函数，但有一定兼容性问题IE9以上支持

语法：element.addEventListener(type,lister,useCapture);

参数：

• element：事件源，引起事件的元素或者节点；
• type :事件类型字符串,比如click、 mouseover  注意这里不要带on;
• listener :事件处理函数,事件发生时,会调用该监听函数;
• useCapture :可选参数,值为true为捕获阶段,值为false或省略不写(默认是false) 处于冒泡阶段;

代码讲解

解绑事件

解绑HTML元素

语法：element.Event Handlers = null

解绑DOM对象

语法：element.removeEventListener(type,lister,useCapture);

注意：涉及到解绑的时候function不能使用匿名函数；

代码讲解