document ready对事件进行监测

事件监听通常是指对一个事件进行监测了，在jquery中我们通常会用到，下面一聚教程小编为各位整理几条关于jquery中document ready 与事件监听绑定和解绑的例子，有兴趣的和小编来看看。form:http://www.uphtm.com/js/259.html

1、document ready

先看代码：

1. $(function(){
2.  alert('你好');
3. });

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

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

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

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

1. (function() {
2.     // 预先定义事件队列容器
3.     var readyFnQueue = [];
4.     // 文档是否准备完毕判断变量
5.     var docIsReady = !1;
6.     // ...省略其他无关代码
7.     function yQuery(selector, context) {
8.         if (_type(selector) === 'function') {
9.             docIsReady ? selector() : readyFnQueue.push(selector);
10.         }
11.     }
12.     // ...省略其他无关代码
13.     _listen(doc, "DOMContentLoaded", function() {
14.         // 文档准备完毕，则立即执行事件队列
15.         readyFnQueue.forEach(function(fn) {
16.             fn();
17.         });
18.         readyFnQueue = null;
19.         docIsReady = !0;
20.     });
21. })();

2、event bind and unbind

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

1. (function() {
2.     /**
3.      * 事件绑定
4.      * @param {Element}  element     DOM元素
5.      * @param {String}   eventType   事件类型
6.      * @param {Function} fn          事件回调
7.      * @return {Undefined}
8.      * @version 1.0
9.      * 2013年12月3日10:00:41
10.      */
11.     function _listen(element, eventType, fn) {
12.         element.addEventListener(eventType, function(e) {
13.             if (fn.call(element, e) === !1) _eventFalse(e);
14.         }, !1);
15.     }
16.     /**
17.      * 阻止事件传递、默认事件、事件队列
18.      * @param {Object} e   事件对象
19.      * @return {Undefined}
20.      * @version 1.0
21.      * 2013年12月29日23:00:01
22.      */
23.     function _eventFalse(e) {
24.         if (e.preventDefault !== udf) e.preventDefault();
25.         if (e.stopPropagation !== udf) e.stopPropagation();
26.         if (e.stopImmediatePropagation) e.stopImmediatePropagation();
27.     }
28.     /**
29.      * 解除事件绑定
30.      * @param {Element}  element     DOM元素
31.      * @param {String}   eventType   事件类型
32.      * @param {Function} fn          事件回调
33.      * @return {Undefined}
34.      * @version 1.0
35.      * 2014年6月22日17:53:11
36.      */
37.     function _unlisten(element, eventType, fn) {
38.         element.removeEventListener(eventType, fn);
39.     }
40. })();

3、普通事件原型方法

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

1. 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(" ");
2.  
3.  
4. // 赋值到原型链
5. normalEventArr.forEach(function(eventType) {
6.     $.fn[eventType] = function(fn) {
7.         return this.each(function() {
8.             _listen(this, eventType, fn);
9.         });
10.     }
11. });

form:http://www.uphtm.com/js/259.html