jQuery如何使用event.data属性?代码示例

2021年3月30日16:00:59 发表评论 971 次浏览

event.data属性用于包含传递到事件方法的可选数据。绑定当前执行的处理程序时传递的数据。

语法如下:

event.data

参数:

  • 事件:它是用于在选择器上指定事件类型的名称的参数。

返回值:此方法返回一个对象。

例子:下面的示例说明了jQuery中的event.data方法:

<!DOCTYPE html>
< html >
  
< head >
     < title >The event.data property</ title >
     < script src =
"https://code.jquery.com/jquery-3.3.1.js" >
   </ script >
    
     < script type = "text/javascript" >
         $(document).ready(function() {
             $('#ClickMe').on('click', {
                 msg: 'GFG says hi to', name: 'John Doe'
             }, sayHello);
  
             $('#ClickMe').on('click', {
                 msg: 'GFG says Hi!!'
             }, sayHello);
  
             $('#ClickMe').on('click', sayHello);
  
             function sayHello(event) {
                 if (event.data == null) {
                     alert('No name or msg provided');
                 } else {
                     alert('Hello ' + event.data.msg +
                         (event.data.name != null ? ' ' 
                          + event.data.name : ''));
                 }
             }
         });
     </ script >
</ head >
  
< body style = "font-family:Arial" >
     < input id = "ClickMe" type = "button" value = "Click Me" />
</ body >
  
</ html >

输出:

点击之前:

GFG点击我

单击第一个警报框后:

jQuery | event.data属性1

单击第二警报框后:

jQuery | event.data属性2

单击第三个警报框后:

jQuery | event.data属性3

木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: