夏日博客

A-A+

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

2016年01月10日 前端设计 暂无评论 阅读 7 views 次

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

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等，直接把这些事件添加到原型上，便于日常使用。
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(" ");

  1. // 赋值到原型链  
  2. normalEventArr.forEach(function(eventType) {  
  3.     $.fn[eventType] = function(fn) {  
  4.         return this.each(function() {  
  5.             _listen(this, eventType, fn);  
  6.         });  
  7.     }  
  8. });  
标签：

给我留言