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的数据类型(示例代码)
Dec 11 Javascript
常用的jquery模板插件——jQuery Boilerplate介绍
Sep 23 Javascript
javascript实现禁止右键和F12查看源代码
Dec 26 Javascript
JavaScript中的类(Class)详细介绍
Dec 30 Javascript
推荐10 个很棒的 jQuery 特效代码
Oct 04 Javascript
详解Bootstrap创建表单的三种格式(一)
Jan 04 Javascript
浅析Jquery操作select
Dec 13 Javascript
基于jQuery制作小图标上下滑动特效
Jan 18 Javascript
xmlplus组件设计系列之文本框(TextBox)(3)
May 03 Javascript
Vue无限滑动周选择日期的组件的示例代码
Jul 18 Javascript
vuejs实现折叠面板展开收缩动画效果
Sep 06 Javascript
Vue实现购物车详情页面的方法
Aug 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 和 XML: 使用expat函数(一)
2006/10/09 PHP
浅析PHP中Collection 类的设计
2013/06/21 PHP
常见PHP数据库解决方案分析介绍
2015/09/24 PHP
PHP7新特性foreach 修改示例介绍
2016/08/26 PHP
PHP中SQL查询语句的id=%d解释(推荐)
2016/12/10 PHP
php自定义函数实现统计中文字符串长度的方法小结
2017/04/15 PHP
Yii2语言国际化的配置教程
2018/08/19 PHP
jquery select(列表)的操作(取值/赋值)
2009/08/06 Javascript
深入理解JavaScript系列(50):Function模式(下篇)
2015/03/04 Javascript
JavaScript中的call方法和apply方法使用对比
2015/08/12 Javascript
javascript入门教程基础篇
2015/11/16 Javascript
讲解JavaScript的Backbone.js框架的MVC结构设计理念
2016/02/14 Javascript
JS填写银行卡号每隔4位数字加一个空格
2016/12/19 Javascript
轻量级JS Cookie插件js-cookie的使用方法
2018/03/22 Javascript
[03:55]显微镜下的DOTA2特别篇——430灰烬之灵神级操作
2014/06/24 DOTA
Python中几种操作字符串的方法的介绍
2015/04/09 Python
Python内置函数——__import__ 的使用方法
2017/11/24 Python
在pandas中一次性删除dataframe的多个列方法
2018/04/10 Python
python字符串中匹配数字的正则表达式
2019/07/03 Python
django将数组传递给前台模板的方法
2019/08/06 Python
Python 装饰器原理、定义与用法详解
2019/12/07 Python
Python ORM编程基础示例
2020/02/02 Python
详解Python的三种拷贝方式
2020/02/11 Python
浅谈Django QuerySet对象(模型.objects)的常用方法
2020/03/28 Python
解决Tensorflow2.0 tf.keras.Model.load_weights() 报错处理问题
2020/06/12 Python
雅诗兰黛澳大利亚官网:Estée Lauder澳大利亚
2019/05/31 全球购物
水利公司纪检监察自我鉴定
2014/02/25 职场文书
《新型玻璃》教学反思
2014/04/13 职场文书
殡葬服务心得体会
2014/09/11 职场文书
向国旗敬礼活动总结范文2014
2014/09/27 职场文书
中学生思想品德评语
2014/12/31 职场文书
法定授权委托证明书
2015/06/18 职场文书
课程设计感想范文
2015/08/11 职场文书
《法国号》教学反思
2016/02/22 职场文书
JavaScript高级程序设计之变量与作用域
2021/11/17 Javascript
python index() 与 rindex() 方法的使用示例详解
2022/12/24 Python