事件总共分为 html中添加事件,DOM0级事件,DOM2级事件
html中添加事件
<input type="button" id="btn1" value="html" οnclick="showMes()" />
function showMes(){
alert('hello ');
}
js代码是添加在html中的,和html耦合很密切,修改起来很不方便
DOM0级添加事件
DOM0级呢是把元素从html中提取出来,在js中给他赋予事件。
<input type="button" id="btn2" value="dom0级" />
var btn2 = document.getElementById('btn2');
btn2.onclick = function(){
alert('dom0');
}
可以删除事件,用btn2.οnclick= null;
DOM2级添加事件
<input type="button" id="btn3" value="dom2级" />
var btn3=document.getElementById('btn3');
btn3.addEventListener('click',showMes,false);
第一个参数是什么类型的事件,第二个参数是执行什么函数,第三个参数是以什么方式触发。true代表事件捕获,false代表事件冒泡
DOM2事件必须把on去掉
删除事件可以用
btn3.removeEventListener('click',showMes,false);
这种方式可以给一个元素添加多个事件,事件是按添加先后顺序执行的。
IE事件处理程序
<input type="button" id="btn4" value="IE处理" />
var btn4 = document.getElementById("btn4");
btn4.attachEvent('onclick',showMes);
attachEvent只接受两个参数,第一个参数是事件类型,这里要把on加上去,第二个参数是执行什么函数
删除事件是detachEvent();函数,
btn4.detachEvent('onclick',showMes;
IE事件处理程序只有ie8之前的版本和Opera浏览器支持,其他浏览器支持DOM2,再低的只能支持DOM0级的
处理跨浏览器事件处理
var eventUtil ={
addHandler:function(element,type,handler){
if (addEventListener) {
element.addEventListener(type,handler,false);//DOM2
}else if (attachEvent) {
element.attachEvent("on"+type,handler); //IE
}else {
element['on'+type] = handler; //dom0
}
},
removeHandler:function(element,type,handler){
if(removeEventListener){
element.removeEventListener(type,handler,false);
}else if (detachEvent) {
element.detachEvent('on'+type,handler)
}else {
element['on'+type]= null;
}
}
}
eventUtil.addHandler(btn4,'click',showMes);
eventUtil.removeHandler(btn4,'click',showMes);
定义一个对象,把添加事件删除事件封装在里面,事件类型要去掉on,因为在使用过程中添加on比删除on更简单。
这样一个整个的代码可以在任何浏览器中使用