web-dev-qa-db-ja.com

jQueryを使用してイベントのソースに関する情報を取得する

関数は、多くのオブジェクトのイベントにバインドされています。それらのオブジェクトの1つがイベントを発生させ、jQueryが起動します。JavaScript関数内で誰がイベントを発生させたかを確認するにはどうすればよいですか？

function [name](event){}を使用してイベントを突いてみましたが、「「データ」がnullであるか、オブジェクトではありません」というメッセージが表示されます。

これが今の私のコードです：

<script type="text/javascript">
    $(document).ready(function() {
    $('.opening').bind("click", function(event) {
         //code to populate event.data since right now, the tags don't hold the info...they will eventually with an XHTML custom namespace
            event.data.building = "Student Center";
            event.data.room = "Pacific Ballroom A";
            event.data.s_time = "9/15/2009 8:00";
            event.data.e_time = "9/15/2009 10:00";

            indicatePreferenceByClick(event);
        });
    function indicatePreferenceByClick(event) {
        alert("I got clicked and all I got was this alert box.");
        $("#left").load("../ReserveSpace/PreferenceByClick", { building: event.data.building, room: event.data.room, s_time: event.data.s_time, e_time: event.data.e_time});
    };
</script>
jqueryjquery-events
17
Zian Choy

targetを使用すると、現在の実行/イベントの原因となったコントロールにアクセスできます。このような：

$(event.target)
1
user7488658

これは完全なページの実際の例です。発信者は、console.log($caller.prop("id"));行のコンソールに記録されます。

<!DOCTYPE html>
<html>

<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <title>Untitled 1</title>
    <script src="https://code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous"></script>
    <script type="text/javascript">
        $(document).ready(function() {
                    $('.opening').on("click", {building:"Student Center", room:"Pacific Ballroom A", s_time:"9/15/2009 8:00", e_time:"9/15/2009 10:00"}, function(event) {
                        indicatePreferenceByClick(event);
                    });

                    function indicatePreferenceByClick(event) {
                        alert("I got clicked and all I got was this alert box.");
                        var $caller = $(event.target);
                        console.log($caller.prop("id"));
                        var building = event.data.building;
                        var room = event.data.room;
                        var s_time = event.data.s_time;
                        var e_time = event.data.e_time;
                    };
        });
    </script>
</head>

<body>
<div style="padding:10px"><button type="button" id="button1" class="opening">button1</button></div>
<div style="padding:10px"><button type="button" id="button2" class="opening">button2</button></div>
</body>

</html>
0
Justin Russell

イベントを複数のオブジェクトにアタッチする場合、イベントが発生した要素を特定する最良の方法は、thisキーワードを使用することです。例-

$('.opening').bind("click", function(event) {

     var current = $(this); // will give you who fired the event.

     //code to populate event.data since right now, the tags don't hold the info...they will eventually with an XHTML custom namespace
        event.data.building = "Student Center";
        event.data.room = "Pacific Ballroom A";
        event.data.s_time = "9/15/2009 8:00";
        event.data.e_time = "9/15/2009 10:00";

        indicatePreferenceByClick(event);
    });

これが役立つかどうか教えてください。

0
Parikshit Bhagawati

event.currentTargetはあなたが探しているものかもしれません。

Javaのようにevent sourceについて質問している場合、targetは、イベントが発生する原因となったオブジェクトであり、sourceは、イベントハンドラーがアタッチされたオブジェクトであり、これはあなたが探しているものかもしれません：

イベントが発生したときにハンドラーに渡されるeventオブジェクト内には、targetとcurrentTarget。

  • targetは、イベントが発生する原因となったオブジェクトです
  • currentTargetは、ハンドラーがアタッチされたオブジェクトです

コードに表示するには：

<script type="text/javascript">
  $(document).ready(function() {
    $('.opening').bind("click", function(event) {
      // ...your code
      indicatePreferenceByClick(event, event.currentTarget);
    });
    function indicatePreferenceByClick(event, eventSource) {
      alert("I got the event source.");
      console.log(eventSource);
      // ...your code
    }
  });
</script>

詳細 Event.currentTarget

それが役に立てば幸い ：）

0
Godson Programmer

Jquery関数でthisを使用できます。これにより、イベントが挿入されたアイテムが提供されます。

<script type="text/javascript">
$(document).ready(function() {
    $('.opening').bind("click", function(event) {
       console.log($(this));
    });
});    
</script>
0
Sandip - Full Stack Developer

イベントのターゲットを取得するためにjQueryはまったく必要ありません。これは、イベントのcurrentTargetプロパティとして常に使用できます。もちろん、jQueryを使用してイベントハンドラーを設定することもできますが、ターゲットの取得は、そのライブラリを使用せずに簡単に実行できます。例えば：

    <!DOCTYPE html>
    <html>
        <head>
            <script type="text/javascript" src="jquery.js"></script>
        </head>
        <body>

            <button type="button" id="button1" class="opening">button1</button>
            <button type="button" id="button2" class="opening">button2</button>

            <script type="text/javascript">
                $(document).ready(function() {
                    $('.opening').bind("click", function(event) {
                        indicatePreferenceByClick(event);
                    });
                });

                function indicatePreferenceByClick(event) {
                    console.log('target', event.currentTarget);
                }
            </script>

        </body>
    </html>

Event.dataにアクセスしようとするときに「null」を処理することに関しては、「data」はクリックイベントのプロパティではないため、これは完全に理にかなっています。

    $(document).ready(function() {
        $('.opening').bind("click", function(event) {
          // event.data is null so you can't add properties to it
            event.data.building = "Student Center";  // <- this will fail
            indicatePreferenceByClick(event);
        });
    });

次のように、データオブジェクトに別のプロパティを追加できます。

$(document).ready(function() {
        $('.opening').bind("click", function(event) {
          event.data = {};
            event.data.building = "Student Center";
            indicatePreferenceByClick(event);
        });
    });

または、別の変数を関数に渡すことができます。

$(document).ready(function() {
        $('.opening').bind("click", function(event) {
          var data = {};
            data.building = "Student Center";
            indicatePreferenceByClick(event, data);
        });
    });
0
hightempo