4

HTML要素にイベントを添付する方法はたくさんあります。最初の方法は次のとおりです。HTML属性

<div id="foo" onclick="print2()> My event is attached as HTML attribute</div>

2番目の方法は、ライブラリ（jQueryなど）を使用することです。

<div id="bar"> My event is attached using jQuery </div>
<script>
    $("#bar").click(function() {
        alert("Hi this is Bar");
    }
</script>

私は以前、jQueryがイベントを対応するHTML属性に内部的に変換している可能性があると考えていましたが、これは起こりません。これをチェックしてくださいhttp://jsfiddle.net/blunderboy/wp4RU/3/

fooとbarのすべての属性をログに記録していますが、barにonclick属性がないことがわかります。説明してください。

4

1 に答える 1

4

HTMLイベントと呼ばれるものはありません！説明した2種類のイベントは、インラインイベントと目立たないイベントで、どちらもjavascriptイベントです。

インラインイベント

要素自体でjavascriptコードを宣言すると、インラインイベントになります。、、、などのいくつかの一般的なイベント（HTML要素の属性として）があり、onclickそれらはすべて。で始まります。そのような例の1つは次のとおりです。onkeydownonkeypressonkeyupon

<a href="#" onclick="alert('You clicked me!')">Click Me!</a>

目立たないイベント

イベントがトリガーされたときに実行するものを割り当てる必要があります。シンボルは常にJavaScriptで使用され、右側の=値を左側のメソッドまたはプロパティに割り当てます。

イベントをアタッチできるオブジェクトはウィンドウだけではありません。オブジェクトを一意に識別する方法があれば、Webページ内の任意のオブジェクトにイベントを添付できます。オブジェクトを識別する1つの方法は、オブジェクトにIDを指定し、それを参照することdocument.getElementById("id_of_the_element")です。

同じ例を見てみましょう。

<a href="#" id="clickme">Click Me!</a>

onclick属性の代わりにID、同じ場所にHTML要素を一意に識別するがあります<a>。これで、JavaScript内のIDを次のように取得できます。

document.getElementById('clickme');

このために、属性の使用方法と大差ないイベントハンドラーをアタッチできます。on正面にがないだけです。前の例ではを使用onclickしましたが、今はを使用しますclick。

document.getElementById('clickme').click = functionName;

ここで、functionNameは任意のjavascriptの関数名または無名関数を指します。したがって、アラートの場合、という名前の関数を作成すると、次のalertme()ように定義できます。

function alertme()
{
    alert('You clicked me!');
}

これで、関数を要素にアタッチすることが次のように実行できます。

document.getElementById('clickme').click = alertme;

まだ怠惰な気分ですが、名前のない無名関数の方法を使用してそれを行うことができます。

document.getElementById('clickme').click = function () {
    alert('You clicked me!');
}

ご理解いただければ幸いです。:)さらに明確にするために私に知らせてください。

于 2012-09-06T05:06:09.743 に答える