自定义事件

陆斌发布于2019-08-22 18:15 / 2180人阅读

摘要：介绍自定义事件之前，首先要介绍一种设计模式观察者模式。自定义事件背后的概念是创建一个管理事件的对象，让其他对象监听这些事件。问自定义事件的认知逻辑是什么答咳咳应该是观察者模式吧，能力有限，具体的描述以后补上。

介绍自定义事件之前，首先要介绍一种设计模式--观察者模式。

事件是一种叫做观察者的设计模式，是一种创建松散耦合代码的技术。

观察者模式有两类对象组成：主体和观察者。主体负责发布事件，来表示该对象声明周期某些有趣的时刻到了；观察者通过监听这些事件来观察该主体，等待某些有趣的时刻到来，并运行代码来响应。

该模式的一个关键概念是主体并不知道观察者的任何事情，也就是说他可以独立存在并正常运转，即时观察者不存在。

举个例子，政府发布某个文件，下面部门根据文件执行相应的任务。政府为主体，执行人为观察者。但是政府并不知道具体执行这件事的人是谁，甚至都不知道是不是有人在执行，就好像政府让下面的人对老城区拆迁改造但是并不知道他们会强拆一样，但这并不影响政府发布文件。

涉及到DOM上，DOM元素便是主体，你的事件处理程序（即回调函数）便是观察者。

自定义事件背后的概念是创建一个管理事件的对象，让其他对象监听这些事件。具体步骤如下：

定义事件管理对象的构造函数--EventTarget,EventTarget类型有一个属性和三个方法：

属性--handlers:用于存储事件处理程序

方法1--addHandler():用于对给定事件类型注册事件处理程序

方法2--fire(): 用于触发给定事件

方法3--removeEvent():用于注销给定事件类型的事件处理程序

创建一个EventTarget类型的事件管理对象

通过addHandler()添加一个事件管理程序

通过fire()激发该事件

通过removeEvent()注销该事件

代码如下：

//定义事件管理对象的构造函数--`EventTarget`
function EventTarget(){
    this.handlers = {};
}
EventTarget.prototype = {
    constructor:EventTarget,
    
    /*
    用于对给定事件类型注册事件处理程序
    param:事件类型--type;用于处理该事件的函数--handler
    
    */
    addHandler:function(type,handler){
        if(typeof this.handlers[type] == "undefined"){//若不存在针对该事件的数组，则创建一个新数组
            this.handlers[type] = [];
        }
        this.handlers[type].push(handler);//将处理程序添加到数组中，同一事件可以有多个事件处理程序
    },
    
    /*
    用于触发给定事件
    param:{} 至少包含type属性
    
    */
    fire:function(event){
        if(!event.target){
            event.target = this;
        }
        if(this.handlers[event.type] instanceof Array){
            var handlers = this.handlers[event.type];
            for(var i = 0; i < handlers.length; i++){
                handlers[i](event);
            }
        }
    },
    
    /*
    用于注销给定事件类型的事件处理程序
    param:事件类型--type;用于处理该事件的函数--handler
    
    */
    removeHandler:function(type,handler){
        if(this.handlers[type] instanceof Array){
            var handlers = this.handlers[type];
            for(var i = 0; i < handlers.length; i++){
                if(handlers[i] === handler){
                    break;
                }
            }
            handlers.splice(i,1);
        }
    }  
};
function handleMessage(event){
    alert("Message received:" + event.message);
}
//创建事件管理对象
var target = new EventTarget();
//添加事件执行程序
target.addHandler("message",handleMessage);
//触发message事件
target.fire({type:"message",message:"Hello World"});//Message received:Hello World
//注销事件执行程序
target.removeHandler("message",handleMessage);
//再次触发message事件
target.fire({type:"message",message:"Hello World"});//无警告框

思考:

宁向东老师在得到专栏说过：相比于认知能力，拥有知识的数量的多少，并不重要，真正重要的是在学习一门知识的同时，要格外的在意这些知识所传达出来的认知逻辑。

问：自定义事件的认知逻辑是什么？
答：咳咳...应该是观察者模式吧，能力有限，具体的描述以后补上。

若理解有误，敬请斧正
详情请见js高程第22章--高级技巧

混合云私有云自定义事件 js 自定义触发事件自定义头像自定义

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95670.html

【Vue原理】Event - 白话版

摘要：写文章不容易，点个赞呗兄弟专注源码分享，文章分为白话版和源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧研究基于版本如果你觉得排版难看，请点击下面链接或者拉到下面关注公众号也可以吧原理白话版事件是我最感兴趣的东西之写文章不容易，点个赞呗兄弟专注 Vue 源码分享，文章分为白话版和源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧研究基于...

kumfo 2019-08-23 18:35 评论0 收藏0
javascript自定义事件浅析

摘要：首先来看看什么是自定义事件让函数能够具备事件的某些特性。其实自定义事件在一些主流的类库中都有实现，后续会分析具体的实现方法。今天，我们就先用简单的例子来实现自定义事件的功能。在团队协作的很多情况下，某个js的函数会根据不断增加的需求进而不断增加功能，如果功能需求累积过多，我们就很难把控自己在这个函数中新定义的变量会不会覆盖掉之前的定义。如： function action(){ ...

miya 2019-08-21 10:46 评论0 收藏0
【Vue原理】Event - 源码版之绑定组件自定义事件

摘要：写文章不容易，点个赞呗兄弟专注源码分享，文章分为白话版和源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧研究基于版本如果你觉得排版难看，请点击下面链接或者拉到下面关注公众号也可以吧原理源码版之绑定组件自定义事件组件写文章不容易，点个赞呗兄弟专注 Vue 源码分享，文章分为白话版和源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧研究基于...

amuqiao 2019-08-23 18:36 评论0 收藏0
vue总结系列--组件化

摘要：触发事件可以携带数据，这些数据被用于传递给绑定了事件的其它组件的回调函数上，进而被传递给其它组件。父组件可以在回调函数里做任何事情，颇有灵活性。一般情况下，父组件会在回调函数中更新自己的状态数据。上一篇博文梳理了vue的数据驱动和响应式相关的特性，这一篇博文就来梳理vue的一个很重要的特性，组件化。自定义组件之于vue，其意义不亚于函数之于C，java之类的编程语言。函数是计算机科学...

cuieney 2019-08-22 18:28 评论0 收藏0
jQuery 事件(三) 事件的绑定和解绑、对象的使用、自定义事件

摘要：事件的绑定和解绑的多事件绑定之前学的鼠标事件，表单事件与键盘事件都有个特点，就是直接给元素绑定一个处理函数，所有这类事件都是属于快捷处理。由于浏览器事件冒泡特性，可以在触发时把这个事件往上冒泡到上，因为上绑定事件响应，所以能触发这个动作。事件的绑定和解绑 on()的多事件绑定之前学的鼠标事件，表单事件与键盘事件都有个特点，就是直接给元素绑定一个处理函数，所有这类事件都是属于快捷处理...

niuxiaowei111 2019-08-22 10:53 评论0 收藏0
从shakejs来看自定义事件，及addEventListener

摘要：并没有这个事件，那就用到了自定义事件这个东西了。先看看自定义事件在中的代码自定义事件名称是否冒泡是否可以停止捕获上面整个的代码，做了一个兼容性的处理。触发自定义事件上面是满足频率后就出发自定义的事件这就是触发事件的方法。 shakejs是一个摇一摇的工具 gitHub : https://github.com/alexgibson/shake.js 使用方法 //引入初始化...

王笑朝 2019-08-21 10:27 评论0 收藏0