javascriptブラウザを跨ぐイベントシステム

17866 ワード

しかし、実質的にはjavascriptの父もこの一切を支配できません.彼が支持しているネットスケープも競争相手におとなしくその製品を使わせるほど強くないです.マイクロソフトはJScriptをやっています.しかし、ブラウザに内蔵されているDOMイベントモデルを借りると、最初の結果は、あるDOMオブジェクト、window、documentまたは要素ノードを借りる必要があります.第二の結果は、各ブラウザがDOMに対するサポートが違って、イベントモデルの一致が確保できないため、第三はDOMオブジェクトに基づいており、循環参照が容易になります.マイクロソフトがブラウザ戦争に初勝利した後、DOMモデルはほとんど更新されませんでした.w 3 c、ecmaなどの基準に近い「標準ブラウザ」と二大陣営に分けられました.しかし、標準ブラウザ内も磐石ではなく、FFのようにmouseweelではなく、DOMMouseScrrolであり、operaのcontextmenuは制御できない.私たちは自分で実現する必要があります.現在、ダブルマスターはDOM 2のイベントモデルを実現しています.マイクロソフトはatachEventを始め、標準的なのはaddevent Listenerで、同じ元素が複数の同じタイプのイベントコールバック関数を結びつけることができます.インターネット上の多くのaddEvent関数はそれらで作られていますが、信頼できません.まず、IEのコールバック関数はイベントオブジェクトを強制バインディングしていません.標準ブラウザは強いダンスナンバーの最初のパラメータであり、イベントオブジェクトです.コール関数で強制バインディングができますが、IEのイベントオブジェクトは標準のものとは違います.ここでは多くの仕事があります.もう一つは、コールバック関数の実行順序の問題であり、IEは不規則であり、標準はバインディングの順序で実行される.したがって,この二つの関数も否定された.一番原始的なonxXXXで実現するつもりです.複数の関数を結びつける時、それらを一つの関数に入れて、一つのfor循環で解決します.
 
  





Event by

<br>var dom = {}; <br>Array.prototype.indexOf = function (el, index) { <br>var n = this.length>>>0, <br>i = index == null ? 0 : index < 0 ? Math.max(0, n + index) : index; <br>for (; i < n; i++) <br>if (i in this && this[i] === el) return i; <br>return -1; <br>}; <br>//http://msdn.microsoft.com/zh-cn/library/bb383786.aspx <br>// Array 。 <br>Array.prototype.remove= function (item) { <br>var index = this.indexOf(item); <br>if (index !== -1) return this.removeAt(index); <br>return null; <br>}; <br>// Array 。 <br>Array.prototype.removeAt= function (index) { <br>return this.splice(index, 1) <br>}; <br>dom.attachEvent = function(el, type, handler) { <br>// Object events <br>if (!el.events) el.events = {}; <br>// , <br>var handlers = el.events[type]; <br>if (!handlers) { <br>handlers = el.events[type] = []; <br>// onXXXX , <br>if (el["on" + type]) { <br>handlers[0] = el["on" + type]; <br>} <br>} <br>// <br>handlers.push(handler) <br>// onXXXX <br>el["on" + type] = dom.handleEvent; <br>}; <br>dom.detachEvent = function(el, type, handler) { <br>if (el.events && el.events[type]) { <br>el.events[type].remove(handler) <br>} <br>} <br>dom.handleEvent = function (event) { <br>var returnValue = true; <br>// grab the event object (IE uses a global event object) <br>event = event || fixEvent(((this.ownerDocument || this.document || this).parentWindow || window).event); <br>// get a reference to the hash table of event handlers <br>var handlers = this.events[event.type]; <br>// execute each event handler <br>for(var i=0,n=handlers.length;i<n;i++){ <br>if (handlers[i](event) === false) { <br>returnValue = false; <br>} <br>} <br>return returnValue; <br>}; <br>function fixEvent(event) { <br>// add W3C standard event methods <br>event.preventDefault = fixEvent.preventDefault; <br>event.stopPropagation = fixEvent.stopPropagation; <br>return event; <br>}; <br>fixEvent.preventDefault = function() { <br>this.returnValue = false; <br>}; <br>fixEvent.stopPropagation = function() { <br>this.cancelBubble = true; <br>}; <br>var $ = function(id){ <br>return document.getElementById(id) <br>} <br>window.onload = function(){ <br>var a = function(e){ <br>$("p").innerHTML = e.clientX +" "+e.clientY <br>} <br>dom.attachEvent($("target"),"mousemove",a); <br>setTimeout(function(){ <br>dom.detachEvent($("target"),"mousemove",a); <br>},10*1000) <br>} <br>








我们回顾一下上面的流程,这个事件系统其实是Dean大神的addEvent的一个改版。
设置一个作为命名空间的对象。
对Array做一些扩展。
attachEvent 函数用于绑定事件。具体做法在需要绑定事件的对象设置一个events属性,里面再按事件类型放置回调函数,由于有时我们可能在同一个元素上绑定2个或多个onclick事件什么的,因此它们必须是一个数组。最后用DOM0的原始方法添加一个onXXXX属性。
detachEvent 函数用于卸载事件,就是把events上对应类型的数组元素去掉。
handleEvent 执行回调函数。我们以onXXXX的形式绑定了一个全局的函数,它的作用是获得与修正事件对象,然后取得此事件类型对应的所有回调函数,然后依次把事件对象作为它们的第一个参数再执行它们。最后是处理一下冒泡。
fixEvent 修正事件对象。基本上就是让IE拥有标准浏览器的两个方法。
对于一般应用,它已够用了。但如果追求完全。我们还有许多东西都要用。首先把events这个庞大的对象放到元素上是非常不妥的,不利于集中管理。二,fixEvent并不彻底,如target,pageX/Y等标准浏览器下的属性,在IE中还是用不了。
首先是handleEvent 函数,现在是无论标准浏览器还是IE的事件对象都要修正,还在每次调用时为IE修正其currentTarget 值。
 
  
dom.handleEvent = function (event) {
event = event || window.event
event = dom.fixEvent(event);
event.currentTarget = this;// currentTarget
var returnValue = true;
var handlers = this.events[event.type];
for(var i=0,n=handlers.length;iif (handlers[i](event) === false) {
returnValue = false;
}
}
return returnValue;
};
私たちが紹介した新しいバージョンのfixEvent関数について、私たちはjQueryから盗用した偽事件の対象を厳かに紹介します.
 
  
dom.oneObject = function(arr,val){
var result = {},value = val !== undefined ? val :1;
for(var i=0,n=arr.length;iresult[arr[i]] = value;
return result;
};
dom.mixin = function(result, source) {
if (arguments.length === 1) {
source = result;
result = dom;
}
if (result && source ){
for(var key in source)
source.hasOwnProperty(key) && (result[key] = source[key]);
}
if(arguments.length > 2 ){
var others = [].slice.call(arguments,2);
for(var i=0,n=others.length;iresult = arguments.callee(result,others[i]);
}
}
return result;
}
var MouseEventOne = dom.oneObject(["click","dblclick","mousedown",
"mousemove","mouseout", "mouseover","mouseup"],"[object MouseEvent]");
var HTMLEventOne = dom.oneObject(["abort","blur","change","error","focus",
"load","reset","resize","scroll","select","submit","unload"],"[object Event]");
var KeyboardEventOne = dom.oneObject(["keyup","keydown","keypress",],
"[object KeyboardEvent]");
var EventMap = dom.mixin({},MouseEventOne,HTMLEventOne,KeyboardEventOne)
var fn = "prototype";
dom.Event = function( src ) {
if ( !this.preventDefault ) {
return new dom.Event[fn].init( src );
}
};
function returnFalse() {
return false;
}
function returnTrue() {
return true;
}
// http://www.w3.org/TR/2003/WD-DOM-Level-3-Events-20030331/ecma-script-binding.html
dom.Event[fn] = {
init:function(src){
//
if ( src && src.type ) {
this.originalEvent = src;
this.type = src.type;
//
} else {
this.type = src;
}
this.timeStamp = new Date().valueOf();
this[ "expando" ] = true;
},
//http://www.w3.org/TR/2003/WD-DOM-Level-3-Events-20030331/events.html#Conformance
toString:function(){
return EventMap[this.type] || "[object Event]"
},
preventDefault: function() {
this.isDefaultPrevented = returnTrue;
var e = this.originalEvent;
if ( !e ) {
return;
}
// preventDefault
if ( e.preventDefault ) {
e.preventDefault();
}
// returnValue false
e.returnValue = false;
},
stopPropagation: function() {
this.isPropagationStopped = returnTrue;
var e = this.originalEvent;
if ( !e ) {
return;
}
// preventDefault
if ( e.stopPropagation ) {
e.stopPropagation();
}
// returnValue true
e.cancelBubble = true;
},
stopImmediatePropagation: function() {
this.isImmediatePropagationStopped = returnTrue;
this.stopPropagation();
},
isDefaultPrevented: returnFalse,
isPropagationStopped: returnFalse,
isImmediatePropagationStopped: returnFalse
};
dom.Event[fn].init[fn] = dom.Event[fn];
このコンストラクタはW 3 Cイベントモデルのいくつかの方法だけを実現しました.それらの属性はどこに行きましたか?急がないでください.私たちはfixEvent方法でコピーでそれらを実現します.元のイベントの対象と偽のイベントの対象を区別するために、上にexpand属性を追加しました.
 
  
var buttonMap = {
1:1,
4:2,
2:3
}
dom.fixEvent = function(event){
if ( event[ "expando" ] ) {
return event;
}
var originalEvent = event
event = dom.Event(originalEvent);
for(var prop in originalEvent){
if(typeof originalEvent[prop] !== "function"){
event[prop] = originalEvent[prop]
}
}
// target ,
if ( !event.target ) {
event.target = event.srcElement || document;
}
// ,
if ( event.target.nodeType === 3 ) {
event.target = event.target.parentNode;
}
// relatedTarget ,
if ( !event.relatedTarget && event.fromElement ) {
event.relatedTarget = event.fromElement === event.target ? event.toElement : event.fromElement;
}
// pageX/Y clientX/Y
if ( event.pageX == null && event.clientX != null ) {
var doc = document.documentElement, body = document.body;
event.pageX = event.clientX + (doc && doc.scrollLeft || body && body.scrollLeft || 0) - (doc && doc.clientLeft || body && body.clientLeft || 0);
event.pageY = event.clientY + (doc && doc.scrollTop || body && body.scrollTop || 0) - (doc && doc.clientTop || body && body.clientTop || 0);
}
// which
if ( !event.which && ((event.charCode || event.charCode === 0) ? event.charCode : event.keyCode) ) {
event.which = event.charCode || event.keyCode;
}
// Add metaKey to non-Mac browsers (use ctrl for PC's and Meta for Macs)
if ( !event.metaKey && event.ctrlKey ) {
event.metaKey = event.ctrlKey;
}
// ,1 === left; 2 === middle; 3 === right
if ( !event.which && event.button !== undefined ) {
event.which = buttonMap[event.button]
}
return event;
}
jQueryをためらうことなくコピーする方法は、すべての種類の中でjQueryの方法が一番いいです.
今私たちは基本的に文章の中で提出された二つの問題の中の一つを解決しました.最初の解決にはキャッシュシステムを導入する必要があります.これは次の部分に残して話します.
Event by司徒正美钮var dom={}Aray.prototype.indexOf=function(el,index){var n=this.length>0,i=index==null?0:index<0?Math.max(0,n+index):index;for(;i<n;i+i+reamthis)=http://msdn.microsoft.com/zh-cn/library/bb383786.aspx//Arayオブジェクト内のある要素の最初のマッチ項目を削除します.Aray.prototype.remove=function(item){var index=this.indexOf(item);if(index!=-1)return this.removeAt(index);return null;//Arayオブジェクトで指定された位置の要素を削除します.Aray.prototype.removeAt=function(index){return this.splice(index,1)}dom.atachEvent=function(el,type,handler){/各要素にObjectタイプの私定義属性events if(!el.events)ell.events={}///このオブジェクトには多くのキーがイベントタイプであり、関数配列の属性var handles=ellvents[type]=;/もしそれが元からワンセグであるイベントに結びつけられていたら、イベント配列の最初の要素としてif(el[on]+type){handles[0]=el[on]+type]////////[redles]push(hander)////onxXXで私たちを結びつける処理関数[Event]=[Event]dom.detachEvent=function(el,type,handler){if(el.events&&&&&&&el. events[type){el. eventevents[type].remove}dom.handleEndleEvent= function修正{event=event=event=event=======eventEventEvent Event Event Event Event Event Event Event Event Evevent=Event Event修正{event Event= EventturnValue=true;var handers=this.events[event.type]for(var i=0,n=handlerss.length;i<n;i+){if(handles[i]===false){returnValue=false;}returnreturnValue;;;var buttonMap={1:1,4:2,Event=EventEvent=Event=Event Event=Everververververververververververververevevevevent{ Eventn=Eventn=Eventn=Eventn=Eventn=Eventn=Eventn=Eventn=Eventn=Eventn=Eventn=Eventn=Eveイベント=dom.Event(オリジナリティEvent)、for(var prop i nオリジナリティEvent){if(typeofオリジナリティEvent)[prop]===「[Fnction]」{event[prop]=originalevent]//target属性が存在しない場合は、if(!event.target){event=event.srcent.srcument]/イベントソースがオブジェクトノードである場合は、その要素を挿入します.//relatedTargget属性が存在しない場合は、if(!event.relatedTargget&&&&event.frome Element){event.relatedTarget=event.frome Element===event.tageevent.tototoEventnt?toEEEment?toElement:event.toEment:eveement:event.toEEEEEEEEEEEEdededededededededededededededededededededededet:eventX/eventX/eventX/eventX/eventX/eventX!=null)dy=document=documentElement、body=document.body;event.pageX=event.clientX+(doc&&doc;doc.scrollLeft?body&&&&&&bodp;&&bodp;bodp;bodp;body;&&bodp;;bodp;body;body;body;body;&&&&&body;&body;bodevent.pageY=event.client Y+(doc&&&&;doc.scrollTop?ボス&&&body;scrollTop|0)-.(doc&&&&&&&&&&body.clientTop?;?;;;;///キーボードイベントにwhichイベントif(!event.which&&&;&;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;(((Event to.ccdp)))))))((((((eventchant.chant.chan.chan.haevent.keyCode;//Add metakey to non-Mac browsers(use ctrl for PC's and Meta for Macs)if(!event.metaKey&&&event.ctrlKey){event.metaKey=event.ctrlKey;//マウスイベントが押したのはどのキーかを判定し、==left;2==middle;3==right if(!event.which&&&&&&&&&&&Eventeeeventbuttbuntbutt= Eventbutt= Eventbutt========= Eventeeventeeeeeeventeeventeeeeenction(arr,val){var reult={}value=val!==undefined?val:1;for(var i=0、n=arr.length;i<n;i++)reult[arr[i]=value;returnreult;;;dom.mixin=function(reult、source)=mamaggggggggggggggurce===fffrerererereme=maggggggggggggggggggggggggglit===============================================funcvar key i n source)source.hasOwnProperty&&(reult[key]=source[key];if(arggumments.length>2){var others=[].slile.call(argments,2);for(var i=0,n=others.length;i<i+){reult=argments.callee(reult,others[i]========================[bldedededededededededededededededededettttttttttblblblherst))))))))=clclclclclclclclclclclclclclclclclclclclcleeeeeeebunt「mousemove」、「mouseout」、「mouseover」、「mouseup」、「[object MouseEvent]」、「var HTMLEvent One=dom.oneObject」「aboort」、「blur」、「change」、「error」、「focus」、「load」、「reet」、「resize」、「scroll」、「select」、「submit」、「unload」、「objecEvent」、var KeyyyboboardEventOnkEvent==「EverkentEEventEEventEEventEEEEEventEbjecttttEEEbbject」、EEEEEEbjecttEEEEEEEbbject、EventEventEbbject、EventEventEventEventEEEEMap=dom.mixin({}、MouseEventOne、HTMLEventOne、KeyboardEventOne)var fn=「prototype」、dom.Event=function(src){if}(!this.prevent Default){return new dom.Event[fn].init(src);;function return False(){return false];function return True(){return true]//http://www.w3.org/TR/2003/WD-DOM-Level-3-Events-20030331/ecma-script-binding.html dom.Event[fn]={init:function(src){/もし入ってきたのがイベントオブジェクトif(src&&&srp;src.type){this.originalEvent=src;this.type=src.type、//もし入ってきたのがイベントタイプならば}else{this.type=src;}this.timeStation=new Date().valueOf();this[expand]=true;http://www.w3.org/TR/2003/WD-DOM-Level-3-Events-20030331/events.html#Conformance toStering:function(){return EventMap[this.type]“[object Event]”]PreventDefault:function(){this.isDeDefaultPreventted=returnTrue;var e=this. orinalEvent;if(!e){return;////preventDefaultがあればそれを呼び出すif(e.preventDefault){epreveventDededededededededededededededededededededededededededededefaulult){ededededededededededededededededededededededededededededededededededededededededededededededededededededededededededededededededede(){this.isPropagationStoped=returnTrue;var e=this.originalEvent;if(!e){return;////prevent Defaultがあればif(e.stopPropopopopopopopopopopopopopopopop Propagation)///存在すればreturn Vtruecelとします.「this.isImmedieditePropagationStoped=returnTrue;this.stopPropPropopopopopopopopopopopopop gagation()」、isDefaultPreventted:returnFalse、isProgpagationStope、isIImmePropagatititionStopopopopopopopopopopopopopopopopopoptionStoped:StopopopopopopopopopopopopoptititititionStoped:repped:reptptptptptptptptptptpted:reed:repapapapapapapapapapapapapapapapapapagatittttttlementById(id)}window.onload=function(){var a=function(e){p}innenerHTML=e.pageX+"""+e.pageY)dom.atachEvent($(""""""""""""""""""""""""");setTimeout"(){dom.detachEvent"((""""")、"mousemiove",a),,,,,,,,,,,,,,,,,,((+dokenttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttfrom CharCode(e.which)+「キー」}マウスの位置を表示します.キーボードのキーを押してください.
[Ctrl+A全選注:外部Jsを導入するにはリフレッシュが必要です.]