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屬性是一個對象，其中每一個鍵代表事件名稱，而對應的值是一個數組，裏面保存所有的監聽方法。
記錄備忘