ホームページ > 記事 > ウェブフロントエンド > JavaScriptのクロスプラットフォームイベント定義と使用例を詳しく解説
JavaScriptのクロスプラットフォームイベント定義と使用例を詳しく解説
- 伊谢尔伦オリジナル
- 2017-07-22 15:43:511852ブラウズ
クロスプラットフォーム イベント
クロスプラットフォーム イベントとは何ですか?つまり、異なるブラウザで同じイベントを実行すると、異なるメソッドが使用されます。
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 サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。