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

前端之家收集整理的这篇文章主要介绍了JavaScript实现添加及删除事件的方法小结前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

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

函数 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,Handler) { //如果是FF if(obj.removeEventListener) { obj.removeEventListener(EventType,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 = "设置了事件,添加" + oncount1 + "文章,左边列表1自动增加!"; } else { obj.innerHTML = "没有设置事件,添加" + oncount1 + "文章,左边列表1没有变化!"; } } function add2(obj) { oncount2 = oncount2 + 1; if(isSetEv2) { obj.innerHTML = "设置了事件,添加" + oncount2 + "文章,左边列表2自动增加!"; } else { obj.innerHTML = "没有设置事件,添加" + oncount2 + "文章,左边列表2没有变化!"; } } function addList1() { count1 = count1 + 1; $("list1").innerHTML = "动态添加" + count1 + "文章了!"; } function addList2() { count2 = count2 + 1; $("list2").innerHTML = "动态添加" + count2 + "文章了!"; }

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

添加和删除事件的方法(兼容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,fnHandler){ if (oTarget.removeEventListener) {//非IE oTarget.removeEventListener(sEventType,false); }else if (oTarget.detachEvent) {//IE oTarget.detachEvent('on' + sEventType,fnHandler); }else { oTarget['on' + sEventType] = null; } }

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

JavaScript<a href="https://www.jb51.cc/tag/tianjia/" target="_blank" class="keywords">添加</a>、<a href="https://www.jb51.cc/tag/shanchu/" target="_blank" class="keywords">删除</a>事件的<a href="https://www.jb51.cc/tag/fangfa/" target="_blank" class="keywords">方法</a>

猜你在找的JavaScript相关文章