JS入门之BOM事件

1. HTML事件处理程序

缺点

1. 时差问题
2. 用户可能会在HTML元素一出现在页面上就触发响应的事件，但当时的事件处理程序有可能尚不具备执行条件，就会引发错误
3. 扩展事件处理程序的作用域链在不同浏览器中会导致不同结果，不同JavaScript引擎遵循的标识符解析规则略有差异，很可能会在访问非限定对象成员时出错
4. HTML与JavaScript代码紧密耦合

2. DOM0事件处理程序

// 绑定事件
txt[0].onchange = function () {
            console.log(2);
        }

// 解绑事件
txt[0].onchange = null;

优势

1. 简单
2. 具有跨浏览器的优势

小缺陷

1. 只能绑定一次事件处理程序

3. DOM2级事件

前言：DOM2级事件定义了两个方法，用于处理绑定和删除事件处理程序的操作

绑定事件
element.addEventListener(要处理的事件名, 作为处理程序的函数, 是否在捕获阶段调用事件处理程序)

要处理的事件名
'click'

处理程序的函数
function () {}
是否在捕获阶段调用事件处理程序
true: 在捕获阶段调用事件处理程序
false: 在冒泡阶段调用事件处理程序
可以多次绑定不同的事件处理程序，并且会按照它们的绑定顺序执行

解绑事件
通过上面方式绑定的事件只能使用removeEventListener()来移除
移除的时候传入的参数与绑定处理程序的时使用的参数需要相同，那么问题来了，你的处理程序函数是匿名函数将无法移除
也就是说最好 处理程序函数使用有名函数

ele.addEventListener('click', hander, false)
ele.removeEventListener('click', hander, false)

4. IE事件

IE实现了与DOM中类似的两个方法：

attachEvent() 和 detachEvent()

绑定事件
ele.attachEvent(事件名, 事件处理程序函数)

事件名
'onclick'
事件处理程序函数
function () {}

IE只支持事件冒泡

attachEvent()与使用DOM0级方法的主要区别，在于事件处理程序的作用域

在使用DOM0级方法的情况下，事件处理程序会在其所属元素的作用域内运行

在使用attachEvent()方法情况下，事件处理程序会在全局作用域中运行，因此this等于window
attachEvent()也可以绑定多个事件处理程序函数
但是它的执行顺序与addEventListener的执行顺序相反

解绑事件

ele.detachEvent(事件名, 事件处理程序函数)
条件必须提供相同的参数
事件处理程序函数也必须是有名函数