《JavaScript高级程序设计（第3版）》学习笔记——十七、高级技巧 about blog HOT 3 CLOSED

function EventTarget(){
    this.handlers = {}; // 储存事件处理程序
}

EventTarget.prototype = {
    constructor: EventTarget,
    // 用于注册给定类型事件的事件处理程序
    // 接收两个参数：
    // - 事件类型
    // - 用于处理该事件的函数
    addHandler: function(type, handler){
        if(typeof this.handlers[type] == 'undefined'){   // 是否存在一个针对该事件类型的数组，没有则创建一个新的
            this.handlers[type] = [];
        }
        // 添加该处理程序到数组的末尾
        this.handlers[type].push(handler);
    },
    // 用于触发一个事件
    // 接收一个单独的参数
    // - 至少包含 type 属性的对象
    fire: function(event){
        if(!event.target){  // 如果 event 对象尚未指定 target 属性，就先给 event 对象，设置一个 target 属性
            event.target = this;
        }
        if(this.handlers[event.type] instanceof Array){
            var handlers = this.handlers[event.type]; // 查找对应事件类型的一组处理程序
            for(var i=0, len=handlers.length; i<  len; i++){
                handlers[i](event); // 调用各个函数，并给出 event 对象。因为这些都是自定义事件，所以 event 对象上还需要额外信息可以自己决定
            }
        }
    },
    // 用于注销某个事件类型的事件处理程序
    // 是 addHandler() 的辅助
    // 接收参数一样：事件的类型和事件处理程序
    
    removeHandler: function(type, handler){
        if(this.handlers[type] instanceof Array){
            var handlers = this.handlers[type];
            for(var i=0, len=handlers.length; i<  len; 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);

// 触发事件
target.fire({
    type: 'message',
    message: 'hello, world!'
});

// 删除事件处理程序
target.removehandler('message', handleMessage);

// 再次，应没有处理程序
target.fire({
    type: 'message',
    message: 'hello, world!'
});

function Person(name, age){
    EventTarget.call(this);
    this.name = name;
    this.age = age;
}

inheritPrototype(Person, EventTarget);

Person.prototype.say = function(message){
    this.fire({type: "message", message: message});
}

function handleMessage(event){
    alert(event.target.name + ' says: ' + event.message);
}

// 创建新 person
var person = new Person('Nicholas', 29);

// 添加一个事件处理程序
person.addHandler('message', handleMessage);

// 在该对象上调用 1 个方法，它触发消息事件
person.say('Hi there.');

var DragDrop = function () {

    var dragging = null;    // 初始是 null，存放被拖动的元素。当其不为 null 时，就知道正在拖动某个东西

    function handleEvent(event) {
        // 处理拖放功能中的所有的三个鼠标事件

        //get event and target
        event = EventUtil.getEvent(event);  // 获取 event 对象的引用
        var target = EventUtil.getTarget(event);    // 获取事件目标的引用

        //determine the type of event
        switch (event.type) {
            case "mousedown":
                // 当 mousedown 事件发生时，检查 target 的 class 是否包含“draggable”类，是就将其存放到 dragging 中 => 这个技巧可以很方便地通过标记语言而非 JavaScript 脚本来确定可拖动的元素 
                if (target.className.indexOf("draggable") > -1) {
                    dragging = target;
                }
                break;

            case "mousemove":
                if (dragging !== null) {    // 检查 draging 是否为 null，就知道 draging 就是要拖动的元素

                    //assign location
                    dragging.style.left = event.clientX + "px";
                    dragging.style.top = event.clientY + "px";
                }
                break;

            case "mouseup":
                // 仅仅将 draging 重置为 null，让 mousemove 事件中的判断失效 
                dragging = null;
                break;
        }
    };

    //public interface
    // DragDrop 还有两个公共方法，只是相应添加和删除所有的事件处理程序。这两个函数提供了额外的对拖放功能的控制手段
    return {
        enable: function () {
            EventUtil.addHandler(document, "mousedown", handleEvent);
            EventUtil.addHandler(document, "mousemove", handleEvent);
            EventUtil.addHandler(document, "mouseup", handleEvent);
        },

        disable: function () {
            EventUtil.removeHandler(document, "mousedown", handleEvent);
            EventUtil.removeHandler(document, "mousemove", handleEvent);
            EventUtil.removeHandler(document, "mouseup", handleEvent);
        }
    }
}();

DragDrop.enable();

var DragDrop = function(){
        
    // ...

    diffX = 0,
    diffY = 0;

function handleEvent(event){

    // ...       

    //determine the type of event
    switch(event.type){
        case "mousedown":
            if (target.className.indexOf("draggable") > -1){
                // ...

                diffX = event.clientX - target.offsetLeft;
                diffY = event.clientY - target.offsetTop;

            }                     
            break;
            
        case "mousemove":
            if (dragging !== null){
                
                // 指定位置
                dragging.style.left = (event.clientX - diffX) + "px";
                dragging.style.top = (event.clientY - diffY) + "px";                    
            }                    
            break;
            
        case "mouseup":
            // ...
    }
};

//public interface
return {            
    enable: function(){
        // ...
    },
    
    disable: function(){
        // ...
    }
}
}();

DragDrop.enable();

var DragDrop = function(){
        
    var dragdrop = new EventTarget(),
        dragging = null,
        diffX = 0,
        diffY = 0;
    
    function handleEvent(event){
    
        //get event and target
        event = EventUtil.getEvent(event);
        var target = EventUtil.getTarget(event);            
    
        //determine the type of event
        switch(event.type){
            case "mousedown":
                if (target.className.indexOf("draggable") > -1){
                    dragging = target;
                    diffX = event.clientX - target.offsetLeft;
                    diffY = event.clientY - target.offsetTop;

                    // 触发自定义事件
                    dragdrop.fire({type:"dragstart", target: dragging, x: event.clientX, y: event.clientY});
                }                     
                break;
                
            case "mousemove":
                if (dragging !== null){
                    
                    //assign location
                    dragging.style.left = (event.clientX - diffX) + "px";
                    dragging.style.top = (event.clientY - diffY) + "px";   

                    //fire custom event
                    // 触发自定义事件
                    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;
        }
    };
    
    //public interface
    dragdrop.enable = function(){
            EventUtil.addHandler(document, "mousedown", handleEvent);
            EventUtil.addHandler(document, "mousemove", handleEvent);
            EventUtil.addHandler(document, "mouseup", handleEvent);
    };
        
    dragdrop.disable = function(){
            EventUtil.removeHandler(document, "mousedown", handleEvent);
            EventUtil.removeHandler(document, "mousemove", handleEvent);
            EventUtil.removeHandler(document, "mouseup", handleEvent);
    };
    
    return dragdrop;
}();

DragDrop.enable();

// 上述修改令 DragDrop 对象支持了事件。为 DraoDrop 对象的每个事件添加了事件处理程序。
                
DragDrop.addHandler("dragstart", function(event){
    var status = document.getElementById("status");
    status.innerHTML = "Started dragging " + event.target.id;
});

DragDrop.addHandler("drag", function(event){
    var status = document.getElementById("status");
    status.innerHTML += "<br>Dragged " + event.target.id + " to (" + event.x + "," + event.y + ")";
});

DragDrop.addHandler("dragend", function(event){
    var status = document.getElementById("status");
    status.innerHTML += "<br>Dropped " + event.target.id + " at (" + event.x + "," + event.y + ")";
});