Question

函数绑定到许多对象的事件。其中一个对象触发事件，jQuery启动。如何找出谁在JavaScript函数中解雇了事件？

我已尝试使用function [name](event){}并在事件中进行了调查，但我得到“'数据'为空或不是对象”。

这是我现在的代码：

<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>

Answer 1

您可以在Jquery函数中使用 this ，它会为您提供已注入事件的项目。

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

Answer 2

这是一个完整页面的工作示例。调用者在行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>

Answer 3

根本不需要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'不是click事件的属性。

    $(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);
        });
    });

Answer 4

使用target可以访问导致当前执行/事件的控件。像这样：

$(event.target)

Answer 5

将事件附加到多个对象时，确定触发事件的哪个元素的最佳方法是使用 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);
    });

请告诉我这是否有帮助。

Answer 6

event.currentTarget可能就是您想要的。

如果您像event source那样询问Java，其中 target 是导致事件被触发的对象，而 {{ 1}} 是事件处理程序所附加到的对象，那么这可能就是您要查找的内容：

在触发事件时传递给处理程序的 source 对象中，有两个对象，包括event和target。

currentTarget是导致事件被触发的对象
target是附加处理程序的对象

要在您的代码中显示它：

currentTarget

更多Event.currentTarget

希望它会有所帮助：）

使用jQuery获取有关事件源的信息

6 个答案: