jQuery Mobile教程:pagecreate事件

2013-05-13 08:56:56  来源:w3cplus 

网页制作Webjx文章简介:本文我们来深度认识一下jQuery Mobile体系中非常非常非常有用的事件。

本文我们来深度认识一下jQuery Mobile体系中非常非常非常有用的事件:
--------pagecreate以及pagebeforecreate的由来!
(注释:下面示例中的代码片段均来自1.1.0版本)
很多看过源码的同学,应该多会在很多地方看到下面这种事件绑定,我挑选了第一个出现的地方:

源码实例:

//#4010 $(document).bind("pagecreate create",function(e){ 	//..... }); 

很久之前,我有一个疑问?
------ 我看到的好像都是bind一个pagecreate的自定义事件,那什么地方trigger呢?
于是我各种搜索pagecreate,结果。。。木有!对的,是木有!!
那问题就大了,没有trigger这个pagecreate的设置,那写200000...个bind都没有用啊!
-----------------------------华丽丽的分隔线--------------------------------------

下面,我来带领大家一探究竟:
先看一张流程图:
pagecreate的流程图示

1、起点:_createWidget

//#1179 _createWidget:function(){ 	//调用$.Widget.prototype._createWidget 	$.Widget.prototype._createWidget.apply(this,arguments); 	this._trigger("init"); }, 

2、$.Widget.prototype._createWidget

$.Widget.prototype = { 	//1047 	_createWidget:function(options,element){ 	 		//....省去部分 		this._create(); 		this._trigger("create"); 	} } 

3、_create

//2132 _create:function(){ 	 	var self = this; 	 	if(self._trigger("beforecreate") === false){ 		return false; 	} 	 } 

4、$.Widget.prototype._trigger

关键的地方,注意细节说明:

_trigger:function(type,event,data){ 	var callback = this.options[type]; 	 	event = $.Event(event); 	 	//强烈注意这里: 	//this.widgetEventPrefix ====> page 	//980 $[namespace][name].prototype.widgetEventPrefix || name 	//type处理后: 	//page+beforecreate ==> pagebeforecreate 	//page+create ==> pagecreate 	event.type = (type === this.widgetEventPrefix ? type : this.widgetEventPrefix + type).toLowerCase(); 	 	data = data || {}; 	 	//... 	this.element.trigger(event,data); } 

说明:
1、其实核心还是$.Widget.prototype._trigger,内部会处理一下type

更多