JS——事件的追加與移除
阿新 • • 發佈：2019-01-09
【前言】
JavaScript中的事件追加還有點不太明白，也一點都不懂，就是有點懵，感覺自己理解的和視訊裡的不太一樣，有哪個小夥伴有好的理解歡迎交流。
【正文】
一、事件的追加
第一種方法：
<script type="text/javascript" > //1、追加 //傳一個func方法進去，追加方法 var appendLoad = function (func) { //先從window.onload中把oldfunc取出來 var oldFunc = window.onload; //如果等於function，表明註冊的是方法 if (typeof(oldFunc)==="function") { window.onload = function () { //舊的function呼叫一次 oldFunc(); //新的呼叫一次 func(); }; } else {//不等於表明註冊的不是方法，怎麼辦呢？ window.onload = func; } }; </script>
第二種方法：
二、追加移除例子：<script type="text/javascript" > var appendLoad = (function () { var kv = {};//存方法鍵值對 return function (name, func) {//name：方法名，func：方法體 kv[name] = func; window.onload = function () { for (var k in kv) { kv[k]();//調kv就是在追加 } } }; })(); </script>
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>追加和移除</title> <script type="text/javascript" > //追加和移除 var eventHelper = (function () { var kv = {};//存方法鍵值對 return { add: function (name, func) { kv[name] = func;//追加一個成員進去 window.onload = function () { for (var k in kv) { kv[k](); } }; }, remove: function () { for (var k in kv) { if (k == name) { delete kv[k];//從物件裡移除成員 } } } }; })(); eventHelper.add("f1", function () { alert("第一個方法"); }); eventHelper.add("f1", function () { alert("第二個方法"); }); eventHelper.remove("f1"); </script> </head> <body> </body> </html>
三、效果圖：
只追加：
追加後又移除第一個方法：
