ホームページ  >  記事  >  ウェブフロントエンド  >  さまざまなブラウザに対応したJavaScriptイベント_JavaScriptスキル

さまざまなブラウザに対応したJavaScriptイベント_JavaScriptスキル

WBOY
WBOYオリジナル
2016-05-16 16:16:111263ブラウズ

イベントの呼び出し:

イベントオブジェクト
イベントオブジェクトとは何ですか? dom 上でイベントがトリガーされると、イベント オブジェクト イベントが生成されます。たとえば、マウスがクリックされると、クリックの種類が生成され、その要素によって発行される
も生成されます。 dom イベント オブジェクトの type 属性は、イベント ターゲットを取得するために使用されます。 stopPropagation() メソッドは、イベント
のデフォルトの動作を防止します。 IE のイベント オブジェクトの type 属性はイベント オブジェクトの取得に使用され、srcElement 属性はイベントのバブリングを防止するために使用されます。 true に設定すると、ブロックすることを意味します。 False は
をブロックしないことを意味します returnValue 属性は、イベントをブロックするためのデフォルトの動作です。 false に設定すると、

がブロックされることを意味します。

コードをコピー コードは次のとおりです:

// さまざまなブラウザに対応 クロスブラウザ イベント処理 ------- 統合カプセル化
var EventHandle = {
// 要素: 要素、タイプ: クリックイベント、ハンドル: 実行メソッド
//ハンドルを追加
AddEventHandle: 関数 (要素、型、ハンドラー) {
if (element.addEventListener) {
element.addEventListener(type, handler, false);//---false //バブリング dom2 レベルを表します
}
else if (element.attachEvent) {
element.attachEvent("on" type, handler);
} else {
element["on" type] = handler;
}
}、
//ハンドルの削除 イベント処理が機能しない
removeEventHandle: 関数 (要素、型、ハンドラー) {
If (element.removeEventListener) { // dom2 レベルのイベント処理タイプは onclick
をサポートします element.removeEventListener(type, handler, false) //---false //バブリングを表します
}
else if (element.detachEvent) {
element.detachEvent("on" type, handler) //IE をサポート
} else {
element["on" type] = null;//dom0 レベルのイベント処理従来のクリック イベント
}
}、
// イベント オブジェクトを取得します。ブラウザと互換性のあるすべてのオブジェクト
GetEvent: 関数 (イベント) {
returnevent: window.event; //IE ブラウザの以前のバージョンで必要なのは window.event
}、
//イベントの種類を取得します。クリックまたはマウスの動きですか
GetType:関数(イベント){
returnevent.type;
}、
// 現在の要素を取得します
GetElement: 関数 (イベント) {
戻りevent.target ||
}、
//ブロックイベントのデフォルト動作
: 関数 (イベント) {
If (event.preventDefault) {
event.preventDefault();
}
else {
event.returnValue = false;
}
}、
//イベントのバブリングを防止します
StopPropagation: 関数 (イベント) {
If (event.stopPropagation) {
event.stopPropagation();
}
else {
event.cancelBubble = true;
}
}
}
声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。