使用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獲取有關事件源的信息

回答

相關問題