本文实例总结了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;
}
}
最后再来看一个完整的实例: