js之自定义事件

最新推荐文章于 2024-04-26 10:55:17 发布

大笨儿钟

最新推荐文章于 2024-04-26 10:55:17 发布

阅读量575

点赞数

分类专栏：我和JavaScript那点事文章标签： dom html

本文链接：https://blog.csdn.net/u014298440/article/details/73251896

版权

我和JavaScript那点事专栏收录该内容

21 篇文章 0 订阅

订阅专栏

js可以自己制定自定义事件，大致分为两种，DOM自定义事件和js自定义事件，下面上例子：

1.DOM自定义

比如我现在有一个需求，某一个按钮根据按下鼠标左键的时间不同来执行不同的响应，我们这里可以自己去定义事件来实现。

html结构如下：

<body>
<input  class="btn" type="button" value="click">
<script src="selfDomEvents.js"></script>
<script src="script.js"></script>
</body>

selfDomEvent.js如下：


/**
 * Created by Administrator on 2017/6/14 0014.
 */
(function(window,undefined){
    var lastTime;
    var selfEvt1=document.createEvent("Event");
    var selfEvt2=document.createEvent("Event");
    selfEvt1.initEvent("longMouseDown",true,true);
    selfEvt2.initEvent("shortMouseDown",true,true);
    document.getElementsByClassName("btn")[0].addEventListener("mousedown",function(){
        lastTime=Date.now();
    });
    document.getElementsByClassName("btn")[0].addEventListener("mouseup",function(){
        var interval=Date.now()-lastTime;
        selfEvt1.interval=selfEvt2.interval=interval;
       if(interval>1000){
           document.getElementsByClassName("btn")[0].dispatchEvent(selfEvt1);
       }else{
           document.getElementsByClassName("btn")[0].dispatchEvent(selfEvt2);
       }
    });



})(window)

可以看到上述定义了俩种事件，根据按下和弹起的时间间隔来调度不同的响应，响应的event里包含了时间差。

接下来是script.js

/**
 * Created by Administrator on 2017/6/14 0014.
 */
document.getElementsByClassName("btn")[0].addEventListener("longMouseDown",function(e){
   var ti= (e.interval/1000).toFixed(2);
    console.log("你已经长按了"+ ti+"秒");
});
document.getElementsByClassName("btn")[0].addEventListener("shortMouseDown",function(e){

    var ti= (e.interval/1000).toFixed(2);
    console.log("你已经短按了"+ ti+"秒");
});

当快速点击和长按点击会有不同输出：
//你已经短按了0.78秒
//你已经长按了1.64秒

2.js自定义

先上代码：

/**
 * Created by Administrator on 2017/6/14 0014.
 */
var DefineEvent=function(){
    this.handlers={};
}
DefineEvent.prototype={
    construct:"DefineEvent",
    addEventListener:function(type,func){
        if(this.handlers[type]!==undefined){
            this.handlers[type].push(func);
        }else{
            this.handlers[type]=[func];
        }
    },
    fire:function(data){
         var type=data.type;
        if(this.handlers[type]){
            for(var i=0;i<this.handlers[type].length;i++ ){
                this.handlers[type][i](data.params);
            }
        }
    },
    removeEventListener:function(type,func){
        if(!this.handlers[type]){
            throw("no this func to be removed!");
            return ;
        }


           for(var i=0;i<this.handlers[type].length;i++){
                if(this.handlers[type][i]===func){
                    this.handlers[type].splice(i,1);
                }
           }
    }
};



function bar(data){
var res= Math.sqrt( Math.pow(data.x,2)+Math.pow(data.y,2));
console.log(res);
}

var test=new DefineEvent();
test.addEventListener("myEvt1",bar);
test.fire({"type":"myEvt1","params":{"x":6,"y":8}});//10

写一个构造函数，然后在原型对象上定义三个方法，分别是添加监听，执行，移除监听。而实例的handlers属性是一个对象，其中每一个键代表事件名称，而对应的值是一个数组，里面保存所有的监听方法。

记录备忘

大笨儿钟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js之自定义事件

js可以自己制定自定义事件，大致分为两种，DOM自定义事件和js自定义事件，下面上例子：1.DOM自定义比如我现在有一个需求，某一个按钮根据按下鼠标左键的时间不同来执行不同的响应，我们这里可以自己去定义事件来实现。html结构如下：<body><input class="btn" type="button" value="click"><script src="selfDomEvents.js
复制链接

扫一扫