JavaScript实现添加及删除事件的方法小结
更新时间：2015年08月04日 15:31:32 作者：皮蛋
这篇文章主要介绍了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>
希望本文所述对大家的javascript程序设计有所帮助。
相关文章
这篇文章主要为大家详细介绍了js+css实现红包雨效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-07-07
下面小编就为大家带来一篇原生js封装运动框架的示例讲解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
这篇文章主要介绍了如何利用HTML+CSS+JS编写一个机器人总动员小游戏,代码简单易懂对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-11-11
这篇文章主要为大家详细介绍了ionic2.0双击返回键退出应用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-09-09
这篇文章主要介绍了JS实现Tab栏切换的两种方式,一种是面向过程的写法，一种是面向对象的写法，本文给大家分享详细案例代码，需要的朋友可以参考下2022-08-08
Vant Weapp 是移动端 Vue 组件库 Vant 的小程序版本,两者基于相同的视觉规范,提供一致的 API 接口,助力开发者快速搭建小程序应用,这篇文章主要给大家介绍了关于微信小程序引入Vant框架的相关资料,需要的朋友可以参考下2021-06-06
这篇文章主要为大家详细介绍了js中利用cookie实现记住密码功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-10-10
解析img图片没找到onerror事件 Stack overflow at line: 0
本篇文章主要介绍了img图片没找到onerror事件 Stack overflow at line: 0 需要的朋友可以过来参考下，希望对大家有所帮助2013-12-12
本篇文章主要是对javascript(js)中的小数点乘法除法问题进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-03-03
JavaScript中时间日期函数new Date()详解(5种获取时间戳的函数)
这篇文章主要给大家介绍了关于JavaScript中时间日期函数new Date()的相关资料,主要讲的是JS中5种获取时间戳的函数,new Date()是JavaScript中用于获取当前日期和时间的内置函数,需要的朋友可以参考下2024-04-04
最新评论