三种绑定事件
其实三种事件的绑定还是比较易学的,主要还是多敲语法,每种类型练习三五遍基本就可以掌握了。
1,dom0级绑定事件
绑定事件:元素 + on+ 事件 = 执行条件语句函数
优点: 简单,具有跨浏览器的优势
缺点:只能绑定一次事件处理程序
解绑:将事件置空
2,封装绑定dom2级函数
不封装状态:元素+ addEventListener(事件类型, 处理程序函数, 布尔值)
前言:DOM2级事件定义了两个方法,用于处理绑定和删除事件处理程序的操作
事件类型: 'click'
处理程序的函数: function () {}
是否在捕获阶段调用事件处理程序
true: 在捕获阶段调用事件处理程序
false: 在冒泡阶段调用事件处理程序
优点:可以多次绑定不同的事件处理程序,并且会按照它们的绑定顺序执行
解绑:元素+ addEventListener(事件类型, 事件处理函数, 布尔值)
通过上面方式绑定的事件只能使用removeEventListener()来移除
移除的时候传入的参数与绑定处理程序的时使用的参数需要相同,那么问题来了,你的处理程序函数是匿名函数将无法移除,也就是说最好处理程序函数使用有名函数
3, IE浏览器特殊绑法
IE实现了与DOM中类似的两个方法: attachEvent() 和 detachEvent()
IE只支持事件冒泡
attachEvent()与使用DOM0级方法的主要区别,在于事件处理程序的作用域
在使用DOM0级方法的情况下,事件处理程序会在其所属元素的作用域内运行
在使用attachEvent()方法情况下,事件处理程序会在全局作用域中运行,因此this等于window, attachEvent()也可以绑定多个事件处理程序函数,但是它的执行顺序与addEventListener的执行顺序相反
绑定事件:元素.attachEvent(事件类型,事件处理函数)
解绑:元素.detachEvent(事件类型,事件处理函数)
条件必须提供相同的参数
事件处理程序函数也必须是有名函数