JavaScript三种事件绑定的方式(DOM的0级、2级、3级事件处理程序)

JS事件绑定的方式：

①、行内绑定
②、动态绑定
③、事件监听

一、行内绑定【DOM0级事件处理程序】：

例：<标签 属性列表 事件=”事件的处理程序” />
虽然可以完成需要的功能 但其把结构+样式+行为都绑定在同一个标签中 不利于后期维护

二、动态绑定【DOM0级事件处理程序】：

例：dom对象.事件 = 事件的处理程序(通常是一个匿名函数)
将一个函数赋值给一个事件处理程序属性 简单 且具有跨浏览器的优势

行内绑定与动态绑定的区别：
行内绑定中 其事件处理中的this指向了全局window对象
动态绑定中 其事件处理中的this指向了当前正在操作的dom对象

三、事件监听【DOM2级事件处理程序】：

和DOM0级事件处理程序的优势：可以添加多个事件处理程序
且DOM0级事件会被覆盖 DOM2级事件不会被覆盖
addEventListener()：添加事件 removeEventListener()：删除事件

接收三个参数：
1、要处理的事件名
2、作为事件处理程序的函数
3、一个布尔值(true为在捕获阶段调用事件处理程序