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

函数绑定到许多对象的事件。其中一个对象触发事件，并且jQuery启动。如何找出是谁在JavaScript函数中触发了事件？使用jQuery获取有关事件源的信息

我试过使用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>

来源

2009-09-03 Zian Choy

[获取该烧制使用JQuery事件的元素的ID（可能的重复http://stackoverflow.com/questions/48239/getting-the-id-of-the-element-that-烧制的事件 - 使用 - jQuery的） – 2012-05-04 05:14:18

下面是一个完整页面的工作示例。来电被记录到控制台的线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-18 20:09:40

你不需要的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时，这非常有意义，因为“数据”不是点击事件的属性。

$(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-09 18:24:06 hightempo

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

$(event.target)

来源

2017-01-30 11:11:44 user7488658

当您将事件的多个对象，以确定哪些元素的触发事件是使用这关键字的最佳方式

。示例 -

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

让我知道这是否有帮助。

来源

2017-03-22 09:55:40

你可以使用这个在jquery函数中，它会给你注入事件的项目。

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

来源

2017-07-12 12:14:00

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

回答

相关问题