使用javascript模拟观察者模式和事件监听广播机制

最新推荐文章于 2020-06-06 18:49:22 发布

topzhangbo

最新推荐文章于 2020-06-06 18:49:22 发布

阅读量2.3k

点赞数 1

文章标签： javascript function div button input class

本文链接：https://blog.csdn.net/topzhangbo/article/details/6501950

版权

本文展示了如何使用JavaScript实现观察者模式，通过创建一个`ObserverSubject`类，可以添加、移除和广播事件给多个监听器。示例中，不同的监听器通过改变页面元素的内容来响应事件。此外，还提供了添加、移除和清空监听器的功能。

摘要由CSDN通过智能技术生成

感谢一直支持和关注我的同学和朋友,希望能给大家带来一点帮助.

以下是完整源码.谢谢!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>使用javascript模拟观察者模式和事件监听广播机制 - 作者:张波 zhangbo99@gmail.com</title>
    <style type="text/css">
        div.box
        {
            float: left;
            width: 300px;
            border: solid 2px blue;
            height: 50px;
            margin-right: 5px;
        }
        #txt
        {
            display: block;
        }
    </style>
    <script type="text/javascript">
        //张波
        //Email:zhangbo99@gmail.com

        //观察者模式的主题
        function ObserverSubject(id)
        {
            this.ID = id; //实例的ID
            this._Listeners = new Array(); //存储当前所有监听器
            this.AddListener = function (listener)//添加新的监听器
            {
                this._Listeners.push(listener); //监听器加入数组
            };
            this.RemoveListener = function (listener, RemovingCallBack, RemovedCallback) //删除特定监听器,传入删除前回调委托和删除后回调委托
            {
                for (var i in this._Listeners) {//遍历当前所有监听器
                    if (this._Listeners[i] == listener) { //如果存在要删除的监听器
                        if (Rem