当前位置: 首页 > 编程笔记 >

JavaScript实现添加及删除事件的方法小结

郭俊拔
2023-03-14
本文向大家介绍JavaScript实现添加及删除事件的方法小结,包括了JavaScript实现添加及删除事件的方法小结的使用技巧和注意事项,需要的朋友参考一下

本文实例总结了JavaScript实现添加及删除事件的方法。分享给大家供大家参考。具体如下:

JavaScript添加、删除事件的方法,也就是让某些方法生效指定次数,可以是一次、两次或更多次,但指定次数执行完毕后就删除该方法,使其失效,如果你经常从事JS编程,你就会知道这种功能用得比较多。

先来看看一个比较简单的例子:

function $(id)
{
return document.getElementByIdx_x(id);
}
var ev = null;
var count1  = 0;
var count2  = 0;
var oncount1 = 0;
var oncount2 = 0;
var isSetEv1 = false;
var isSetEv2 = false;
//创建事件的通用函数
var EventUtil = function(){};
var flag = new Flag();
//监控变量值
function Flag()
{
var tempflag = false;
var method = null;
this.SetMethod = function(value)
{
  method = value;
} 
this.SetValue = function(value)
{
    tempflag = value;
    if(tempflag == true && method){eval_r(method)} 
}
this.GetValue = function()
{
  return tempflag;
}
}
EventUtil.addEventHandler = function(obj,EventType,Handler)
{
//如果是FF
if(obj.addEventListener)
{
  obj.addEventListener(EventType,Handler,false);
} 
//如果是IE
else if(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
else if(obj.detachEvent)
{
  obj.detachEvent('on'+EventType,Handler);
} 
else
{
  obj['on'+EventType] = Handler;
}
}
function setEvent1(e)
{
ev = e;//针对火狐获取event相关属性 
flag.SetMethod('addList1()');
flag.SetValue (true);
}
function setEvent2(e)
{
ev = e;//针对火狐获取event相关属性
flag.SetMethod('addList2()');
flag.SetValue (true);
}
function isSetEvent1(state)
{
isSetEv1 = state;//ie下方法名不能和全局变量名相同
}
function isSetEvent2(state)
{
isSetEv2 = state;
}
function add1(obj)
{
oncount1 = oncount1 + 1;
if(isSetEv1)
{
  obj.innerHTML = "设置了事件,添加了 <b>" + oncount1 + "</b> 篇文章,左边列表1自动增加!";
}
else
{
  obj.innerHTML = "没有设置事件,添加了 <b>" + oncount1 + "</b> 篇文章,左边列表1没有变化!";
}
}
function add2(obj)
{
oncount2 = oncount2 + 1;
if(isSetEv2)
{
  obj.innerHTML = "设置了事件,添加了 <b>" + oncount2 + "</b> 篇文章,左边列表2自动增加!";
}
else
{
  obj.innerHTML = "没有设置事件,添加了 <b>" + oncount2 + "</b> 篇文章,左边列表2没有变化!";
}
}
function addList1()
{
count1 = count1 + 1;
$("list1").innerHTML = "动态添加了 <b>" + count1 + "</b> 篇文章了!";
}
function addList2()
{
count2 = count2 + 1;
$("list2").innerHTML = "动态添加了 <b>" + count2 + "</b> 篇文章了!";
}

再来看看一个简化的例子:

//通用的添加和删除事件的方法(兼容IE和firefox)
function AddEventHandler(oTarget, sEventType, fnHandler){
  if (oTarget.addEventListener) {//非IE
  oTarget.addEventListener(sEventType, fnHandler, false);
  }else if (oTarget.attachEvent) {//IE
   oTarget.attachEvent('on' + sEventType, fnHandler);
  }else {
   oTarget['on' + sEventType] = fnHandler;
  }
}
function RemoveEventHandler(oTarget, sEventType, fnHandler){
  if (oTarget.removeEventListener) {//非IE
  oTarget.removeEventListener(sEventType, fnHandler, false);
  }else if (oTarget.detachEvent) {//IE
   oTarget.detachEvent('on' + sEventType, fnHandler);
  }else {
   oTarget['on' + sEventType] = null;
  }
}

最后再来看一个完整的实例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JavaScript添加、删除事件的方法</title>
<script type="text/javascript">
var EventUtil=new Object;
EventUtil.addEvent=function(oTarget,sEventType,funName){
  if(oTarget.addEventListener){//for DOM;
 oTarget.addEventListener(sEventType,funName, false);
 }else if(oTarget.attachEvent){
 oTarget.attachEvent("on"+sEventType,funName);
 }else{
 oTarget["on"+sEventType]=funName;
 }
};
EventUtil.removeEvent=function(oTarget,sEventType,funName){
  if(oTarget.removeEventListener){//for DOM;
 oTarget.removeEventListener(sEventType,funName, false);
 }else if(oTarget.detachEvent){
 oTarget.detachEvent("on"+sEventType,funName);
 }else{
 oTarget["on"+sEventType]=null;
 }
};
function removeClick(){
 alert("click");
 var oDiv=document.getElementById("odiv");
 oDiv.style.cursor="auto";
 EventUtil.removeEvent(oDiv,"click",removeClick);
}
function addLoadEvent(func){
  var oldonload=window.onload;
  if(typeof window.onload !="function"){
    window.onload=func;
  }else{
    window.onload=function(){
      oldonload();
      func();
    }
  }
}
addLoadEvent(addClick);
function addClick(){
 var oDiv=document.getElementById("odiv");
 oDiv.style.cursor="pointer";
 EventUtil.addEvent(oDiv,"click",removeClick);
}
</script>
</head>
<body>
<p>第一次点的时候弹出警告,并移除click事件,再点点击就失效了</p>
<div id="odiv" style="background:#003399; height:70px; width:126px; margin:0 auto; color:skyblue; ">第一次警告,第二次没反应!</div>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

 类似资料:
  • 本文向大家介绍JavaScript实现跨浏览器的添加及删除事件绑定函数实例,包括了JavaScript实现跨浏览器的添加及删除事件绑定函数实例的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了JavaScript实现跨浏览器的添加及删除事件绑定函数。分享给大家供大家参考。具体如下: IE 的事件绑定函数是 attachEvent;而 Firefox, Safari 是 addEventLis

  • 本文向大家介绍js实现class样式的修改、添加及删除的方法,包括了js实现class样式的修改、添加及删除的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了js实现class样式的修改、添加及删除的方法。分享给大家供大家参考。具体分析如下: 比较常见的js前端功能,通过修改标签的className实现相应的功能。 具体代码如下: 希望本文所述对大家的javascript程序设计有所帮

  • 本文向大家介绍JavaScript实现动态添加,删除行的方法实例详解,包括了JavaScript实现动态添加,删除行的方法实例详解的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了JavaScript实现动态添加,删除行的方法。分享给大家供大家参考。具体如下: JavaScript实现动态的增加或删除table的行 希望本文所述对大家的javascript程序设计有所帮助。

  • 本文向大家介绍轻松实现jQuery添加删除按钮Click事件,包括了轻松实现jQuery添加删除按钮Click事件的使用技巧和注意事项,需要的朋友参考一下 大家登陆一些网站或论坛时,经常会被要求先浏览和确认“用户协议”。“用户协议”底部通常会设置一个“我已阅读并同意”复选框,勾选了该复选框,“登陆”按钮才可用。 如下图所示,勾选“I have read and accept.”复选框,Login按

  • 本文向大家介绍JQuery实现动态添加删除评论的方法,包括了JQuery实现动态添加删除评论的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了JQuery实现动态添加删除评论的方法。分享给大家供大家参考。具体实现方法如下: 希望本文所述对大家的jQuery程序设计有所帮助。

  • 本文向大家介绍javascript实现可全选、反选及删除表格的方法,包括了javascript实现可全选、反选及删除表格的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了javascript实现可全选、反选及删除表格的方法。分享给大家供大家参考。具体实现方法如下: 希望本文所述对大家的javascript程序设计有所帮助。