jQuery event.data 屬性

jQuery 的event.data 屬性用於檢索在綁定當前執行處理程式時傳遞給事件方法的可選資料。

在將事件處理程式繫結到 jQuery 的 on() 方法時，您可以包含一個可選的資料物件。此資料可以是您想要傳遞給事件處理程式函式的任何內容，例如字串、數字或物件，並且在事件執行期間，可以使用 event.data 屬性訪問此資料。

語法

以下是 jQuery 的event.data 屬性的語法：

event.data

引數

此方法不接受任何引數。

返回值

此方法將傳遞給事件處理程式函式的資料值作為返回值。

示例 1

以下程式演示了 jQuery 的event.data 屬性的用法：

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
</head>
<body>
    <p>Mouse hover on me</p>
    <script>
        $('p').on("mouseenter", {msg: "TutorialsPoint"}, function(event){
            alert("Passed data: " + event.data.msg);
        });
    </script>
</body>
</html>

輸出

以上程式顯示一條訊息，當滑鼠指標懸停在其上時，瀏覽器螢幕上會出現一個彈出警報，顯示傳遞給事件處理程式的資料值：

當滑鼠指標進入顯示的訊息上時：

示例 2

在下面的示例中，我們使用 jQuery 的event.data 屬性來檢索傳遞給事件處理程式函式的多個數據：

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
    <style>
        button{
            width: 100px;
            padding: 10px;
            cursor: pointer;
            background-color: green;
            color: white;
        }
        span{
            font-size: 20px;
            color: green;
            font-weight: bold;
        }
    </style>
</head>
<body>
   <p>Click on the 'Display' button to print the passed data.</p>
   <button>Display</button>
   <span></span>
    <script>
        $('button').on("click", {name: "Rahul", age: 24, city: "Hyderabad"}, function(event){
           $('span').text(
            "Name: " + event.data.name+ ' | ' +
            "Age: " + event.data.age + ' |  ' +
            "City: " + event.data.city 
           )
        });
    </script>
</body>
</html>

輸出

執行上述程式後，將顯示一個按鈕，當單擊它時，傳遞的資料將列印在其旁邊：

jquery_ref_events.htm

列印頁面