ホームページ > 記事 > ウェブフロントエンド > JavaScriptのクロスプラットフォームイベント定義と使用例を詳しく解説
クロスプラットフォーム イベント
クロスプラットフォーム イベントとは何ですか?つまり、異なるブラウザで同じイベントを実行すると、異なるメソッドが使用されます。
EventUtil オブジェクトとは何ですか?効果は何ですか?これは、イベント オブジェクトの管理を容易にするために、すべてのイベント関連の機能を統合するコンテナーです。属性はありません。主に、DOM イベントと IE イベントを可能な限り似たものにするための統合を処理します。
DOM と IE のオブジェクトのプロパティとメソッドを比較してみましょう (ここでは、2 つのプロパティとメソッドの違いのみを指摘します)。主なポイントは 5 つあります:
DOM のプロパティとメソッド IE のプロパティとメソッド。
文字コード
問題を解決できる小さなデモを見てみましょう。イベントのクロスプラットフォーム互換性の問題:
<html> <head> <title>eventUtil</title> <script eventType="text/javascript"> var eventUtil = { //监听事件 addListener: function(obj, eventType, fn) { if (obj.addEventListener) { obj.addEventListener(eventType, fn, false); } else if (obj.attachEvent) { obj.attachEvent('on' + eventType, fn); } else { obj['on' + eventType] = fn; } }, //返回event对象 getEvent: function(event) { return event || window.event; //return event ? 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 = eventUtil.getEvent(event); var target = eventUtil.getTarget(event); alert("my name is kock"); alert(event.eventType); alert(target); eventUtil.stopPropagation(event); } function getBodyListen(event) { alert("click body"); } function getLinkListen(event) { alert("prevent default event"); 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 を定義します。このメソッドは、Event オブジェクトである 1 つのパラメーターを受け取ります。
りー
以上がJavaScriptのクロスプラットフォームイベント定義と使用例を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。