一、 HTML事件处理程序:事件直接加在html结构里(已经被摒弃)
缺点:每次修改时,JS代码和HTML都需要进行修改
二、DOM0级事件处理程序(用得最多)
先获取元素,然后把事件当做属性添加给元素
优点:简单、有跨浏览器的优势
删除DOM0级事件的方法:让这个事件等于空
三、DOM2级事件处理程序
DOM2级事件定义了两个方法用于添加和删除事件处理程序
addEventListener() 和removeEventListener()
接收三个参数:要处理的事件名(不加on)、作为事件处理程序的函数
、布尔值(false为冒泡,true为捕获)
注意
1、若事件名称有on,则需去掉on。onclick -----> click,onmouseover -----> mouseover等
2、false 兼容所有浏览器-----事件冒泡流。
3、通过addEventListener添加的事件只能通过removeEventListener来删除。---并且两个方法的参数要一样
缺点:IE不支持该事件
dom0级和dom2级事件, 可以给一个元素添加多个事件,事件会按顺序执行各个函数。
四、IE事件处理程序
IE也提供了类似DOM0级和DOM2级事件处理程序
attachEvent()--------添加事件
detachEvent()--------删除事件
接收相同的两个参数:事件处理程序的名称和事件处理程序的函数。
去掉了布尔值,不使用第三个参数的原因:IE8以及更早的浏览器版本只支持事件冒泡!
注意:1、在ie事件处理程序上,又要把on加上
2、支持ie事件处理程序的浏览器主要有ie和opera两个浏览器。
跨浏览器事件处理程序-------使用能力检测(支持哪个用哪个)
建议将跨浏览器事件处理程序封装在一个对象内
var 对象名={
addHandler:function(){ },
removeHandler:function(){ }
}
addHandler和removeHandler表示添加句柄和删除句柄,注意两个句柄之间有一个逗号,要是引用该事件需要对象名.addHandler(参数)的方法来实现
element.obj等同于element[obj],变量和字符串是不能用点来连接的(所有用点的地方都可以用中括号[])
热门评论
不错,近期正在学习事件流