;/html>


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



コードをコピーします

コードは次のとおりです。 DOM 関数拡張

こんにちは





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



コードをコピー

コードは次のとおりです:< ;!DOCTYPE html> DOM 関数拡張

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





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




DOM 関数拡張</ title><br> </head><br> <body><br> <a href="javascript:void(0)" id="tagA">こんにちは</a><br> < script type="text/javascript"> 動的拡張を使用します<BR> }<BR> function Alert(){<BR>alert("これは拡張メソッドです");<BR> }<BR> var tagA =document. getElementById("tagA");<BR> tagA.Alert(); html><br><br><br>上記のコードからわかるように、DOMExtend メソッドを使用すると、さまざまな拡張機能を渡すことでさまざまな拡張機能を実装できます。名前とファン。 <br> 2. HTMLElement についての説明が終わったので、イベント バインディングについて説明します。IE と他のブラウザーのイベント バインディング メソッドが異なることは、次のとおりです。すべてのブラウザーと互換性のあるイベント バインディングを実現するコードは次のとおりです。 <br><br><br><br>コードをコピー<br> </div> <br> コードは次のとおりです。<br><br><div class="codetitle">function BindEvent(elem,event,fun){<span> if(elem.addEventListener){<a style="CURSOR: pointer" data="64137" class="copybut" id="copybut64137" onclick="doCopy('code64137')"> elem.addEventListener(event,fun,false);<u> }</u> else{</a> elem.attachEvent("on" イベント,fun);</span> } </div>}<div class="codebody" id="code64137"> <br><br>次に、イベント バインディングの例を示します。 <br><br><br><br><br>コードをコピー<br><br> </div> コードは次のとおりです:<br><br><div class="codetitle"><!DOCTYPE html><span><html lang="zh"><a style="CURSOR: pointer" data="46384" class="copybut" id="copybut46384" onclick="doCopy('code46384')"> <head><u> <title>DOM 関数拡張< /title> ;</u> </head></a> <body></span> <a href="javascript:void(0)" id="tagA">こんにちは</a></div> < ;script type="text/javascript"><div class="codebody" id="code46384"> <!--<BR> function BindEvent(elem,event,fun){<BR> if(elem.addEventListener){<BR> elem.addEventListener(event) ,fun,false);<BR> var tagA=document.getElement ById("tagA ");<BR> function Alert(){<BR>alert("これはイベント バインディングです");<BR> }<BR> BindEvent (tagA,"click",Alert);<BR> //-- ><br> </script><br> </body><br></html><br><br><br>上記のコードを実行した後、「こんにちは」をクリックすると、「これはイベント バインディングです」というポップアップが表示されます。ここで注目すべき点は、addEvenListener の 3 番目のパラメーターです。これは、Capture メソッドをキャンセルすることを意味します。バブリング法を使用します。標準的なイベント トリガー方法は 2 つあり、1 つはキャプチャ タイプ (caputre) で、もう 1 つはバブル タイプですが、IE はバブル タイプのみをサポートします。キャプチャ型の特徴は、トリガー方式は外側から内側にイベントをトリガーするのに対し、バブリング型は内側から外側にイベントをトリガーすることです。 上記のコードの A 要素が DIV 要素でラップされているとします。 A 要素がそれに関連している場合、親要素 DIV には onclick イベントがあるため、バブル タイプは、A がクリックされると、最初に A のイベントがトリガーされ、次に DIV のイベントがトリガーされることを意味します。 、キャプチャータイプです。 <br> さて、上記の分析を通じて、HTMLElement 拡張とイベント バインディングについて十分に理解できたと思います。これら 2 つの知識点を組み合わせると、次のコードを作成できます。<br><div class="codetitle"> <span><a style="CURSOR: pointer" data="73087" class="copybut" id="copybut73087" onclick="doCopy('code73087')"> <u>コードをコピーします</u></a></span> コードは次のとおりです:</div> <div class="codebody" id="code73087"> <br><!DOCTYPE html><br><html lang="zh"><br> <head><br> <title>DOM 関数拡張機能


Hello