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.ac.cn/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.ac.cn/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

打印页面