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实现的仿Flash广告图片轮换效果
Apr 24 Javascript
JS小功能(checkbox实现全选和全取消)实例代码
Nov 28 Javascript
jQuery选择器全面总结
Jan 06 Javascript
Bootstrap每天必学之按钮
Nov 26 Javascript
实例详解jQuery结合GridView控件的使用方法
Jan 04 Javascript
jQuery获取单击节点对象的方法
Jun 02 Javascript
Bootstrap学习笔记之css样式设计(2)
Jun 07 Javascript
JS自动生成动态HTML验证码页面
Jun 14 Javascript
JS实现获取汉字首字母拼音、全拼音及混拼音的方法
Nov 14 Javascript
jQuery+koa2实现简单的Ajax请求的示例
Mar 06 jQuery
vue动态禁用控件绑定disable的例子
Oct 28 Javascript
vue实现倒计时功能
Mar 24 Vue.js
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中的正则表达式
2014/08/17 PHP
关于PHP文件的自动运行方法分析
2016/05/13 PHP
在Yii2特定页面如何禁用调试工具栏Debug Toolbar详解
2017/08/07 PHP
js 判断 enter 事件
2009/02/12 Javascript
LazyLoad 延迟加载(按需加载)
2010/05/31 Javascript
整理一些JavaScript的IE和火狐的兼容性注意事项
2011/03/17 Javascript
JS Date函数整理方便使用
2013/10/23 Javascript
jquery遍历checkbox的注意事项说明
2014/02/21 Javascript
js网页滚动条滚动事件实例分析
2015/05/05 Javascript
TypeScript Type Innference(类型判断)
2016/03/10 Javascript
jquery mobile界面数据刷新的实现方法
2016/05/28 Javascript
webuploader模态框ueditor显示问题解决方法
2016/12/27 Javascript
bootstrap fileinput 插件使用项目总结(经验)
2017/02/22 Javascript
Vue通过input筛选数据
2020/10/26 Javascript
详解vue-router 命名路由和命名视图
2018/06/01 Javascript
JavaScript中发出HTTP请求最常用的方法
2018/07/12 Javascript
如何实现一个简易版的vuex持久化工具
2019/09/11 Javascript
vue项目初始化到登录login页面的示例
2019/10/31 Javascript
vue 解决computed修改data数据的问题
2019/11/06 Javascript
基于Web Audio API实现音频可视化效果
2020/06/12 Javascript
[03:04]DOTA2超级联赛专访ZSMJ “莫名其妙”的逆袭
2013/05/23 DOTA
Python多线程原理与用法实例剖析
2019/01/22 Python
Python时间和字符串转换操作实例分析
2019/03/16 Python
flask框架自定义url转换器操作详解
2020/01/25 Python
Python搭建Keras CNN模型破解网站验证码的实现
2020/04/07 Python
园林施工员岗位职责
2013/12/11 职场文书
聘任书的写作格式及范文
2014/03/29 职场文书
大学活动总结格式
2014/04/29 职场文书
龙门石窟导游词
2015/02/02 职场文书
生日宴会家属答谢词
2015/09/29 职场文书
2016寒假社会实践心得体会范文
2015/10/09 职场文书
工商局调档介绍信
2015/10/22 职场文书
Python排序算法之插入排序及其优化方案详解
2021/06/11 Python
Python函数中apply、map、applymap的区别
2021/11/27 Python
Redis特殊数据类型Geospatial地理空间
2022/06/01 Redis
利用Redis实现点赞功能的示例代码
2022/06/28 Redis