`
隐形的翅膀
  • 浏览: 498208 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

JavaScript 实现事件的广播,并让各个对象执行事件

阅读更多
<html>
<head>
<title>test</title>
<script>

function DoEvents(){
    this.lstner=[];
    this.addListen=function(obj){//添加侦听

     obj=typeof(obj)=="string"?document.getElementById(obj):obj
        //如果传入的obj 是字符串, 则用docuent去得到对象,加入到数组中
     this.lstner.push(obj);
        
    }
    
    this.broadcastEvent=function(f,args){//广播事件
        // f 开始传入时是个字符串,经过 eval 转换后,变为函数
        for(i=0;i<this.lstner.length;i++){
            eval(f).apply(this.lstner[i],args);  
//将showid这个函数,放到lstner[i]这个对象中执行, 换句话说 showid中的this,表示lstner[i] 这个对象
//showid  这个函数会立即被触发并执行
        }
    }
}
//应用
var de=new DoEvents();
window.onload=function(){
    for(i=0;i<6;i++){
        de.addListen("test"+i);
    }
}
function showId(a){//测试 方法

    this.innerHTML=a+this.id;
}
function test(){
    var arr=["该标签的ID是:"];
    de.broadcastEvent("showId",arr);
}
</script>

</head>
<body>
<div id="test0">000</div>
<div id="test1">111</div>
<div id="test2">222</div>
<div id="test3">333</div>
<div id="test4">444</div>
<div id="test5">555</div>
<input type="button" onClick="test()" value="test" />
</body>
</html>


另外一个简单的例子, 为一个简单对象添加一个事件, 改变函数的执行的上下文

MyObj={
   a:1,
   show:function(){
        alert(11111111);
   }
}
function test(a){
  alert("execute test method "+a);
}
window.onload=function(){
     test.apply(MyObj,["ss"]);
}
分享到:
评论

相关推荐

    javascript自定义事件功能与用法实例分析.docx

    下面是一个简单的示例,展示如何使用自定义事件实现跨模块通信: ##### 文件:a.js ```javascript import b from "./b"; import c from "./c"; var a = document.getElementById("a"); a.addEventListener("click...

    JavaScript的简单且小巧119字节事件发射器库

    事件发射器库是JavaScript编程中的一个重要概念,它允许对象之间通过事件进行通信,增强了代码的模块化和可扩展性。标题提及的“JavaScript的简单且小巧119字节事件发射器库”是一个轻量级的实现,它在保持高效的...

    javascript 全集

    JavaScript 是一种广泛用于网页和网络应用的脚本语言,它主要负责实现客户端的交互性与动态效果。在网页开发中,JavaScript 可以直接在用户的浏览器上运行,无需服务器支持。"JavaScript 全集"通常指的是包含...

    pubAndSubjs基于浏览器内置API实现的发布订阅模式封装

    在这个模式中,"发布者"(Publisher)创建并广播事件,而"订阅者"(Subscriber)或"监听器"(Listener)对这些事件表达兴趣并注册回调函数。当事件被发布时,所有已订阅该事件的监听器都会收到通知,从而执行相应的...

    中介者模式1

    各个对象可以通过订阅特定的事件来监听其他对象的行为,然后根据接收到的事件执行相应的操作,而不是直接与事件发起者进行交互。 具体来说,`subscribe`方法用于注册事件监听器,接收两个参数:一个是事件频道...

    前端开源库-stampit-event-bus

    它作为一个独立的中介,让各个组件之间可以通过发布和订阅事件来传递数据,而无需直接相互依赖,增加了代码的灵活性和可维护性。 在Stampit-event-bus中,你可以: 1. 创建事件总线实例:通过Stampit的工厂函数,...

    ASP基于WEB聊天室的设计与实现(源代码+论文+任务书).rar

    对于这个项目,你需要详细阐述ASP在聊天室中的应用,对比其他技术的优缺点,分析系统架构,展示实现的各个模块,并对系统的性能和可扩展性进行评估。 5. 任务书: 任务书明确了毕业设计的目标和要求,包括功能需求...

    前端项目-radio.zip

    Radio库的代码结构可能包括以下几个部分:广播器(Publisher)类,用于发布事件;订阅器(Subscriber)类,用于订阅和接收事件;以及事件管理机制,用于注册和解除注册订阅者。 8. **API介绍**: - `Radio....

    深入理解Javascript中的观察者模式

    在JavaScript中实现观察者模式,可以通过简单的回调函数机制,或者利用现代JavaScript提供的事件绑定方法(如在浏览器端使用addEventListener方法)。在简单的回调机制中,观察者可以注册一个回调函数到主题上,当...

    javascript设计模式 – 职责链模式原理与用法实例分析

    此外,还可以应用在服务器端的中间件处理,如Express.js中的中间件机制,请求从上到下依次经过各个中间件,每个中间件根据需要执行相应操作并决定是否传递给下一个中间件。 总的来说,职责链模式提供了一种优雅的...

    js代码-中介者模式模板

    在JavaScript中,我们可以创建一个抽象的中介者类,定义一个公共接口用于与各个对象进行交互。然后,创建具体对象类,它们分别继承自抽象的中介者,并实现与中介者交互的方法。接下来,我们来看`main.js`中的实现。 ...

    Java相关技术.pdf

    5. RunAsManager:在执行特定操作时,可以临时替换Authentication对象,实现权限模拟。 6. Secure Object拦截器:协调各个组件协同工作。 7. ObjectDefinitionSource:提供授权规则的来源,定义哪些操作需要哪些权限...

    你画我猜Vue20Websocket

    这个项目旨在实现一个实时的、双向通信的绘画猜词游戏,让玩家可以在同一平台上进行协作和竞争。Vue.js是目前非常流行的一个前端JavaScript框架,而WebSocket则是一种提供全双工通信的协议,它允许服务器和客户端...

    前端项目-backbone.wreqr.zip

    3. **事件总线(EventAggregator)**:允许在Backbone对象之间广播和监听事件,避免了直接引用和硬绑定,增强了组件间的解耦性。 4. **命令模式(Commands)**:Wreqr也支持命令模式,可以定义并执行命令,这对于处理...

    websocket.rar

    创建一个新的WebSocket对象,指定服务器的WebSocket路径,然后监听`open`、`close`、`message`事件。 ```javascript var socket = new WebSocket('ws://yourserver.com/websocket'); socket.onopen = function...

    前端开源库-bitgo

    BitGo的JavaScript SDK是其面向开发者的强大工具,提供了丰富的API接口,涵盖了账户管理、交易处理、钱包操作等各个方面。这个SDK允许开发者在浏览器环境中使用,同时也支持Node.js服务器端环境。 1. **初始化API...

    好友定位系统

    - **BroadcastReceiver** 可监听系统或自定义广播事件,例如当设备网络状态改变时,更新定位策略。 - **ContentProvider** 可能用于共享数据,比如好友的位置信息可以在应用内部或与其他应用之间共享。 在实际开发...

    Laravel5.3正文文档

    - **事件广播**:探讨 Laravel 的事件系统,包括事件监听器、事件广播等高级功能。 - **缓存**:介绍 Laravel 缓存机制及其配置方法。 - **事件**:深入探讨 Laravel 事件系统的设计理念和使用方法。 - **文件存储**...

    blogpost-react-websocket-chat:关于聊天、React和 websocket 的博客文章的配套存储库

    Node.js是一个开放源代码、跨平台的JavaScript运行环境,用于在服务器端执行JavaScript代码。在本项目中,我们将使用Node.js搭建后端服务器,并集成WebSocket库(如`ws`或`socket.io`)来处理客户端的连接和数据交换...

Global site tag (gtag.js) - Google Analytics