jquery中document ready 与事件监听绑定和解绑

1、document ready

先看代码：

$(function(){
 alert('你好');
});

传入的参数是一个函数，我们需要做的是，需要在文档准备完毕之后去执行它。现在有2种情况：

1、文档还没有准备完毕，这些事件怎么办

2、文档已经准备完毕，这些事件怎么办

解决办法是，预先定义一个闭包内的全局变量来收集这些事件，然后在文档准备完毕之后去执行它。而如果文档已经准备完毕之后，传入的事件就直接执行即可。

(function() {
    // 预先定义事件队列容器
    var readyFnQueue = [];
    // 文档是否准备完毕判断变量
    var docIsReady = !1;
    // ...省略其他无关代码
    function yQuery(selector, context) {
        if (_type(selector) === 'function') {
            docIsReady ? selector() : readyFnQueue.push(selector);
        }
    }
    // ...省略其他无关代码
    _listen(doc, "DOMContentLoaded", function() {
        // 文档准备完毕，则立即执行事件队列
        readyFnQueue.forEach(function(fn) {
            fn();
        });
        readyFnQueue = null;
        docIsReady = !0;
    });
})();

2、event bind and unbind

上面提到了监听文档的ready事件，这里具体说说事件的监听绑定与解绑。事件的监听在不同浏览器中有兼容问题，这里就不多深究了，我们只需要关注标准的东西，其他的东西都只是兼容与容错。

(function() {
    /**
     * 事件绑定
     * @param {Element}  element     DOM元素
     * @param {String}   eventType   事件类型
     * @param {Function} fn          事件回调
     * @return {Undefined}
     * @version 1.0
     * 2013年12月3日10:00:41
     */
    function _listen(element, eventType, fn) {
        element.addEventListener(eventType, function(e) {
            if (fn.call(element, e) === !1) _eventFalse(e);
        }, !1);
    }
    /**
     * 阻止事件传递、默认事件、事件队列
     * @param {Object} e   事件对象
     * @return {Undefined}
     * @version 1.0
     * 2013年12月29日23:00:01
     */
    function _eventFalse(e) {
        if (e.preventDefault !== udf) e.preventDefault();
        if (e.stopPropagation !== udf) e.stopPropagation();
        if (e.stopImmediatePropagation) e.stopImmediatePropagation();
    }
    /**
     * 解除事件绑定
     * @param {Element}  element     DOM元素
     * @param {String}   eventType   事件类型
     * @param {Function} fn          事件回调
     * @return {Undefined}
     * @version 1.0
     * 2014年6月22日17:53:11
     */
    function _unlisten(element, eventType, fn) {
        element.removeEventListener(eventType, fn);
    }
})();

3、普通事件原型方法

高频普通事件包括click、change、focus、input、keyup、mouseup等，直接把这些事件添加到原型上，便于日常使用。

var normalEventArr = "blur change click contextmenu dblclick error focus input keydown keypress keyup load mousedown mouseenter mouseleave mousemove mouseout mouseover mousewheel reset resize scroll submit".split(" ");
 
 
// 赋值到原型链
normalEventArr.forEach(function(eventType) {
    $.fn[eventType] = function(fn) {
        return this.each(function() {
            _listen(this, eventType, fn);
        });
    }
});