JavaScript實現添加及刪除事件的方法小結

2024-05-06 16:24:21

字體：大中小

來源：轉載

供稿：網友

這篇文章主要介紹了JavaScript實現添加及刪除事件的方法,實例總結了javascript對事件的添加及刪除的技巧,涉及javascript事件綁定的方法及瀏覽器兼容的相關注意事項,需要的朋友可以參考下

本文實例總結了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>