20

関数は、多くのオブジェクトのイベントにバインドされています。これらのオブジェクトの 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>
4

6 に答える 6

0

イベントのターゲットを取得するために 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);
        });
    });
于 2016-06-09T18:24:06.797 に答える
0

これは完全なページの実例です。発信者は次の行でコンソールに記録されます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>
于 2016-05-18T20:09:40.247 に答える