js自定义事件

原创 2018年04月16日 16:11:38

观察者模式: 这是一种创建松散耦合代码的技术。它定义对象间 一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知。由主体和观察者组成,主体负责发布事件,同时观察者通过订阅这些事件来观察该主体。主体并不知道观察者的任何事情,观察者知道主体并能注册事件的回调函数。

js自定义事件的基本原理: 主要元素:事件清单,触发器,添加器,添加器将监听程序存到一个数组中,调用触发器时,将事件清单里面的每个回调函数执行一遍。

 /**
     自定义事件
     */
    var EventHandle = {
        events: {}, //  事件清单
        // 添加器,向事件列表添加自定义事件和回调函数
        on: function (ev, callback) {
            callback = callback || function () {
            };
            if (typeof this.events[ev] === 'undefined') {
                this.events[ev] = [callback];
            } else {
                this.events[ev].push(callback);
            }
        },
        // 触发器,触发开关,循环事件清单
        emit: function (ev, args) {
            this.events[ev].forEach(function (fn) {
                fn(args);
            });
        },
        // 从移除事件清单中移除自定义事件
        off: function (ev) {
            delete this.events[ev];
        }
    };

    EventHandle.on('打招呼', function () {
        alert('你好')
    })
    EventHandle.emit('打招呼')

自定义事件的作用

作用非常多,比如你造轮子时可以用来处理一些异步的操作,比如自己封装个ajax来处理网络请求:

 MyAjax.send(url);
    MyAjax.on("success", function () {
        // TODO
    })
    MyAjax.on("error", function () {
        // TODO
    })

还比如一个单页面商城网站需要发送网络请求从后台返回数据,然后进行多个模块组件的渲染(导航头,消息通知,用户中心等),我们可以把这些渲染操作放在一个事件清单中,当网络请求成功返回之后触发自定义事件,遍历这些操作逐个渲染。


Android自定义组合控件

-
  • 1970年01月01日 08:00

javascript自定义事件应用实例

js自定义事件 实现观察者模式,模块之间完全通过事件协作和传递信息。写了一个典型的观察者应用和一个游戏的框架代码,来演示自定义事件的使用...
  • ruangong1203
  • ruangong1203
  • 2016-09-08 19:45:13
  • 2762

浅谈JavaScript模拟事件和自定义事件

1、DOM中的事件模拟 1) DOM中的事件模拟有以下3个步骤: 步骤1:创建事件对象event 可以在document对象上使用createEvent()方法创建event对象,此方法接收一个参数,...
  • zhouziyu2011
  • zhouziyu2011
  • 2017-03-24 23:02:53
  • 1402

JS自定义事件原生

说在开始,Javascript自定义事件类似设计的观察者模式,通过状态的变更来监听行为,主要功能解耦,易于扩展。多用于组件、模块间的交互。 原型模式下的js自定义事件var EventTarget =...
  • wkyseo
  • wkyseo
  • 2016-12-13 14:39:31
  • 2035

JavaScript实现自定义对象的自定义事件

前言: 大家都知道,在使用JavaScript可以很方便的使用addEventListener函数给DOM对象快速绑定一个或多个事件侦听器。 我们又如何在JavaScript的自定义对象中使用此方...
  • sunwanxin4
  • sunwanxin4
  • 2015-04-19 11:05:53
  • 1554

cocos2d-js的自定义事件的两种创建方法

自定义事件是当其它事件不满足用户的时候可以自己定义。像传递值或者对象。 我们都知道创建一个监听器无非就是两个步骤:一是创建Listener,二是添加到eventManage上。但是EventCust...
  • a641832648
  • a641832648
  • 2016-03-09 10:13:33
  • 2338

js自定义事件及事件交互原理概述(一)

在JS中事件是JS与浏览器交互的主要途径。事件是一种叫做观察者的设计模式,这是一种创建松散耦合代码的技术。对象可以发布事件,用来表示在该对象生命周期中某个有趣的时刻到了。然后其他对象可以观察该对象,等...
  • SeedCoding
  • SeedCoding
  • 2016-07-05 16:55:14
  • 641

如何在JavaScript中创建自定义事件

avaScript事件处理所有客户端应用程序的基础。当一个事件发生在目标元素,如按钮单击,鼠标移动,表单提交等,一个处理程序函数执行。一个事件对象传递给处理程序提供各种属性和大量的方法来防止违规行为。...
  • newcnzz
  • newcnzz
  • 2012-09-17 12:21:38
  • 824

javascript实现自定义事件

我们平时在操作dom时候经常会用到onclick,onmouseover等一系列浏览器特定行为的事件, 那么自定义事件,顾名思义,就是自己定义事件类型,自己定义事件处理函数,在合适的时候需要哪个事...
  • jiaowo_ccc
  • jiaowo_ccc
  • 2017-11-08 10:48:27
  • 73

js学习心得之js的自定义事件-基于观察者模式的实现

GOF对观察者模式的定义:Observer的意图是定义对象之间的一种一(被观察者)对多(观察者)的关系,当一个对象的状态发生改变时,所有依赖它的对象得到通知,并且会自动更新自己。 从这段经典的定...
  • songzheng_741
  • songzheng_741
  • 2012-01-11 22:44:33
  • 5381
收藏助手
不良信息举报
您举报文章:js自定义事件
举报原因:
原因补充:

(最多只允许输入30个字)