事件处理 - 添加事件
1 var addEventHandler = function (oTarget, sEventType, fnHandler) {
2 if (oTarget.addEventListener) {
3 oTarget.addEventListener(sEventType, fnHandler, false);
4 } else if (oTarget.attachEvent) {
5 oTarget.attachEvent("on" + sEventType, fnHandler);
6 } else {
7 oTarget["on" + sEventType] = fnHandler;
8 }
9 };
事件处理 - 移除事件
1 var removeEventHandler = function (oTarget, sEventType, fnHandler) {
2 if (oTarget.removeEventListener) {
3 oTarget.removeEventListener(sEventType, fnHandler, false);
4 } else if (oTarget.detachEvent) {
5 oTarget.detachEvent("on" + sEventType, fnHandler);
6 } else {
7 oTarget["on" + sEventType] = null;
8 }
9 };
事件处理 - Bind
1 var BindAsEventListener = function(object, fun) {
2 var args = Array.prototype.slice.call(arguments).slice(2);
3 return function(event) {
4 return fun.apply(object, [event || window.event].concat(args));
5 }
6 };
使用:
1 var Test = function(){
2 this.init();
3 );
4 Test.prototype = {
5 init:function(){
6 this.name = 'test';
7 this.btn = document.getElementById('test');
8 this._fC = BindAsEventListener(this, this._doClick,'bind event');
9 addEventHandler(this.btn, "click", this._fC );
10 },
11 _doClick:funtion(e,str){
12 e.preventDefault();
13 alert(this.name + ' ' +str);
14 },
15 destory:function(){
16 removeEventHandler(this.btn, "click", this._fC );
17 }
18 }
事件代理
1 var Delegate = function (parent,eventType, selector, fn , that){
2 eventType = eventType || 'click';
3 if(!parent){
4 return;
5 }
6 if( typeof fn !== 'function'){
7 return;
8 }
9 if( typeof selector !== 'string'){
10 return;
11 }
12 var handle = function (e){
13 var evt = window.event ? window.event : e;
14 var target = evt.target || evt.srcElement;
15 target = getDlgElement(target);
16 if(target){
17 fn.call(that,{target:target,event:e});
18 }
19 };
20 var getDlgElement = function(ele){
21 if(!ele){
22 return null;
23 }
24 return ( (ele.id === selector) ||
25 (ele.className && ele.className.indexOf(selector) != -1)) ? ele : getDlgElement(ele.parentNode);
26 };
27 parent['on' + eventType] = handle;
28 };
使用:
1 var Test2 = function(){
2 this.init();
3 };
4 Test2.prototype = {
5 init:function(){
6 var me = this;
7 Delegate(document,'click','classname',function(e){
8 e.event.preventDefault();
9 var obj = e.target;
10 me.setVaule(obj,'test')
11 },this);
12 },
13 setVaule:function(elem,str){
14 elem.setAttribute('data-value',str);
15 }
16 }