jquery 事件注册与重复事件处理

最新推荐文章于 2023-08-06 16:02:33 发布

置顶 jimiStephen

最新推荐文章于 2023-08-06 16:02:33 发布

阅读量4.5k

点赞数

分类专栏： javaScript 文章标签： jquery on live bind

本文链接：https://blog.csdn.net/luxideyao/article/details/44814763

版权

javaScript 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="us">
<head>
<meta charset="utf-8">
<title> test</title>
<script src="./jquery-1.10.2.js" type="text/javascript"></script>
<script>
function initEvents(){
//注册多次事件方法初始化
initOnEvent();
initBindEvent();
initClickvent();
initLiveEvent();
//只注册一个事件方法
oneEventByBindUnBind();
oneEvnetByDieLive();
}
function initOnEvent(){
//为id为onWayToEvent 按钮注册点击事件
$("#onWayToEvent").on("click",function(){
alert("this is one on event")
});
$("#onWayToEvent").on("click",function(){
alert("this is two on event")
});
$("#onWayToEvent").on("click",function(){
alert("this is three on event")
});
}

function initBindEvent(){
//为id为bindWayToEvent 的按钮注册点击事件
$("#bindWayToEvent").bind("click",function(){
alert("this is registry event by bind. one")
});

$("#bindWayToEvent").bind("click",function(){
alert("this is registry event by bind. two")
});

$("#bindWayToEvent").bind("click",function(){
alert("this is registry event by bind. three")
});
}

function initClickvent(){
$("#clickWayToEvent").click(function(){
alert("this is registry event by click. one");
});

$("#clickWayToEvent").click(function(){
alert("this is registry event by click. two");
});
$("#clickWayToEvent").click(function(){
alert("this is registry event by click. three");
});
}

function initLiveEvent(){
$("#liveWayToEvent").live("click",function(){
alert("this is registry event by click. one");
});
/*
$("#clickWayToEvent").click(function(){
alert("this is registry event by click. two");
});
$("#clickWayToEvent").click(function(){
alert("this is registry event by click. three");
});
*/
}

function oneEventByBindUnBind(){

registryManyEvent("oneEvnetByBind");
$("#oneEvnetByBind").unbind("click").bind("click",function(){
alert("only you !!!!!!!");
});

}

function oneEvnetByDieLive(){
registryManyEvent("oneEvnetByDieLive");
$("#oneEvnetByDieLive").die().live("click",function(){

alert("the one of you !!!!!!");
});
}

function registryManyEvent(id){
$("#"+id).click(function(){
alert("this is registry event by common. one");
});

$("#"+id).click(function(){
alert("this is registry event by common. two");
});
$("#"+id).click(function(){
alert("this is registry event by common. three");
});
}

</script>
<style>

.info{
width:100%;
height:auto;
float:auto;
margin:10px;
}

</style>

</head>
<body οnlοad="initEvents()">

<h1>Welcome to jquery registry event test</h1>
<button id="onWayToEvent" >通过on的方式多次注册事件</button> </br>
<div class="info">
通过 on方法注册的事件，每次的注册不会把原来的方法覆盖掉。会以队列的形式保存起来
点击的时候，触发事情会一个个按注册的顺序执行。
主要代码：
function initOnEvent(){
//为id为onWayToEvent 按钮注册点击事件
$("#onWayToEvent").on("click",function(){
alert("this is one on event")
});
$("#onWayToEvent").on("click",function(){
alert("this is two on event")
});
$("#onWayToEvent").on("click",function(){
alert("this is three on event")
});
}

</div>
<button id="bindWayToEvent">通过bind的方法多次注册事件</button>

<div class="info" >
通过 jquery 的bind方法多次注册的方法也是一样，不会把原来的方法覆盖了，也是把方法以
队列的形式保存起来，触发事件后按注册次序逐个执行。

主要代码：
function initBindEvent(){
//为id为bindWayToEvent 的按钮注册点击事件
$("#bindWayToEvent").bind("click",function(){
alert("this is registry event by bind. one")
});

$("#bindWayToEvent").bind("click",function(){
alert("this is registry event by bind. two")
});

$("#bindWayToEvent").bind("click",function(){
alert("this is registry event by bind. three")
});
}
</div>

<button id="clickWayToEvent">通过click方法多次注册事件</button>
<div class="info" >
通过 jquery 的click方法多次注册的方法也是上面的效果一样。

主要代码：
function initClickvent(){
$("#clickWayToEvent").click(function(){
alert("this is registry event by click. one");
});

$("#clickWayToEvent").click(function(){
alert("this is registry event by click. two");
});
$("#clickWayToEvent").click(function(){
alert("this is registry event by click. three");
});
}
</div>
<button id="liveWayToEvent">通过live 方法多次注册事件</button>
<div class="info" >
要怎么样才能把前面的事件给覆盖掉，只保留最后注册的事件方法?
</div>

<button id="oneEvnetByBind">通过unbind,bind方法进行事件的唯一注册</button>
<div class="info">
这个方法可以行得通
主要代码：
function oneEventByBindUnBind(){

registryManyEvent("oneEvnetByBind");
$("#oneEvnetByBind").unbind("click").bind("click",function(){
alert("only you !!!!!!!");
});

}

function registryManyEvent(id){
$("#"+id).click(function(){
alert("this is registry event by common. one");
});

$("#"+id).click(function(){
alert("this is registry event by common. two");
});
$("#"+id).click(function(){
alert("this is registry event by common. three");
});
}

</div>

<button id="oneEvnetByDieLive">通过 die live 方法进行事件的唯一加载</button>
<div class="info">
我们用的 jquery-1.10.2.js 这里没有提供 die live 方法。对于网上提供的这个方法是无效的。
主要代码：
function oneEvnetByDieLive(){
registryManyEvent("oneEvnetByDieLive");
$("#oneEvnetByDieLive").die().live("click",function(){

alert("the one of you !!!!!!");
});
}

function registryManyEvent(id){
$("#"+id).click(function(){
alert("this is registry event by common. one");
});

$("#"+id).click(function(){
alert("this is registry event by common. two");
});
$("#"+id).click(function(){
alert("this is registry event by common. three");
});
}

</div>

</body>
</html>