0

dom0 event modelでいくつかの記事を読んで理解したことを表現しようとしてjavascriptいます。間違いがある場合は、訂正してください。

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

これを行うには2つの方法があります

1.インラインモデル

ハンドラーは要素の属性として追加されます。たとえば、link element（つまり<a>）には次のような属性があります。onclick次のような関数helloを追加します。

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

このモデルの問題は、hello（）が要素の本体に配置されているため、煩わしいことです。

2.従来のモデル

要素の本体に要素の属性としてイベントハンドラーを追加する代わりに、ハンドラーの追加/削除はスクリプトによって行われます。ハンドラーは、以下のように要素のプロパティに割り当てられます。

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

1 に答える 1

2

ほぼ正しいようです。

読みたいかもしれません: http://www.cross-browser.com/talk/event_interface_soup.php http://en.wikipedia.org/wiki/DOM_events#Traditional_model

従来のモデルのコードでは、window.onload イベントが必要です。

それで

window.onload = function () {

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

使用しているブラウザによっては、関数 hello が要素オブジェクトを受け取る可能性があるため、jQuery などを使用して dom イベントを処理すると簡単になる場合があります。

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

于 2012-05-09T07:44:43.423 に答える