添加自定义事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>添加自定义事件</title>
<style>
.box{
width: 150px;
height: 150px;
background: red;
position: absolute;
}
</style>
</head>
<body>
<div id='status' class='box'>
</div>
<script>
function EventTarget(){
this.handlers = {}
}
EventTarget.prototype = {
//添加一个事件
addHandler: function(type,handler){
//this.handlers[type] = handler;
if(typeof this.handlers[type] == 'undefined'){
this.handlers[type] = [];
}
this.handlers[type].push(handler);
console.log(this.handlers[type]);
},
//触发一个事件
fire: function(event){
//这里为何要这样指定this
if(!event.target){
event.target = this;
}
//this.handlers[type]();
var handlers = this.handlers[event.type];
console.log(handlers);
//这里为何要判断？
if(handlers instanceof Array){
for(var i=0;i<handlers.length;i++){
handlers[i](event);
}
}
},
//移除一个事件
removeHandler: function(type,handler){
// this.handlers[type] = null;
var handlers = this.handlers[type];
if(handlers instanceof Array){
for(var i=0;i<handlers.length;i++){
if(handlers[i] == handler){
break;
}
}
handlers.splice(i,1);
}
}
}
var EventUtil = {
addHandle: function(element,type,handle){
if(element.addEventListener){
element.addEventListener(type,handle,false);
}else if(element.atachEvent){
element.attachEvent('on'+type,handle);
}else {
element['on'+type] = handle;
}
},
removeHandle: function(element,type,handle){
if(element.removeEventListener){
element.removeEventListener(type,handle,false);
}else if(element.detachEvent){
element.detachEvent('on'+type,handle);
}else {
element['on'+type] = handle;
}
},
getEvent: function(event){
return event ? event : window.event;
},
getTarget: function(event){
return event.target || event.srcElement;
},
preventDefault: function(event){
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue = false;
}
},
stopPropagation: function(event){
if(event.stopPropagation){
event.stopPropagation();
}else {
event.cancelBubble = true;
}
}
}
//添加自定义事件
var DragDrop = function(){
var dragging = null,
diffX=0,
diffY=0,
dragdrop = new EventTarget();
function handleEvent(event){
//获取事件和目标
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
console.log('target',target);
//确定事件
switch(event.type){
case 'mousedown':
console.log('mousedown');
if(event.target.className.indexOf('box')>-1){
dragging = target;
diffX = event.clientX - target.offsetLeft;
diffY = event.clientY - target.offsetTop;
dragdrop.fire({
type: 'dragstart',
target: dragging,
x:event.clienX,
y:event.clientY
});
}
break;
case 'mousemove':
if(dragging !==null){
dragging.style.left = (event.clientX - diffX) + 'px';
dragging.style.top = (event.clientY - diffY) + 'px';
//触发自定义事件
dragdrop.fire({
type: 'drag',
target: dragging,
x: event.clientX,
y: event.clientY,
});
}
break;
case 'mouseup':
dragdrop.fire({
type: 'dragend',
target: dragging,
x: event.clientX,
y: event.clientY,
})
dragging = null;
break;
}
}
//公共接口
dragdrop.enable = function(){
EventUtil.addHandle(document,'mousedown',handleEvent);
EventUtil.addHandle(document,'mousemove',handleEvent);
EventUtil.addHandle(document,'mouseup',handleEvent);
},
dragdrop.disable = function(){
EventUtil.removeHandle(document,'mousedown',handleEvent);
EventUtil.removeHandle(document,'mousemove',handleEvent);
EventUtil.removeHandle(document,'mouseup',handleEvent);
}
return dragdrop;
}()
DragDrop.enable();
DragDrop.addHandler('dragstart',function(event){
var status = document.getElementById('status');
status.innerHTML = 'start:' + event.target.id;
});
DragDrop.addHandler('drag',function(event){
var status = document.getElementById('status');
status.innerHTML = "ing:" + event.target.id+ "("+event.x + ',' + event.y +")";
});
DragDrop.addHandler("dragend",function(event){
var status = document.getElementById('status');
status.innerHTML = "end:" + event.target.id+ "("+event.x + ',' + event.y +")";
});
</script>
</body>
</html>