Mootools调研(4)

2014-01-27

3.2 事件管理

Element.Event，提供事件的包装，元素绑定事件机制；Element.Delegation，提供事件委托机制, 即把一个(动态)子元素上的事件处理绑定委托到父容器上。都可在core文件中查看源码。
下面介绍几个常用的事件管理方法：
MooTools已经提供了window对象的自定义事件: ‘domready’。 MooTools就是用window.addEvent(‘domready’, function() {})方式来代替传统JavaScript的window.onload 方法的。

该事件在页面的DOM树加载完成后触发

在需要保证所要操作的DOM元素已经加载完成的情况,本事件将非常有用

本事件只对window对象有效

默认的情况下所有的代码都应该包含在‘domready’事件监听下。
在文档完成后，如果向一个元素添加一个事件监听器的方法是：addEvent()方法。第一个参数是事件类型，包括：

 
Element.NativeEvents = {
    click: 2, dblclick: 2, mouseup: 2, mousedown: 2, contextmenu: 2, //mouse buttons
    mousewheel: 2, DOMMouseScroll: 2, //mouse wheel
    mouseover: 2, mouseout: 2, mousemove: 2, selectstart: 2, selectend: 2, //mouse movement
    keydown: 2, keypress: 2, keyup: 2, //keyboard
    orientationchange: 2, // mobile
    touchstart: 2, touchmove: 2, touchend: 2, touchcancel: 2, // touch
    gesturestart: 2, gesturechange: 2, gestureend: 2, // gesture
    focus: 2, blur: 2, change: 2, reset: 2, select: 2, submit: 2, paste: 2, input: 2, //form elements
    load: 2, unload: 1, beforeunload: 2, resize: 1, move: 1, DOMContentLoaded: 1, readystatechange: 1, //window
    error: 1, abort: 1, scroll: 1 //misc
};

addEvents()方法允许您添加多个事件监听到一个元素（或元素的集合）。
MooTools 的灵活性之一就是可以自由的扩展，我们也可以创建自己的自定义事件。我们只需要给 Element.Events 对象扩展相应的属性就可以自定义事件了。示例如下：

 
Element.Events.eventname = {
    'base' : 'click', // A base event such as click, keypress, 
    keydown, onload, etc. 
    'condition' : function() {
    // conditions that need to be met to trigger event
    },
    'onAdd' : function() {
    // Functions to trigger when you bind/add the event to elements
    },
    'onRemove' : function() {
    // Functions to execute when you unbind/remove elements
    }
};

自定义一个事件时，Element.Events.eventname中可包含如下内容：

base：(string, 可选) 自定义事件所监听的基类事件. 如果指定了下面condition参数,则本参数必须填写
condition：(function, 可选) 自定义事件触发的条件函数 (函数的参数为一个Event实例)
onAdd：(function, 可选) 当元素添加自定义事件时触发的函数 (函数的参数为一个Event实例)
onRemove：(function, 可选) 当元素删除自定义事件时触发的函数 (函数的参数为一个Event实例)

removeEvent()方法，它移除了一个指定的事件。如果你想删除一个元素的事件类型（或一组元素的事件类型），或者删除所有的事件，你必须使用removeEvents()方法。
使用cloneEvents()来克隆目标元素上的所有事件到本元素。

3.3 扩展方式

也可以扩展window类或者已有函数。
另外，Mootools中定义了一个Event类，它提供了对原始window的事件对象event的扩展，使用的时候，可以把原来的event对象作为Event的构造方法参数传入：

1 2	var event = new Event(event);

这样，返回的event就包含了所有mootools经过扩展的功能，具体扩展的属性和方法如下：

 
$('myLink').onkeydown = function(event){
    var event = new Event(event);        //扩展了的event  
    alert(event.shift);   //如果按下的按键是shift,则alert结果为true
};

插件扩展一般使用new Class方式或者全局自动生成的方式。例如下面的Namespace插件：

 
/*
---
Script: Namespace.class.js
Author: Eric Clemmons <eric@smarterspam.com>
Description: Allows for slightly new Class instantiations for name.spacing
Requires:
- core/Class.Extras
- core/Request
Provides: [Namespace]
License: MIT-style
*/
var Namespace = new Class({
    
    Implements: Options,
        
    options: {
        root:       window, // You can set the base for your namespace.  Defaults to `window`
        delimiter:  "."     // Delimiter for namespacing
    },
    
    // Accepts the namespace path "my.namespace.path" & the class options for instantiation
    initialize: function(namespace, options) {
        if (options.namespace) {
            this.setOptions(options.namespace);
        };
        
        // Parse options for strings where classes should exist
        options = this.parseOptions(options);
        
        // Return the instantiated class
        return this.getClass(namespace, options);
    },
    
    parseOptions: function(options) {
        // Replace `Extends: "myClass"` with `Extends: myClass` instantiation
        var params = ["Implements", "Extends", "Requires"];
        
        // Iterate through each type of dependency (i.e. "Extends")
        params.each(function(param) {
            var resources = $splat(options[param]);
            
            resources.each(function(resource, i) {
                // If the dependency isn't a class yet, try to load the class
                if ($type(resource) === "string") {
                    // Get existing class or load it via SJAX
                    var resource = this.load(resource);
                    
                    // If class finally exists, assign it to it's key (for Requires)
                    // or to the param itself (for Extends)
                    if ($type(resource) === "class") {
                        if ($type(options[param]) === "array") {
                            options[param][i] = resource;
                        } else {
                            options[param] = resource;
                        }
                    } else {
                        if (param !== "Requires") {
                            throw new Error(param + " class \"" + resource + "\" does not exist or could not be loaded.");
                        }
                    }
                }
            }, this);
        }, this);
        
        return options;
    },
    
    // Traverses down the namespace path and returns the (newly instantiated if not existing) class
    getClass: function(namespace, options) {
        var root = this.options.root;
        
        // Iterate through each section of the namespace
        namespace.split(this.options.delimiter).each(function(name, i, names) {
            // Up until the last leaf, create an object if undefined
            if (i < names.length - 1) {
                if (!root[name]) {
                    root[name] = {};
                }
            } else {
                // If the last leaf doesn't exist & we're looking to instantiate, instantiate the class
                if (!root[name] && options) {
                    return root[name] = new Class(options);
                }
            };
            
            root = root[name];
        });
        
        // Return the requested namespaced class
        return root;
    },
    
    load: function(namespace) {
        (new Request({
            url:    Namespace.getBasePath(namespace) + ".js",
            method: 'GET',
            async:  false,
            evalResponse:   true
        })).send();
        
        return this.getClass(namespace);
    }
    
});
Namespace.paths = {
    _base: "."
};
Namespace.setBasePath = function(namespace, path) {
    if (!path) {
        var path = namespace;
        var namespace = "_base";
    }
    
    Namespace.paths[namespace] = path;
};
Namespace.getBasePath = function(namespace) {
    // Start with the base path
    var path = Namespace.paths._base;
    
    // Iterate through each specified namespace path ("Moo.Core" => "js/Moo/Core/Source")
    for (var stub in Namespace.paths) {
        if (stub === namespace.substring(0, stub.length)) {
            path += "/" + Namespace.paths[stub];
            // Remove stub from namespace, as we've already pathed it
            namespace = namespace.substring(stub.length + 1);
            break;
        }
    }
    
    return path + "/" + namespace.replace(/\./g, "/");
};
Namespace.require = function(namespaces) {
    $splat(namespaces).each(function(namespace) {
        new Namespace(namespace, { Requires: namespace });
    });
};
// Initialize base path based on Namespace script & document URL
;(function() {
    // Get the last script loaded (should be this script)
    var script = $$('script').getLast();
    // Trim off the script name
    var jsUrl = script.src.substring(0, script.src.lastIndexOf("/"));
    // Trim off the page name as well
    var baseUrl = document.URL.substring(0, document.URL.lastIndexOf("/") + 1);
    // Subtract page path from script path to get script subfolder
    var path = jsUrl.replace(baseUrl, '');
    
    Namespace.setBasePath(path);
})();