クロスプラットフォームイベントとは何ですか？つまり、同じイベントが異なるブラウザで実行され、使用される方法は異なります。
eventutilオブジェクトとは何ですか？その機能は何ですか？つまり、イベントに関連するすべての機能を組み合わせてイベントオブジェクトの管理を促進するコンテナであり、属性はありません。主に、DOMイベントとIEイベント間のランニングインを扱って、可能な限り似たようにします。
DOMとIEの間のオブジェクトのプロパティとメソッドを見て、比較しましょう（2つの間に異なるプロパティとメソッドのみがあります）。 5つの主要なポイントがあります。
| DOMプロパティとメソッド | IEプロパティとメソッド |
| charcode | キーコード |
| PreventDefault | returnValue = false |
| 関連タルゲット | frombj | toobj |
| STOPPROPATION | cancelbuble = true |
| ターゲット | srcobj |
イベントのクロスプラットフォームの互換性の問題を解決できる小さなデモでそれを見てみましょう。
<html> <head> <title> eventutil </title> <script eventtype = "text/javascript"> var eventutil = {//イベントを聞く：function（obj、eventtype、fn）{if（obj.addeventlistener）{obj.addeventlistener（eventtype、fays）; } else if（obj.attachevent）{obj.attachevent（ 'on' + eventType、fn）; } else {obj ['on' + eventType] = fn; }}、//イベントオブジェクトを返すgetevent：function（event）{return event || window.event; //イベントを返しますか？イベント：window.event; }、//ターゲットイベントオブジェクトを返すgettarget：function（event）{return event.target || event.srcobj; }、preventdefault：function（event）{if（event.preventdefault）{event.preventdefault（）; } else {event.returnValue = false; }}、removelistener：function（obj、eventtype、fn）{if（obj.removeeventlistener）{obj.removeeventlistener（eventtype、fn、false）; } else if（obj.deattachevent）{obj.detachevent（eventType、fn）; } else {obj ['on' + eventType] = null; }}、stoppropagation：function（event）{if（event.stoppropagation）{event.stoppropagation（）; } else {event.cancelbubble = true; }}}; </script> </head> <body> <input eventType = "button" value = "click me" id = "btn"/> <p> event </p> <a> hello word！</a> <script eventtype = "text/javascript"> function addbtnlisten（event）{var event = event.getil.getevent（event）; varターゲット= eventutil.getTarget（event）;アラート（「私の名前はコックです」）; alert（event.eventType）;アラート（ターゲット）; eventutil.stoppropagation（event）; } function getBodyListen（event）{alert（ "Click Body"）; }関数getLinkListen（event）{alert（ "デフォルトイベントを防ぐ"）; var event = eventutil.getEvent（event）; eventutil.preventdefault（event）; } window.onload = function（）{var btn = document.getobjbyid（ "btn"）; var link = document.getobjsbytagname（ "a"）[0]; eventutil.addlistener（btn、 "click"、addbtnlisten）; eventutil.addlistener（document.body、 "click"、getBodyListen）; eventutil.addlistener（link、 "click"、getLinkListen）; } </script> </body> </html>上記の方法は、イベントのクロスプラットフォームの問題を解決できます。次に、Charcodeのプロパティを見てみましょう。
まず、eventutilの新しい方法を定義し、FormateVent、つまりイベントオブジェクトを受け入れます。
eventutil.formatevent = function（event）{if（isie && iswin）{event.charcode =（event.type == "keypress"）？event.keycode：0; event.EventPhase = 2; - 泡の位相を示します。IEは泡立ちフェーズのみをサポートします} return event;}2：バブルのターゲットと現在のターゲットについて
ターゲットは、イベントストリームのターゲット段階にあります。 CurrentTargetは、イベントストリームのキャプチャ、ターゲット、バブルステージにあります。イベントストリームがターゲット段階にある場合にのみ、2つのポインターが同じであり、キャプチャステージとバブルステージにある場合、ターゲットはクリックされたオブジェクトを指し、現在のイベントの親を指します。
<div id = "outer" style = "background：＃099"> <p>私はターゲットdiv </p> ----この部分をクリックして、出力：e.target.tagname：p || e.currentTarget.tagname：div <p id = "inner" style = "background：＃9c0"> iはターゲットp </p> ---このパーツをクリックして、出力：e.target.tagname：p || e.currenttarget.tagname：div <br> ---この部分をクリックして、出力：e.target.tagname：div || e.currentTarget.tagname：div </div> // 2番目の変更列を見てください：<div id = "outer" style = "background：＃099"> <div>私はターゲットdiv </div> ----この部品をクリックします、出力：e.target.tagname：div || e.currentTarget.tagname：div <p id = "inner" style = "background：＃9c0"> iはターゲットp </p> ---このパーツをクリックして、出力：e.target.tagname：p || e.currenttarget.tagname：div <br> ---この部分をクリックして、出力：e.target.tagname：div || e.currenttarget.tagname：div </div>
function getobj（id）{return document.getElementById（id）; } function addevent（obj、event、fn）{if（window.attachevent）{obj.attachevent（ "on" + event、fn）; } else if（window.addeventlistener）{obj.addeventlistener（event、fn、false）; }} function test（e）{alert（ "e.target.tagname：" + e.target.tagname + "/n e.currenttarget.tagname：" + e.currenttarget.tagname）; } var outer = getobj（ "outer"）; var inenter = getobj（ "inner"）; // addEvent（inner、 "click"、test）; AddEvent（outer、 "click"、test）;3：IEとDOMの違い
| dom | すなわち | |
| ターゲットを取得します | event.target | event.srcelement |
| 文字コードを取得します | event.charcode | event.keycode |
| デフォルトの動作をブロックします | event.prevetdefault（） | event.returnValue = false |
| バブル | event.stoppropagation（） | event.cancelbubble = true |
たとえば、デフォルトの動作をブロックすることに関して、ユーザーがマウスを右クリックするとき、メニューをポップアップさせたくない場合は、デフォルト動作のブロックを使用できます。
document.body.oncontextmenu = function（event）{if（isie）{var oevent = window.event; oevent.returnvalue = false; //直接Falseを返すこともできます。デフォルトの動作を防ぐ} else {oevent.preventdefault（）; }}4：マウスイベント
<p>マウスを使用して、赤い正方形をクリックしてダブルクリックします</p> <div onmouseover = "handleevent（event）" onmouseout = "handleevent（event）" onmousedown = "handleevent（event）" onmouseup = "handleevent（event）" onclick = "handlevent（event） id = "txt1" rows = "5" cols = "45"> </textArea> </p> < cols = "45"> </textarea> </p>
JSファイルは次のとおりです。
function handleevent（event）{var otext = document.getElementById（ 'txt1'）; otext.value+= "/n"+ event.type; otext.value+= "/nターゲットは"+（event.srcelement || event.target）.id; otext.value+= "/n at（"+event.clientx+"、"+event.clienty+"）in the client"; otext.value+= "/nボタンダウンは"+event.button; var arrkeys = []; otext.value+= "/n relatedTarget is"+event.relatedTarget.tagname; //event.relatedTarget.tagnameは、マウスのソースとソースを決定できます}関数ハンドル（event）{var otext2 = document.getElementById（ 'txt2'）; otext2.value+= "/n"+event.type; var arrkeys = []; if（event.shiftkey）{arrkeys.push（ "shift"）;} if（event.ctrlkey）{arrkeys.push（ "ctrl"）;} if（event.altkey）{arrkey.push（ "alt"）;} otext2.value+= "/nキーダウン;}}}JSで最も見落とされがちなインシデントの上記の要約は、私があなたと共有するすべてのコンテンツです。参照を提供できることを願っています。wulin.comをもっとサポートできることを願っています。