2012-05-09 10 views
0

dom0 event modelの記事を読んで理解したことをjavascriptに表現しようとしています。間違いがあれば修正してください。javascriptのdom0イベントモデルを理解

dom0モデルでは、イベントハンドラを要素にアタッチすることができます。1つのハンドラのみをアタッチすることができます。イベントが発生すると、ブラウザはそのイベントハンドラを呼び出します。

この

1.Inlineを行う2つの方法がありますハンドラがelement.For例の属性として追加されたモデル

link element(すなわち<a>)はonclickと呼ばれる属性を持っています。私たちは、このモデルの問題は、それは()体内に入れているハローいるので、邪魔にあるということである。この

<a href="#" onclick="hello();"> say hello </a> 
... 
<script type="text/javascript"> 
    function hello(){ 
     window.alert("Hello"); 
    } 
</script> 

のようなハロー機能を追加します要素の

2.traditionalモデルの代わりに要素の本体内の要素の属性としてイベントハンドラを追加するので

、ハンドラの追加/削除がscript.Theハンドラによって行われているのように、要素のプロパティに割り当てられます以下

<a href="#" id="hellolink"> say hello </a> 
... 
<script type="text/javascript"> 
    function hello(){ 
     window.alert("Hello"); 
    } 
    //adding handler 
    document.getElementById('hellolink').onclick=hello; 
</script> 
+1

※ご理解いただきましたら幸いですか? – Joseph

+0

はい、私の理解が正しいかどうか教えてください – damon

答えて

2

右のように見えます。 http://www.cross-browser.com/talk/event_interface_soup.php http://en.wikipedia.org/wiki/DOM_events#Traditional_model

を、伝統的なモデルのコードのためにあなたは、AA window.onloadイベント

を持っている必要があります。

あなたは読みたいと思うかもしれませんので、多分それはあなたが時間にjQueryのようなものをあなたのために簡単に使用しますならば、あなたは要素オブジェクトを受け取ることがあります機能のハローを使用しているブラウザによって

ので

window.onload = function() { 

    var el = document.getElementById('hellolink'); 
    if (el) { 
     el.onclick = hello; 
    } 
}; 

あなたのDOMイベントをandleleしてください。

http://api.jquery.com/click/

関連する問題