事件处理程序

1.HTML事件处理程序一种是οnclick=”alert()”,一种是封装在函数里面,function sendmessage(){}

2.DOM0级事件处理程序
较传统的方式:把一个函数赋值给一个事件的处理程序属性。用的比较多的方法,简单,跨浏览器的优势。
var btn2=document.getElemnetById('btn');//取得btn2按钮对象
btn2.onclick=function(){}通过DOM0级添加的事件!
btn2.onclick=null;删除onclick()属性。

3.DOM2级事件处理程序在IE中不起作用。
DOM2级事件定义了两个方法:用于处理指定和删除事件处理程序的操作。
addEventListener()和removeEventListener()
接收三个参数:要处理的事件名,作为事件处理程序的函数和布尔值。

Var btn3=document.getElementById('btn3');
btn3.addEventListener('click',showMes,false);

//添加事件监听.不加on.,兼容各种浏览器。

通过addEventListener 传的参数,只能通过remove删除相应的参数。
btn3.removeListener(‘click’,showMes,false);

4.IE事件处理程序(支持IE事件处理程序的浏览器:IE和OPERA)
attachEvent()添加事件
detachEvent()删除事件
接收相同的两个参数,事件处理程序的名称和事件处理程序的函数。
不使用第三个参数的原因,IE8和更早的浏览器版本支持事件冒泡。
例如,

btn3.attachEvent('onclick',showMes);
btn3.detachEvent('onclick',showMes);

5.跨浏览器的事件处理程序:跨浏览器解决其兼容的事件处理程序。

var eventUtil={
//添加句柄
addHandler:function(element,type,handler){
If(element.addEventListener){
Element.addEventListener(type,handler,false);
}
Else if(element.attachEvent){
Element.attachEvent('on'+type.handler);


}
Else{
  element['on'+type]=handler;

}
},


//删除句柄
removeHandler:function(element,type,handler){
If(element.removeEventListener){
Element.removeEventListener(type,handler,false);
}
Else if(element.detachEvent){
Element.detachEvent('on'+type.handler);


}
Else{
  element['on'+type]=null;

}
}

}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值