1. HTML事件处理程序
<input type="checkbox" class="check" onclick="console.log(1)">
缺点
- 时差问题
- 用户可能会在HTML元素一出现在页面上就触发响应的事件，但当时的事件处理程序有可能尚不具备执行条件，就会引发错误
- 扩展事件处理程序的作用域链在不同浏览器中会导致不同结果，不同JavaScript引擎遵循的标识符解析规则略有差异，很可能会在访问非限定对象成员时出错
- HTML与JavaScript代码紧密耦合
2. DOM0事件处理程序
// 绑定事件
txt[0].onchange = function () {
console.log(2);
}
// 解绑事件
txt[0].onchange = null;
优势
- 简单
- 具有跨浏览器的优势
小缺陷
- 只能绑定一次事件处理程序
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(事件名, 事件处理程序函数)
条件必须提供相同的参数
事件处理程序函数也必须是有名函数
网友评论