jquery 事件註冊與重複事件處理

時間 2019-12-08

原文原文鏈接

<!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>