JS——事件的追加与移除

来源：互联网发布：radon变换算法编辑：程序博客网时间：2024/06/05 15:27

【前言】

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>

三、效果图：

只追加：

追加后又移除第一个方法：

阅读全文

0 0