In jquery, document ready is bound to and unbound from event listening.

1. Document Ready

First look at the code:

$ (function () {
Alert (' Hello ');
});

The incoming parameter is a function, and what we need to do is to execute it after the document is ready. There are now 2 kinds of situations:

1, the document is not ready to complete, how to do these events

2, the document is ready, how to do these events

The solution is to proactively define a global variable within a closure to collect these events and then execute it after the document is ready to be completed. If the document is ready, the incoming events are executed directly.

(function () {
Pre-defined Event queue container
var readyfnqueue = [];
Whether the document is ready to judge variables
var docisready =! 1;
// ... Omitting other extraneous code
function Yquery (selector, context) {
if (_type (selector) = = ' function ') {
Docisready? Selector (): Readyfnqueue.push (selector);
}
}
// ... Omitting other extraneous code
_listen (Doc, "domcontentloaded", function () {
When the document is ready, the event queue is executed immediately
Readyfnqueue.foreach (function (FN) {
FN ();
});
Readyfnqueue = null;
Docisready =! 0;
});
})();

2, event bind and Unbind

This refers to the ready event that listens to the document, here specifically the listener binding and unbind of the event. Event monitoring in different browsers have compatibility issues, here is not much to delve into, we just need to pay attention to the standard things, other things are only compatible and fault tolerance.

(function () {
/**
* Event Bindings
* @param {element} element DOM elements
* @param {String} EventType event Type
* @param {Function} fn event callback
* @return {Undefined}
* @version 1.0
* December 3, 2013 10:00:41
*/
function _listen (element, EventType, FN) {
Element.addeventlistener (EventType, function (e) {
if (Fn.call (element, e) = =! 1) _eventfalse (e);
},! 1);
}
/**
* Block event passing, default events, event queues
* @param {Object} E Event Object
* @return {Undefined}
* @version 1.0
* December 29, 2013 23:00:01
*/
function _eventfalse (e) {
if (E.preventdefault!== UDF) E.preventdefault ();
if (E.stoppropagation!== UDF) e.stoppropagation ();
if (e.stopimmediatepropagation) e.stopimmediatepropagation ();
}
/**
* Unbind Event
* @param {element} element DOM elements
* @param {String} EventType event Type
* @param {Function} fn event callback
* @return {Undefined}
* @version 1.0
* June 22, 2014 17:53:11
*/
function _unlisten (element, EventType, FN) {
Element.removeeventlistener (EventType, FN);
}
})();

3. Common Event Prototype method

High frequency ordinary events include click, change, focus, input, KeyUp, MouseUp, etc., directly add these events to the prototype, easy to use everyday.

var Normaleventarr = "Blur Change click ContextMenu dblclick error Focus input KeyDown keypress keyup load MouseDown mo Useenter mouseleave mousemove mouseout mouseover mousewheel Reset Resize Scroll Submit ". Split (" ");
 
 
//assignment to prototype chain
Normaleventarr.foreach (function (eventtype) {
    $.fn[ EventType] = function (fn) {
        return This.each (function () {
             _listen (this, EventType, FN);
       });
   }
});