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


Posted in Javascript onAugust 04, 2015

本文实例总结了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 数组学习资料收集
Apr 11 Javascript
异步加载script的代码
Jan 12 Javascript
javascript作用域容易记错的两个地方分析
Jun 22 Javascript
javascript event在FF和IE的兼容传参心得(绝对好用)
Jul 10 Javascript
jQuery 如何给Carousel插件添加新的功能
Apr 18 Javascript
实例讲解JavaScript中instanceof运算符的用法
Jun 08 Javascript
第五篇Bootstrap 排版
Jun 21 Javascript
vue中如何实现变量和字符串拼接
Jun 19 Javascript
ReactNative短信验证码倒计时控件的实现代码
Jul 20 Javascript
微信小程序学习笔记之目录结构、基本配置图文详解
Mar 28 Javascript
详解微信小程序网络请求接口封装实例
May 02 Javascript
基于JavaScript实现简单抽奖功能代码实例
Oct 20 Javascript
JS实现转动随机数抽奖特效代码
Apr 16 #Javascript
JavaScript实现跨浏览器的添加及删除事件绑定函数实例
Aug 04 #Javascript
jquery控制显示服务器生成的图片流
Aug 04 #Javascript
JavaScript实现LI列表数据绑定的方法
Aug 04 #Javascript
用js编写的简单的计算器代码程序
Aug 04 #Javascript
javascript记住用户名和登录密码(两种方式)
Aug 04 #Javascript
js实现简易的单数字随机抽奖(0-9)
Mar 19 #Javascript
You might like
php中文件上传的安全问题
2006/10/09 PHP
Thinkphp5 微信公众号token验证不成功的原因及解决方法
2017/11/12 PHP
php代码调试利器firephp安装与使用方法分析
2018/08/21 PHP
php实现图片压缩处理
2020/09/09 PHP
JavaScript生成GUID的多种算法小结
2013/08/18 Javascript
jquery 新建的元素事件绑定问题解决方案
2014/06/12 Javascript
javascript使用window.open提示“已经计划系统关机”的原因
2014/08/15 Javascript
jQuery实现点击图片翻页展示效果的方法
2015/02/16 Javascript
javascript结合canvas实现图片旋转效果
2015/05/03 Javascript
JQuery实现带排序功能的权限选择实例
2015/05/18 Javascript
原生JS封装Ajax插件(同域、jsonp跨域)
2016/05/03 Javascript
jQuery实现图片向左向右切换效果的简单实例
2016/05/18 Javascript
使用snowfall.jquery.js实现爱心满屏飞的效果
2017/01/05 Javascript
jQuery实现表格奇偶行显示不同背景色 就这么简单
2017/03/13 Javascript
详解webpack babel的配置
2018/01/09 Javascript
JS实现快递单打印功能【推荐】
2018/06/21 Javascript
对vue2.0中.vue文件页面跳转之.$router.push的用法详解
2018/08/24 Javascript
如何检查一个对象是否为空
2019/04/11 Javascript
vue列表单项展开收缩功能之this.$refs的详解
2019/05/05 Javascript
VUE注册全局组件和局部组件过程解析
2019/10/10 Javascript
python实现去除下载电影和电视剧文件名中的多余字符的方法
2014/09/23 Python
Python之PyUnit单元测试实例
2014/10/11 Python
Python的爬虫程序编写框架Scrapy入门学习教程
2016/07/02 Python
python用装饰器自动注册Tornado路由详解
2017/02/14 Python
python Socket之客户端和服务端握手详解
2017/09/18 Python
Python 查看文件的编码格式方法
2017/12/21 Python
Python实现多条件筛选目标数据功能【测试可用】
2018/06/13 Python
对Python3.6 IDLE常用快捷键介绍
2018/07/16 Python
党员四风问题对照检查材料思想汇报
2014/09/16 职场文书
代办社保委托书范文
2014/10/06 职场文书
停车场管理协议书范本
2014/10/08 职场文书
2014年减负工作总结
2014/12/10 职场文书
5.12护士节活动总结
2015/02/10 职场文书
2016年区委书记抓基层党建工作公开承诺书
2016/03/25 职场文书
《风不能把阳光打败》读后感3篇
2020/01/06 职场文书
Apache Calcite 实现方言转换的代码
2021/04/24 Servers