JavaScript实现添加及删除事件的方法小结
本文实例总结了JavaScript实现添加及删除事件的方法。分享给大家供大家参考。具体如下：
JavaScript添加、删除事件的方法，也就是让某些方法生效指定次数，可以是一次、两次或更多次，但指定次数执行完毕后就删除该方法，使其失效，如果你经常从事JS编程，你就会知道这种功能用得比较多。
先来看看一个比较简单的例子：
function$(id)
{
returndocument.getElementByIdx_x(id);
}
varev=null;
varcount1=0;
varcount2=0;
varoncount1=0;
varoncount2=0;
varisSetEv1=false;
varisSetEv2=false;
//创建事件的通用函数
varEventUtil=function(){};
varflag=newFlag();
//监控变量值
functionFlag()
{
vartempflag=false;
varmethod=null;
this.SetMethod=function(value)
{
method=value;
}
this.SetValue=function(value)
{
tempflag=value;
if(tempflag==true&&method){eval_r(method)}
}
this.GetValue=function()
{
returntempflag;
}
}
EventUtil.addEventHandler=function(obj,EventType,Handler)
{
//如果是FF
if(obj.addEventListener)
{
obj.addEventListener(EventType,Handler,false);
}
//如果是IE
elseif(obj.attachEvent)
{
obj.attachEvent('on'+EventType,Handler);
}
else
{
obj['on'+EventType]=Handler;
}
}
//取消事件传入的参数值要跟绑定时完全一样才可以
EventUtil.removeEventHandler=function(obj,EventType,Handler)
{
//如果是FF
if(obj.removeEventListener)
{
obj.removeEventListener(EventType,Handler,false);
}
//如果是IE
elseif(obj.detachEvent)
{
obj.detachEvent('on'+EventType,Handler);
}
else
{
obj['on'+EventType]=Handler;
}
}
functionsetEvent1(e)
{
ev=e;//针对火狐获取event相关属性
flag.SetMethod('addList1()');
flag.SetValue(true);
}
functionsetEvent2(e)
{
ev=e;//针对火狐获取event相关属性
flag.SetMethod('addList2()');
flag.SetValue(true);
}
functionisSetEvent1(state)
{
isSetEv1=state;//ie下方法名不能和全局变量名相同
}
functionisSetEvent2(state)
{
isSetEv2=state;
}
functionadd1(obj)
{
oncount1=oncount1+1;
if(isSetEv1)
{
obj.innerHTML="设置了事件，添加了<b>"+oncount1+"</b>篇文章,左边列表1自动增加！";
}
else
{
obj.innerHTML="没有设置事件，添加了<b>"+oncount1+"</b>篇文章,左边列表1没有变化！";
}
}
functionadd2(obj)
{
oncount2=oncount2+1;
if(isSetEv2)
{
obj.innerHTML="设置了事件，添加了<b>"+oncount2+"</b>篇文章,左边列表2自动增加！";
}
else
{
obj.innerHTML="没有设置事件，添加了<b>"+oncount2+"</b>篇文章,左边列表2没有变化！";
}
}
functionaddList1()
{
count1=count1+1;
$("list1").innerHTML="动态添加了<b>"+count1+"</b>篇文章了!";
}
functionaddList2()
{
count2=count2+1;
$("list2").innerHTML="动态添加了<b>"+count2+"</b>篇文章了!";
}
再来看看一个简化的例子：
//通用的添加和删除事件的方法(兼容IE和firefox)
functionAddEventHandler(oTarget,sEventType,fnHandler){
if(oTarget.addEventListener){//非IE
oTarget.addEventListener(sEventType,fnHandler,false);
}elseif(oTarget.attachEvent){//IE
oTarget.attachEvent('on'+sEventType,fnHandler);
}else{
oTarget['on'+sEventType]=fnHandler;
}
}
functionRemoveEventHandler(oTarget,sEventType,fnHandler){
if(oTarget.removeEventListener){//非IE
oTarget.removeEventListener(sEventType,fnHandler,false);
}elseif(oTarget.detachEvent){//IE
oTarget.detachEvent('on'+sEventType,fnHandler);
}else{
oTarget['on'+sEventType]=null;
}
}
最后再来看一个完整的实例：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>JavaScript添加、删除事件的方法</title>
<scripttype="text/javascript">
varEventUtil=newObject;
EventUtil.addEvent=function(oTarget,sEventType,funName){
if(oTarget.addEventListener){//forDOM;
oTarget.addEventListener(sEventType,funName,false);
}elseif(oTarget.attachEvent){
oTarget.attachEvent("on"+sEventType,funName);
}else{
oTarget["on"+sEventType]=funName;
}
};
EventUtil.removeEvent=function(oTarget,sEventType,funName){
if(oTarget.removeEventListener){//forDOM;
oTarget.removeEventListener(sEventType,funName,false);
}elseif(oTarget.detachEvent){
oTarget.detachEvent("on"+sEventType,funName);
}else{
oTarget["on"+sEventType]=null;
}
};
functionremoveClick(){
alert("click");
varoDiv=document.getElementById("odiv");
oDiv.style.cursor="auto";
EventUtil.removeEvent(oDiv,"click",removeClick);
}
functionaddLoadEvent(func){
varoldonload=window.onload;
if(typeofwindow.onload!="function"){
window.onload=func;
}else{
window.onload=function(){
oldonload();
func();
}
}
}
addLoadEvent(addClick);
functionaddClick(){
varoDiv=document.getElementById("odiv");
oDiv.style.cursor="pointer";
EventUtil.addEvent(oDiv,"click",removeClick);
}
</script>
</head>
<body>
<p>第一次点的时候弹出警告，并移除click事件,再点点击就失效了</p>
<divid="odiv"style="background:#003399;height:70px;width:126px;margin:0auto;color:skyblue;">第一次警告，第二次没反应！</div>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。