10

JavaScriptでイベントを操作する方法を学んでいて、「イベント処理を使用するときに、なぜイベントオブジェクトをパラメーター（引数）として関数に渡さなければならないのか」と疑問に思っています。

これが私が話していることの例です：

<script type="text/javascript">
    document.getElementById('button_1').onclick = (function (event) {
        alert("The event is: " + "on" + event.type);
    });
</script>

私は上記のコードを書きました、そして私はそれが何をするかをほとんど理解しています。私は（イベント）の通過全体を理解していません。これは、button_1.onclickイベントハンドラーに無名関数を割り当てる方法だと思いました。イベントハンドラーは、割り当てられる前にイベントを渡そうとしますか？...これを理解するのに苦労しています。誰かが私のためにこれを明確にしてくれたら、私は感謝するでしょう。

[Googleで検索してみましたが、非常に複雑な説明と例が見つかりました。簡単から中級の説明だけが役に立ちます。] =）

どうもありがとうございます。

4

5 に答える 5

13

あなたがそれを好きかどうかにかかわらず、これまでに存在するイベント

名前を指定しなくても、イベントは常に存在します。

$(".foo").on("click", function(){
  alert( arguments[0].type );
});

これは、次のように言うのと同じです。

$(".foo").on("click", function(event){
  alert( event.type );
});

イベントオブジェクトはすでにコールバックに渡されています（名前を指定するかどうかに関係なく）。必要に応じて、イベントオブジェクトを使用しないことを選択できます。たとえば、jQueryのonClickメソッドを調べた場合：

$(".foo").on("click", function(){
  /* Do stuff */
});

それを利用する

コールバックで参照されているイベントオブジェクトがないことに注意してください。私はする必要はありません。ただし、目的を問わず、使用する場合は、次の名前を付ける必要があります。

$(".foo").on("click", function(myEvent){
  myEvent.preventDefault();
  myEvent.stopPropagation();
});

イベントの詳細へのアクセスを許可したので、イベントの結果として生じるデフォルトの動作を防ぐことができます。また、イベントがDOMを他の要素にバブリングするのを防ぐこともできます。

実例

要素のクリックイベントをリッスンしたいとします。

$("#bigSquare").on("click", function(event){
  /* Do something */
});

要素自体またはその子のいずれかをクリックすると、要素でクリックイベントが発生します。ここで、この要素に2つの子があるとします。

<div id="bigSquare">
  <div id="redSquare"></div>
  <div id="blueSquare"></div>
</div>

これらのいずれかをクリックすると、大きな四角、赤い四角、または青い四角が大きな四角に「クリック」イベントを引き起こします。最初にクリックした要素にクリックイベントが発生した後（イベントはDOMをバブルアップします）。

イベント自体を介して、クリックイベントのターゲットである要素を特定できます。

$("#bigSquare").on("click", function(event){
  alert( event.target.id );
});

ここで、イベントを発生させたターゲットのIDにアクセスする方法に注意してください。赤い四角をクリックすると、そのイベントが大きな四角に泡立つと、「redSquare」というアラートが表示されます。青い四角も同じです。それをクリックすると、イベントが大きな正方形にバブルアップし、「blueSquare」というアラートが表示されます。

次のデモを介してこれをオンラインでテストできます：http：//jsbin.com/ejekim/edit#javascript,live

オレンジ、赤、または青の四角をクリックして、アラートの内容を確認してください。

于 2012-04-18T22:05:39.263 に答える
4

eventパラメータをどこにも渡していない。と呼ばれる1つのパラメーターを受け取る関数を作成しているだけですevent。

ブラウザがイベントハンドラを呼び出すと、ブラウザはそれに割り当てられた関数を呼び出し、eventオブジェクトを最初のパラメータとしてブラウザに渡します。

()PSあなたはあなたの関数の周りを必要としません。

document.getElementById('button_1').onclick = function (event) {
    alert("The event is: " + "on" + event.type);
};
于 2012-04-18T22:07:37.813 に答える
4

関数にイベントを渡すのではなく、関数に渡される最初のパラメーターに名前を付けますevent。

ブラウザは関数を呼び出すブラウザであり、関数を呼び出すときにイベントオブジェクトを渡します。そのパラメータに名前を付けないことを選択できますfunction(){}が、ブラウザは引き続きイベントオブジェクトを渡します。適切と思われる場合は、使用することも使用しないこともできます。

于 2012-04-18T22:08:06.360 に答える
0

簡単に言うと、ハンドラーに渡されるEventオブジェクトには、イベントに関する詳細が含まれています。たとえば、aKeyboardEventには、押されたキー、対応する文字、および押された修飾キー（alt、shift、control、meta）に関する情報が含まれています。

イベントハンドラーは、割り当てられる前にイベントを渡そうとしますか？

eventハンドラーは関数なので、通行人ではなく、の受信者です。

  • onclickイベントハンドラーは、ハンドラーが呼び出される前に、要素のプロパティに割り当てると（またはaddEventListener、最新の優先メソッドを呼び出すことによって）バインドされます。
  • Eventオブジェクトは、ハンドラーが呼び出されたとき、つまりイベントが発生したときに渡されます。

したがって、ユーザーがあなたをクリックする#button_1と、ボタンに対して「クリック」イベントが発生し、ボタンの「クリック」ハンドラーが呼び出されます。このハンドラーには、が渡されMouseEventます。

詳細については、イベント駆動型プログラミングについてお読みください。

于 2012-04-18T22:12:50.883 に答える
0

他の回答やコメントに追加するために、コードはIEでは機能しません。クロスブラウザ機能の場合、最初の引数の存在をテストする必要があります。

<body>
  <button id="button_1">Click Me!</button>
  <script type="text/javascript" >
    document.getElementById('button_1').onclick = (
      function(event) {
        var e = event ? event : window.event;
        alert("The event is: " + "on" + e.type);
      });
  </script>
</body>
于 2012-04-18T22:20:21.440 に答える