javascript自定义事件原理

JowayYoung 发布于2019-08-20 15:17 / 1564人阅读

摘要：我们就需要我们自己去定义事件其实就是我们写的函数，尤其是组件开发过程中，用的尤为多。可能有确定按钮取消按钮等操作。但是自定义事件的基本原理就是如上描绘的那样

我们都知道，鼠标点击click，触屏的touch等事件，可以触发相应的事件处理程序，也可以为这些事件添加事件处理程序，实际开发过程中可供我们使用的事件很少，click、doubleclick，mouseover、mousemove….等等这些。但当我们的程序越来越复杂的时候，光靠这些最底层的监听似乎已近不能满足我们的需求了。我们就需要我们自己去定义事件（其实就是我们写的函数），尤其是组件开发过程中，用的尤为多。

既然是事件，就要有事件的特性。我们要能为这个事件添加监听程序，这个事件触发时，监听程序也一定要触发才行。原理跟底层的事件类似。只不过，需要我们自己处理这些。

比如我们写了一个弹窗组件Box，他有弹出显示的方法show，还有关闭的方法close等。

可能有确定按钮、取消按钮等操作。随着产品或项目越复杂，被添加到这些确定或取消的操作也会越来越多。怎么办？一种是最原始的监听这些按钮的click事件，然后的写不同的回调。但是用回调的方式，有个弊端，当项目需求改变的时候，要往这个按钮上再另加个回调的时候，就要改原先的代码，要是以后再来一次，又要改。维护成本相当大。

我们不妨换个思路，把这个‘确定’或‘取消’想成像click这样的事件，当‘确定‘这个事件发生时其相应的一系列事件都会发生。就可以很好的解决这个问题。

基本原理：事件队列，即将监听程序存到一个数组中，再自定函数执行时，将添加监听数组中每个函数执行一遍。

定义一个对象专门用于存储自定义事件，定义一个方法用于注册监听，还有一个方法需要我们主动触发这个注册的监听程序(因为不像click等事件可以被浏览器监听捕获，浏览器无法识别我们自己定义的东西)。

代码如下：

//定义一个Box类
function Box(){
    //other code
    this.handlers = {};//存储事件的对象 
}
Box.prototype = {
    constructor: Box,
    //显示方法
    show: function (){
        //code
        //this.fire("show");
    },
    //关闭方法
    close: function (){
         //code
        //this.fire("close");
    },
    //监听方法，模拟addEventListener,其中type为事件函数，handler为需要触发的函数。
    addListener: function (type,handler){    
        if (typeof this.handlers[type] == "undefined")this.handlers[type] = []; 
        this.handlers[type].push(handler);//将要触发的函数压入事件函数命名的数组中
    },
    //手动触发方法
    fire: function (type){
        if ( this.handlers[type] instanceof Array ){
            var handlers = this.handlers[type];
            //遍历事件函数监听的程序，依次执行
            for (var i=0;i
剩下就是在需要的的时候添加注册监听了，比如
var box = new Box();
function listenShow1(){
    console.log(11);
}
function listenShow2(){
    console.log(22);
}
box.addListener("show",listenShow1);
box.addListener("show",listenShow2);
box.show();
当show方法执行，在外部或者show方法内部执行，这个可能根据实际具体项目或这具体情况来确定。
当然以上只是基本原理，可能没有特别考虑更为复杂或具体的实际情况。比如解绑是只想解绑某一类，像jQuery那样，在事件身上加命名空间，解绑该命名空间上的所有函数。但是自定义事件的基本原理就是如上描绘的那样！

云服务器混合云自定义事件 js 自定义触发事件自定义自相关算法原理

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

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

javascript 事件代理，原理和问题

摘要：可以用于事件处理函数中阻止冒泡行为。事件代理的原理和问题在我们了解了事件流之后，事件代理的原理就很好理解了，其实就是事件冒泡会触发容器的相关事件并执行监听函数。给注销事件绑定。如果此事件正在执行，会立即停止。有如下 html 片段 11111111111 22222222222 33333333333 要对 li 添加 click 事件。通常做法： var...

SolomonXie 2019-08-19 18:35 评论0 收藏0
Vue面试题精选：Vue原理以及双向数据绑定的实战过程

摘要：双向数据绑定指的是，将对象属性变化与视图的变化相互绑定。数据双向绑定已经了解到是通过数据劫持的方式来做数据绑定的，其中最核心的方法便是通过来实现对属性的劫持，达到监听数据变动的目的。和允许观察数据的更改并触发更新。 1 MVVM 双向数据绑定指的是，将对象属性变化与视图的变化相互绑定。换句话说，如果有一个拥有name属性的user对象，与元素的内容绑定，当给user.name赋予一个新...

malakashi 2019-08-02 16:10 评论0 收藏0
前端面试之Js篇

摘要：作为构造函数使用，绑定到新创建的对象。内部实现类和类的继承构造函数构造函数调用父类构造函数参考请尽可能详尽的解释的工作原理的原理简单来说通过对象来向服务器发异步请求，从服务器获得数据，然后用来操作而更新页面。 1 . 请解释事件代理 (event delegation) 当需要对很多元素添加事件的时，可以通过将事件添加到它们的父节点通过委托来触发处理函数。其中利用到了浏览器的事件冒泡机...

anyway 2019-08-20 17:03 评论0 收藏0
Javascript自定义事件

摘要：事件定义事件是与交互的最常见的方式但它也可以用于非代码中通过实现自定义事件实现自定义事件的原理是创建一个管理事件的对象如下代码是事件的定义存储事件处理程序由个键值对组成键表示事件名值是一个由事件处理程序组成的数组添加事件触发事件将传递给事件定义事件是与DOM交互的最常见的方式,但它也可以用于非DOM代码中--通过实现自定义事件.实现自定义事件的原理是创建一个管理事件的对象.如下代码...

Leck1e 2019-08-21 10:40 评论0 收藏0