这篇文章主要介绍了 JavaScript 实现添加及删除事件的方法, 实例总结了 javascript 对事件的添加及删除的技巧, 涉及 javascript 事件绑定的方法及浏览器兼容的相关注意事项, 需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文实例总结了 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 程序设计有所帮助。
来源: