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

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>

score 3 · Accepted Answer

event.currentTarget可能是你正在寻找的。

如果您要询问导致事件被触发的对象event source在Java哪里并且是事件处理程序附加到的对象，那么这可能就是您要查找的内容：targetsource

在event触发事件时传递给处理程序的对象中，有两个对象，包括 ietarget和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

希望能帮助到你：）

score 2 · Accepted Answer

2

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

$(event.target)

于 2017-01-30T11:11:44.247 回答

score 1 · Accepted Answer

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

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

score 0 · Accepted Answer

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

让我知道这是否有帮助。

score 0 · Accepted Answer

您根本不需要 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);
        });
    });

score 0 · Accepted Answer

这是一个完整页面的工作示例。调用者在以下行中记录到控制台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>

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

6 回答 6

Related

Reference