jquery 事件註冊 與重複事件處理，jquery事件
<!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 onload="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>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
