事件就是用户或浏览器自身执行的某种动作,比如CLICK,LOAD,MOUSEOVER等等,响应事件的函数就是事件处理函数。
1.事件处理可以直接在HTML级别写,<button οnclick="somefunction()" />这样就可以调用在页面其他地方定义的脚本,当然也可以直接在ONCLICK后面写函数。
事件处理程序的代码在执行时,有权访问全局作用域的任何代码。
这种方式下,首先会创建一个封装着元素属性值的函数,这个函数中有个局部变量EVENT,就是事件对象。
通过EVENT对象,可以访问事件对象。并且在这种方式下,THIS的值就等于事件的目标元素,这个例子中就是点击的BUTTON。
这个函数扩展作用域的方法是这样的:
function(){
with(document){
with(this){
//元素属性值
}
}
}
2.事件处理也可以在DOM0级实现。
这是通过JS指定事件处理程序的传统方式,就是将一个函数赋值给一个事件处理程序属性。
每个元素,都有自己的事件处理程序属性,我们先获得元素,再设置它的事件处理程序即可。
这个时候的事件处理程序的作用域是元素的作用域,THIS就指向当前元素。
这种方式添加的函数会在事件的冒泡阶段被处理。
3.事件处理也可以在DOM2级实现。
DOM2级在DOM0级的基础上添加了更多的接口,用于事件处理的有两个方法,addEventListener()和removeEventListener()
所有DOM节点都包含这两个方法,接受三个参数,要处理的事件名,函数,和一个表示处理阶段的布尔值(TRUE表示在捕获阶段调用,FALSE表示在冒泡阶段调用)
eg: btn,addEventListener("click",funciton()'{},false);
这种方法的好处是可以添加多个函数。执行顺序就是添加的顺序:先添加先执行。
4.IE中实现了与DOM中类似的方法,attachEvent()和detachEvent(),添加的事件在冒泡阶段执行
但是这种方法下,THIS不指向元素,作用域变成全局作用域,THIS指向WINDOW了。
它的执行顺序也和DOM2级方法返回来,先添加后执行。
参考资料《JS高程》