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 相关文章推荐
kmock javascript 单元测试代码
Feb 06 Javascript
jquery $.fn $.fx是什么意思有什么用
Nov 04 Javascript
javascript获取dom的下一个节点方法
Sep 05 Javascript
推荐5 个常用的JavaScript调试技巧
Jan 08 Javascript
JavaScript实现数组随机排序的方法
Jun 26 Javascript
JS访问DOM节点方法详解
Nov 29 Javascript
纯原生js实现table表格的增删
Jan 05 Javascript
详解AngularJS 模块化
Jun 14 Javascript
VueAwesomeSwiper在VUE中的使用以及遇到的一些问题
Jan 11 Javascript
详解js正则表达式验证时间格式xxxx-xx-xx形式
Feb 09 Javascript
在create-react-app中使用sass的方法示例
Oct 01 Javascript
layui-select动态选中值的例子
Sep 23 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
require(),include(),require_once()和include_once()区别
2008/03/27 PHP
thinkPHP学习笔记之安装配置篇
2015/03/05 PHP
php封装的mongodb操作类代码
2017/08/06 PHP
jquery中交替点击事件toggle方法的使用示例
2013/12/08 Javascript
基于promise.js实现nodejs的promises库
2014/07/06 NodeJs
node+experss实现爬取电影天堂爬虫
2016/11/20 Javascript
bootstrap table分页模板和获取表中的ID方法
2017/01/10 Javascript
详解开源的JavaScript插件化框架MinimaJS
2017/10/26 Javascript
vue实现类似淘宝商品评价页面星级评价及上传多张图片功能
2018/10/29 Javascript
node.js文件的复制、创建文件夹等相关操作
2021/02/05 Javascript
[52:06]FNATIC vs NIP 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
[42:06]2019国际邀请赛全明星赛 8.23
2019/09/05 DOTA
[45:44]完美世界DOTA2联赛PWL S2 FTD vs PXG 第一场 11.27
2020/12/01 DOTA
Python装饰器(decorator)定义与用法详解
2018/02/09 Python
python中退出多层循环的方法
2018/11/27 Python
解决pyqt5中QToolButton无法使用的问题
2019/06/21 Python
详解Python对JSON中的特殊类型进行Encoder
2019/07/15 Python
使用 Python 快速实现 HTTP 和 FTP 服务器的方法
2019/07/22 Python
用python画一只可爱的皮卡丘实例
2019/11/21 Python
Python 序列化和反序列化库 MarshMallow 的用法实例代码
2020/02/25 Python
html5中为audio标签增加停止按钮动作实现方法
2013/01/04 HTML / CSS
美国运动鞋和运动服零售商:Footaction
2017/04/07 全球购物
美国球鞋寄卖网站:Stadium Goods
2018/05/09 全球购物
英国奢侈品牌时尚购物平台:Farfetch(支持中文)
2020/02/18 全球购物
weblogic面试题
2016/03/07 面试题
妇产科护士自我鉴定
2013/10/15 职场文书
教师自我鉴定
2013/12/13 职场文书
三字经教学反思
2014/04/26 职场文书
小学生关于梦想的演讲稿
2014/08/22 职场文书
青岛导游词
2015/02/12 职场文书
国富论读书笔记
2015/06/26 职场文书
总经理聘用协议书
2015/09/21 职场文书
个人职业生涯规划之自我评估篇
2019/09/03 职场文书
SqlServer 垂直分表(减少程序改动)
2021/04/16 SQL Server
docker compose 部署 golang 的 Athens 私有代理问题
2022/04/28 Servers
python区块链持久化和命令行接口实现简版
2022/05/25 Python