Javascript event library 'unidentified'

问题

I have been working on a javascript library for event handling. Here is some of the code:

01| (function(){
02|     var int,
03|         Jist = function(s){
04|             return new Jist.fn.init(s);
05|         };
06|     Jist.fn = Jist.prototype ={
07|         init : function(s){
08|             if(!s){
09|                 return this;
10|             }
11|             else{
12|                 this.length = 1;
13|                 if (typeof s === "object"){
14|                     this[0] = s;
15|                 }
16|                 else if(typeof s === "string"){
17|                     var obj;
18|                     obj = document.querySelectorAll(s);
19|                     this[0] = obj;
20|                     this.elem = this[0];
21|                 }
22|                 return this;
23|             }
24|         },
25|     };
26|     Jist.fx ={
27|         event : function(event,callback,state){
28|             var dummy = (state) ? false : state; 
29|             for(var i=0; i<this.elem.length; i++) {
30|                 this.elem[i].addEventListener(event,callback,dummy);
31|             }
32|             return this;
33|             },
34|     }
35|     Jist.fn.init.prototype = Jist.fn;
36|     Jist.fn.init.prototype = {
37|         print : function(txt){
38|             for(var i=0; i<this.elem.length; i++) {
39|                 this.elem[i].innerHTML = txt;
40|             }
41|             return this;
42|         },
43|         click : function(callback){
44|             Jist.fx.event("click",callback);
45|             return this;
46|         },
47|     };
48|     window.Jist = window._ = Jist;
49| })();

And then On my webpage, here is what I have to test it out:

01| <div id="enter">Begin!</div>
02| <script>
03|    _("#enter").click(function(){
04|       _("#enter").print("It worked!");
05|    })
06| </script>

It seems like this should work, but instead I get an error that reads: 'undefined' is not an object (evaluating this.elem.length)[line 29 in the library]

Does anyone know how I can fix this?

Help is greatly appreciated.

Thank you.

回答1:

When you call Jist.fx.event("click",callback); and it starts executing the event method this will be Jist.fx and it has no property named elem which the event method is trying to use when it references this.elem.length. That causes the error you see.

回答2:

this.elem is out of function scope hence it returns undefined error, so instead of this.elem.length use jist.elem.lengh and check

回答3:

The problem is in the event method this does not refer to the object set you want, you can fix it using a Function.call()

You need to change the call to event registration method like

Jist.fx.event.call(this, "click", callback);

Also you need to make sure that the event registration code is called after the dom is loaded with the target element

Demo: Fiddle

来源：https://stackoverflow.com/questions/19827429/javascript-event-library-unidentified

标签

javascript-events

error-handling

javascript