JS Event class method

1. Add an Event

var addeventhandler=function (Otarget,seventtype,fnhandler) {

if (Otarget.addeventlistener) {

Otarget.addeventlistener (Seventtype,fnhandler,false);

}else if (otarget.attachevent) {

Otarget.attachevent ("on" +seventtype,fnhandler);

}else{

otarget["on" +seventtype]=fnhandler;

}

};

2. Removing events

var removeeventhandler=function (Otarget,seventtype,fnhandler) {

if (Otarget.removeeventlistener) {

Otarget.removeeventlistener (Seventtype,fnhandler,false);

}else if (otarget.detachevent) {

Otarget.detachevent ("on" +seventtype,fnhandler);

}else{

otarget["on" +seventtype]=null;

}

};

3. Event Handling Bind

var bindaseventlistener=function (Object,fun) {

var args=array.prototype.slice.call (arguments). Slice (2);

return function (event) {

Return fun.apply (object,[event| | window.event].contact (args));

}

}

We know that Array.prototype.slice.call (arguments) can convert an object with the length attribute to an array, except for the node collection under IE (because the DOM object under IE is implemented as a COM object. )

var a={length:2,0: ' First ', 1: ' Second '};

Array.prototype.slice.call (a);//["First", "second"]

var a={length:2};

Array.prototype.slice.call (a);//[undefined,undefined]

First, Slice has two usages, one is String.slice, the other is Array.slice, the first one is the string, the second is the array, and here we look at the second one.

Array.prototype.slice.call (arguments) is able to turn arguments into a group, then Arguments.toarray (). Slice (); here it is. Is it possible to say that the process of Array.prototype.slice.call (arguments) is to first convert the first parameter passed in to an array, in the call slice?

Here we can boldly guess the internal implementation of slice, as follows

Array.prototype.slice=function (start,end) {

var result=new Array ();

start=start| | 0;

end=end| | This.length;//this pointing to the called object

for (Var i=start;i<end;i++) {

Result.push (This[i]);

}

return result;

}

Use

var test=function () {

This.init ();

};

test.prototype={

Init:function () {

This.name= "Test";

This.btn=document.getelementbyid ("test");

This._fc=bindaseventlistener (This,this._doclick, ' bind event ');

addEventHandler (THIS.BTN, "click", This._fc);

},

_doclick:function (E,STR) {

E.preventdefault ();

Alert (this.name+ ' +str);

},

Destory:function () {

removeEventHandler (THIS.BTN, "click", This._fc);

}

}

Event Proxy:

var delegate=function (parent,eventtype,selector,fn,that) {

eventtype=eventtype| | " Click ";

if (!parent) {

Return

}

if (typeof selector!== "function") {

Return

}

if (typeof selector!== "string") {

Return

}

var handle=function (e) {

var evt=window.event?window.event:e;

var target=evt.target| | Evt.srcelement;

Target=getdlgelement (target);

if (target) {

Fn.call (That,{target:target,event:e});

}

};

var getdlgelement=function (ele) {

if (!ele) {

return null;

}

Return ((ele.id===selector) | |

(Ele.classname && ele.className.indexOf (selector)!=-1))? Ele:getdlgelement (Ele.parentnode);

};

parent["on" +eventtype]=handle;

};

var test2=function () {

This.init ();

};

test2.prototype={

Init:function () {

var me=this;

Delegate (document, "click", "ClassName", function (e) {

E.event.preventdefault ();

var obj=e.target;

Me.setvalue (obj, "test");

},this)

},

Setvalue:function (ELEM,STR) {

Elem:setattribute ("Data-value", str);

}

}

JS Event class method