1。クロスプラットフォームイベント
クロスプラットフォームイベントとは何ですか？つまり、同じイベントが異なるブラウザで実行され、使用される方法は異なります。
eventutilオブジェクトとは何ですか？その機能は何ですか？つまり、イベントに関連するすべての機能を組み合わせてイベントオブジェクトの管理を促進するコンテナであり、属性はありません。主に、DOMイベントとIEイベント間のランニングインを扱って、可能な限り似たようにします。
DOMとIEの間のオブジェクトのプロパティとメソッドを見て、比較しましょう（2つの間に異なるプロパティとメソッドのみがあります）。 5つの主要なポイントがあります。
DOMプロパティとメソッド、つまりプロパティとメソッド
Charcode keycode
PreventDefault returnValue = false
relategtarget from bryobj | 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について
ターゲットは、イベントストリームのターゲット段階にあります。 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の違い
ドミー
ターゲットEvent.target event.srcelementを入手してください
キャラクターコードevent.charcode event.keycodeを取得します
デフォルトの動作event.prevetdefault（）event.returnValue = falseをブロックします
Bubble 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キーダウン;}}}上記はこの記事に関するものです。すべての人の学習に役立つことを願っています。