すべてのブラウザに対応したJavaScript DOM拡張機能_JavaScriptスキル

今日は金曜日で、コンピューターの前に座っている間は何もすることがありません。来週は新しい要件や仕事の手配があるかもしれません。今日はメモ程度に専門的なことを書きたいと思いますので、皆さんのアドバイスをよろしくお願いします（笑）。
DOM 要素の機能を拡張し、より柔軟で使いやすいようにいくつかのカスタム メソッドを追加したい場合があります。まず例を見てみましょう。 code

コードは次のとおりです。

こんにちは

;/html>


上記のコードからわかるように、A タグをクリックすると、「Hello」がポップアップ表示されることは間違いありません。ただし、tagA は DOM 要素です。 onclick の場合 イベントに加えて、onmouseover、onmouseout、onmousemove などがあり、これらのイベントはすべて DOM 要素自体に固有のものですが、たとえば、tagA.bind をサポートするように拡張したいと考えています。 tagA.onclick=function(){} の代わりに、tagA.bind( "click",function(){}) を使用できます。 OK、目的は明確になりました。まず次のコードを見てみましょう:

コードをコピーします

コードは次のとおりです。

> ;

こんにちは





上記のコードは、関数を拡張した後の最終結果です。前のコードと同じ機能がありますが、今は実行できません。その前に見てみましょう。これは後で使用するため、非常に重要です。
1. DOM 標準では、HTMLElement は Element から継承され、Element は Node から継承されます。 HTMLElement のプロトタイプを使用して HTML を拡張するにはどうすればよいですか?コードの一部を見てみましょう:

コードをコピー

コードは次のとおりです:< ;!DOCTYPE html>

!--
HTMLElement.prototype.Alert=function(){
alter("これは拡張メソッドです");
}
var tagA=document.getElementById ("tagA");
tagA.Alert();
//-->





上記のコードは、ページが読み込まれるときに「これは拡張メソッドです」というメッセージを表示しますが、IE6、7、8 ではエラーになることに気づいたと思いますが、IE9 以降では機能しません。または Chrome、Firefox、Opera などのブラウザではすべてが正常に動作します。これは互換性の問題です。後で解決されます。
上記のコードは十分な柔軟性がありません。さらに柔軟にするために最適化してみましょう:

コードをコピーします コードは次のとおりです。次のように:

こんにちは
動的拡張を使用します
}
function Alert(){
alert("これは拡張メソッドです");
}
var tagA =document. getElementById("tagA");
tagA.Alert(); html>


上記のコードからわかるように、DOMExtend メソッドを使用すると、さまざまな拡張機能を渡すことでさまざまな拡張機能を実装できます。名前とファン。
2. HTMLElement についての説明が終わったので、イベント バインディングについて説明します。IE と他のブラウザーのイベント バインディング メソッドが異なることは、次のとおりです。すべてのブラウザーと互換性のあるイベント バインディングを実現するコードは次のとおりです。



コードをコピー

コードは次のとおりです。

function BindEvent(elem,event,fun){ if(elem.addEventListener){ elem.addEventListener(event,fun,false); } else{ elem.attachEvent("on" イベント,fun); }

}

次に、イベント バインディングの例を示します。




コードをコピー

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

こんにちは

< ;script type="text/javascript">