1.事件处理程序概念
事件就是用户与浏览器交互后执行的某种动作,而响应某个事件的函数叫做事件处理程序(事件侦听器)
2.HTML事件处理程序
某个元素支持的每种事件,都可以使用一个与之相应事件处理程序同名的
HTML特性来指定,而这个特性的值使能够执行的Java script代码;
;
;
缺点:
时差问题
用户可能会在HTML元素一出现在页面上就触发响应的事件,但当时的事件处理程序又可能尚不具备执行条件,就会引发错误拓展事件处理程序的作用域链在不同的浏览器中会导致不同结果,不同Java script 引擎遵守的标识符解析规则略有差异,很可能会在访问非限定对象成员时出错HTML与Java script代码紧密耦合
3.DOM 0级事件处理程序
概念
通过Java script指定事件处理程序的传统方式,就是将一个函数赋值给一个事件处理程序属性,这种方式是所有现代浏览器都支持的
优势
简单
具有跨浏览器的优势
缺陷
只能绑定一次事件处理程序
给元素绑定事件(小写)
element.onclick = function(){};
给元素解绑事件
element.onclick = null;
4.DOM 2级事件处理程序
DOM 2级事件定义了两个方法,用于处理绑定和删除事件处理程序的操作
绑定事件
element.addEventListener(要处理的事件名,作为处理程序的函数,是否在捕获阶段调用事件处理程序)
要处理的事件名
'click'处理程序的函数
function(){}是否在捕获阶段调用事件处理程序
true:在捕获阶段调用事件处理程序
false:在冒泡阶段调用事件处理程序可以多次绑定不同的事件处理程序,并且会按照他们的绑定顺序执行
解绑事件
通过上面的方式绑定的事件只能使用removeEventListener()来移除
移除的时候传入的参数与绑定处理程序时使用的参数需要相同,那么问题来了,你的处理程序函数是匿名函数将无法移除
也就是说最好处理程序函数使用有名函数
element.addEventListener('click',hander,false)
element.removeEventListener('click',hander,false)
5.IE事件处理程序
IE实现了与DOM中类似的两个方法:attachEvent()和detachEvent()
绑定事件
ele.attachEvent(事件名,事件处理程序函数)
事件名
'onclick'事件处理程序的函数
function(){}attachEvent()与使用DOM0级方法的主要区别在于事件处理程序的作用域
在使用DOM0级方法的情况下,事件处理程序会在其所属元素的作用域内运行
在使用attachEvent()方法的情况下,事件处理程序会在全局作用域中运行,因此this等于windowattachEvent()也可以绑定多个事件处理程序函数
但是在它得执行顺序与attachEventListener的执行顺序相反
【事件处理程序】解绑事件
ele.detachEvent(事件名,事件处理程序函数)
条件必须是提供相同的参数
事件处理程序函数也必须是有名函数