0

たとえば、ウェブサイトでインラインイベントを使用することに慣れています

<head>
<script>
function func() {
alert("test");
}
</script>
</head>
<body>
<div id="mydiv" onclick="func()"></div>
</body>

最近のサイトはインライン イベントをまったく使用していないことに気付きました。次のように実用的にイベントを設定できることは知っています。

document.getElementById('mydiv').onclick = function(){ func()}

これはどのように行われるべきですか？上記の行をすべてのページの最後に配置する必要がありますか?

たとえば、このサイトの入力フィールドに関連付けられたキープレス、クリック、ぼかしイベントはどのようになっていますか: https://twitter.com/signup

ありがとう。

4

4 に答える 4

1

はい、これはイベントをオブジェクトに追加する有効な方法の 1 つですが、一度に複数の関数がバインドされるのを防ぎます。

jQuery (または mootools などの同様の JavaScript ライブラリ) を調べることをお勧めします。これは、最近の大多数のサイトが JavaScript イベントをバインドする方法です。

たとえば、jQuery では通常、次のようにクリックをバインドします。

$("#mydiv").click(function(event) {
  // click handling code
});
于 2012-07-02T08:18:14.657 に答える
0

イベント リスナーを追加する最もクリーンな方法は、組み込みのメソッドを使用することです。

var el = document.getElementById('mydiv');
if (el.addEventListener) {
  el.addEventListener('click', modifyText, false); 
} else if (el.attachEvent)  {
  el.attachEvent('onclick', modifyText);
}

function modifyText() {

}

これにより、よりクリーンで読みやすく再利用可能なコードが促進されます。（注attachEventはIE9より前のものです）

このコードは、<body>タグの末尾 (または<body>タグ内の DOM 要素が追加された後の任意の場所) に配置するか、DOM の読み込みが完了した後に実行されるウィンドウonload関数内に配置できます。

window.onload = function() {  
  // here
};
于 2012-07-02T08:16:46.310 に答える
0

推奨される方法は を使用することです。多くの場合、ブラウザー間の変動をスムーズにするライブラリ ( YUIやjQueryaddEventListenerなど) と組み合わせて使用​​します (たとえば、古い IE は をサポートしていません)。addEventListener

上記の行をすべてのページの最後に配置する必要がありますか?

通常、JavaScript を独自のファイルに入れ、srcそれを必要とする各ページに入れます。

于 2012-07-02T08:18:25.157 に答える
0

ここでの主な考え方は、ハンドラーを登録する DOM 要素をロードする必要があるということです。したがって、要素 html の後にイベント バインディングを行うか、window.onload イベント ハンドラで行うことができます。これは、次のように、実際のタグ定義の前に定義できます。

window.onload = function(){
 // your event binding
}

しかし、私のアドバイスは、可能な限りドキュメントの最後に JavaScript を含めることです。

于 2012-07-02T08:19:02.407 に答える