Dojo实现Tabs页报错(三)

前端之家收集整理的这篇文章主要介绍了Dojo实现Tabs页报错(三)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

用Dojo实现tab页的过程中,没有引用“on.js”,但是firebug调试时一直提示如下错误



on.js源码如下:

  1. define(["./has!dom-addeventlistener?:./aspect","./_base/kernel","./sniff"],function(aspect,dojo,has){
  2. "use strict";
  3. if(has("dom")){ // check to make sure we are in a browser,this module should work anywhere
  4. var major = window.ScriptEngineMajorVersion;
  5. has.add("jscript",major && (major() + ScriptEngineMinorVersion() / 10));
  6. has.add("event-orientationchange",has("touch") && !has("android")); // TODO: how do we detect this?
  7. has.add("event-stopimmediatepropagation",window.Event && !!window.Event.prototype && !!window.Event.prototype.stopImmediatePropagation);
  8. has.add("event-focusin",function(global,doc,element){
  9. return 'onfocusin' in element || (element.addEventListener && (function () {
  10. var hasFocusInEvent = false;
  11. function testFocus() {
  12. hasFocusInEvent = true;
  13. }
  14. try {
  15. var element = doc.createElement('input'),activeElement = doc.activeElement;
  16. element.style.position = 'fixed';
  17. element.addEventListener('focusin',testFocus,false);
  18. doc.body.appendChild(element);
  19. element.focus();
  20. doc.body.removeChild(element);
  21. element.removeEventListener('focusin',false);
  22. activeElement.focus();
  23. } catch (e) {}
  24. return hasFocusInEvent;
  25. })());
  26. });
  27. }
  28. var on = function(target,type,listener,dontFix){
  29. // summary:
  30. // A function that provides core event listening functionality. With this function
  31. // you can provide a target,event type,and listener to be notified of
  32. // future matching events that are fired.
  33. // target: Element|Object
  34. // This is the target object or DOM element that to receive events from
  35. // type: String|Function
  36. // This is the name of the event to listen for or an extension event type.
  37. // listener: Function
  38. // This is the function that should be called when the event fires.
  39. // returns: Object
  40. // An object with a remove() method that can be used to stop listening for this
  41. // event.
  42. // description:
  43. // To listen for "click" events on a button node,we can do:
  44. // | define(["dojo/on"],function(listen){
  45. // | on(button,"click",clickHandler);
  46. // | ...
  47. // Evented JavaScript objects can also have their own events.
  48. // | var obj = new Evented;
  49. // | on(obj,"foo",fooHandler);
  50. // And then we could publish a "foo" event:
  51. // | on.emit(obj,{key: "value"});
  52. // We can use extension events as well. For example,you could listen for a tap gesture:
  53. // | define(["dojo/on","dojo/gesture/tap",function(listen,tap){
  54. // | on(button,tap,tapHandler);
  55. // | ...
  56. // which would trigger fooHandler. Note that for a simple object this is equivalent to calling:
  57. // | obj.onfoo({key:"value"});
  58. // If you use on.emit on a DOM node,it will use native event dispatching when possible.
  59. if(typeof target.on == "function" && typeof type != "function" && !target.nodeType){
  60. // delegate to the target's on() method,so it can handle it's own listening if it wants (unless it
  61. // is DOM node and we may be dealing with jQuery or Prototype's incompatible addition to the
  62. // Element prototype
  63. return target.on(type,listener);
  64. }
  65. // delegate to main listener code
  66. return on.parse(target,addListener,dontFix,this);
  67. };
  68. on.pausable = function(target,dontFix){
  69. // summary:
  70. // This function acts the same as on(),but with pausable functionality. The
  71. // returned signal object has pause() and resume() functions. Calling the
  72. // pause() method will cause the listener to not be called for future events. Calling the
  73. // resume() method will cause the listener to again be called for future events.
  74. var paused;
  75. var signal = on(target,function(){
  76. if(!paused){
  77. return listener.apply(this,arguments);
  78. }
  79. },dontFix);
  80. signal.pause = function(){
  81. paused = true;
  82. };
  83. signal.resume = function(){
  84. paused = false;
  85. };
  86. return signal;
  87. };
  88. on.once = function(target,but will only call the listener once. The
  89. // listener will be called for the first
  90. // event that takes place and then listener will automatically be removed.
  91. var signal = on(target,function(){
  92. // remove this listener
  93. signal.remove();
  94. // proceed to call the listener
  95. return listener.apply(this,arguments);
  96. });
  97. return signal;
  98. };
  99. on.parse = function(target,matchesTarget){
  100. if(type.call){
  101. // event handler function
  102. // on(node,touch.press,touchListener);
  103. return type.call(matchesTarget,target,listener);
  104. }
  105. if(type.indexOf(",") > -1){
  106. // we allow comma delimited event names,so you can register for multiple events at once
  107. var events = type.split(/\s*,\s*/);
  108. var handles = [];
  109. var i = 0;
  110. var eventName;
  111. while(eventName = events[i++]){
  112. handles.push(addListener(target,eventName,matchesTarget));
  113. }
  114. handles.remove = function(){
  115. for(var i = 0; i < handles.length; i++){
  116. handles[i].remove();
  117. }
  118. };
  119. return handles;
  120. }
  121. return addListener(target,matchesTarget);
  122. };
  123. var touchEvents = /^touch/;
  124. function addListener(target,matchesTarget){
  125. // event delegation:
  126. var selector = type.match(/(.*):(.*)/);
  127. // if we have a selector:event,the last one is interpreted as an event,and we use event delegation
  128. if(selector){
  129. type = selector[2];
  130. selector = selector[1];
  131. // create the extension event for selectors and directly call it
  132. return on.selector(selector,type).call(matchesTarget,listener);
  133. }
  134. // test to see if it a touch event right now,so we don't have to do it every time it fires
  135. if(has("touch")){
  136. if(touchEvents.test(type)){
  137. // touch event,fix it
  138. listener = fixTouchListener(listener);
  139. }
  140. if(!has("event-orientationchange") && (type == "orientationchange")){
  141. //"orientationchange" not supported <= Android 2.1,//but works through "resize" on window
  142. type = "resize";
  143. target = window;
  144. listener = fixTouchListener(listener);
  145. }
  146. }
  147. if(addStopImmediate){
  148. // add stopImmediatePropagation if it doesn't exist
  149. listener = addStopImmediate(listener);
  150. }
  151. // normal path,the target is |this|
  152. if(target.addEventListener){
  153. // the target has addEventListener,which should be used if available (might or might not be a node,non-nodes can implement this method as well)
  154. // check for capture conversions
  155. var capture = type in captures,adjustedType = capture ? captures[type] : type;
  156. target.addEventListener(adjustedType,capture);
  157. // create and return the signal
  158. return {
  159. remove: function(){
  160. target.removeEventListener(adjustedType,capture);
  161. }
  162. };
  163. }
  164. type = "on" + type;
  165. if(fixAttach && target.attachEvent){
  166. return fixAttach(target,listener);
  167. }
  168. throw new Error("Target must be an event emitter");
  169. }
  170. on.selector = function(selector,eventType,children){
  171. // summary:
  172. // Creates a new extension event with event delegation. This is based on
  173. // the provided event type (can be extension event) that
  174. // only calls the listener when the CSS selector matches the target of the event.
  175. //
  176. // The application must require() an appropriate level of dojo/query to handle the selector.
  177. // selector:
  178. // The CSS selector to use for filter events and determine the |this| of the event listener.
  179. // eventType:
  180. // The event to listen for
  181. // children:
  182. // Indicates if children elements of the selector should be allowed. This defaults to
  183. // true
  184. // example:
  185. // | require(["dojo/on","dojo/mouse","dojo/query!css2"],mouse){
  186. // | on(node,on.selector(".my-class",mouse.enter),handlerForMyHover);
  187. return function(target,listener){
  188. // if the selector is function,use it to select the node,otherwise use the matches method
  189. var matchesTarget = typeof selector == "function" ? {matches: selector} : this,bubble = eventType.bubble;
  190. function select(eventTarget){
  191. // see if we have a valid matchesTarget or default to dojo/query
  192. matchesTarget = matchesTarget && matchesTarget.matches ? matchesTarget : dojo.query;
  193. // there is a selector,so make sure it matches
  194. while(!matchesTarget.matches(eventTarget,selector,target)){
  195. if(eventTarget == target || children === false || !(eventTarget = eventTarget.parentNode) || eventTarget.nodeType != 1){ // intentional assignment
  196. return;
  197. }
  198. }
  199. return eventTarget;
  200. }
  201. if(bubble){
  202. // the event type doesn't naturally bubble,but has a bubbling form,use that,and give it the selector so it can perform the select itself
  203. return on(target,bubble(select),listener);
  204. }
  205. // standard event delegation
  206. return on(target,function(event){
  207. // call select to see if we match
  208. var eventTarget = select(event.target);
  209. // if it matches we call the listener
  210. return eventTarget && listener.call(eventTarget,event);
  211. });
  212. };
  213. };
  214. function syntheticPreventDefault(){
  215. this.cancelable = false;
  216. this.defaultPrevented = true;
  217. }
  218. function syntheticStopPropagation(){
  219. this.bubbles = false;
  220. }
  221. var slice = [].slice,syntheticDispatch = on.emit = function(target,event){
  222. // summary:
  223. // Fires an event on the target object.
  224. // target:
  225. // The target object to fire the event on. This can be a DOM element or a plain
  226. // JS object. If the target is a DOM element,native event emitting mechanisms
  227. // are used when possible.
  228. // type:
  229. // The event type name. You can emulate standard native events like "click" and
  230. // "mouSEOver" or create custom events like "open" or "finish".
  231. // event:
  232. // An object that provides the properties for the event. See https://developer.mozilla.org/en/DOM/event.initEvent
  233. // for some of the properties. These properties are copied to the event object.
  234. // Of particular importance are the cancelable and bubbles properties. The
  235. // cancelable property indicates whether or not the event has a default action
  236. // that can be cancelled. The event is cancelled by calling preventDefault() on
  237. // the event object. The bubbles property indicates whether or not the
  238. // event will bubble up the DOM tree. If bubbles is true,the event will be called
  239. // on the target and then each parent successively until the top of the tree
  240. // is reached or stopPropagation() is called. Both bubbles and cancelable
  241. // default to false.
  242. // returns:
  243. // If the event is cancelable and the event is not cancelled,// emit will return true. If the event is cancelable and the event is cancelled,// emit will return false.
  244. // details:
  245. // Note that this is designed to emit events for listeners registered through
  246. // dojo/on. It should actually work with any event listener except those
  247. // added through IE's attachEvent (IE8 and below's non-W3C event emitting
  248. // doesn't support custom event types). It should work with all events registered
  249. // through dojo/on. Also note that the emit method does do any default
  250. // action,it only returns a value to indicate if the default action should take
  251. // place. For example,emitting a keypress event would not cause a character
  252. // to appear in a textBox.
  253. // example:
  254. // To fire our own click event
  255. // | require(["dojo/on","dojo/dom"
  256. // | ],function(on,dom){
  257. // | on.emit(dom.byId("button"),{
  258. // | cancelable: true,// | bubbles: true,// | screenX: 33,// | screenY: 44
  259. // | });
  260. // We can also fire our own custom events:
  261. // | on.emit(dom.byId("slider"),"slide",// | direction: "left-to-right"
  262. // | });
  263. // | });
  264. var args = slice.call(arguments,2);
  265. var method = "on" + type;
  266. if("parentNode" in target){
  267. // node (or node-like),create event controller methods
  268. var newEvent = args[0] = {};
  269. for(var i in event){
  270. newEvent[i] = event[i];
  271. }
  272. newEvent.preventDefault = syntheticPreventDefault;
  273. newEvent.stopPropagation = syntheticStopPropagation;
  274. newEvent.target = target;
  275. newEvent.type = type;
  276. event = newEvent;
  277. }
  278. do{
  279. // call any node which has a handler (note that ideally we would try/catch to simulate normal event propagation but that causes too much pain for debugging)
  280. target[method] && target[method].apply(target,args);
  281. // and then continue up the parent node chain if it is still bubbling (if started as bubbles and stopPropagation hasn't been called)
  282. }while(event && event.bubbles && (target = target.parentNode));
  283. return event && event.cancelable && event; // if it is still true (was cancelable and was cancelled),return the event to indicate default action should happen
  284. };
  285. var captures = has("event-focusin") ? {} : {focusin: "focus",focusout: "blur"};
  286. if(!has("event-stopimmediatepropagation")){
  287. var stopImmediatePropagation =function(){
  288. this.immediatelyStopped = true;
  289. this.modified = true; // mark it as modified so the event will be cached in IE
  290. };
  291. var addStopImmediate = function(listener){
  292. return function(event){
  293. if(!event.immediatelyStopped){// check to make sure it hasn't been stopped immediately
  294. event.stopImmediatePropagation = stopImmediatePropagation;
  295. return listener.apply(this,arguments);
  296. }
  297. };
  298. }
  299. }
  300. if(has("dom-addeventlistener")){
  301. // emitter that works with native event handling
  302. on.emit = function(target,event){
  303. if(target.dispatchEvent && document.createEvent){
  304. // use the native event emitting mechanism if it is available on the target object
  305. // create a generic event
  306. // we could create branch into the different types of event constructors,but
  307. // that would be a lot of extra code,with little benefit that I can see,seems
  308. // best to use the generic constructor and copy properties over,making it
  309. // easy to have events look like the ones created with specific initializers
  310. var nativeEvent = target.ownerDocument.createEvent("HTMLEvents");
  311. nativeEvent.initEvent(type,!!event.bubbles,!!event.cancelable);
不知道是什么原因

猜你在找的Dojo相关文章