5.4/javascript/new-api_events/index.html

   1
   2 <!doctype html>
   3 <html lang="en" class="no-js">
   4   <head>
   5
   6       <meta charset="utf-8">
   7       <meta name="viewport" content="width=device-width,initial-scale=1">
   8
   9
  10
  11
  12       <link rel="icon" href="../../assets/default.favicon.ico">
  13       <meta name="generator" content="mkdocs-1.1.2, mkdocs-material-7.1.2">
  14
  15
  16
  17         <title>Event Handling - WoltLab Suite Documentation</title>
  18
  19
  20
  21       <link rel="stylesheet" href="../../assets/stylesheets/main.6f955dcd.min.css">
  22
  23
  24         <link rel="stylesheet" href="../../assets/stylesheets/palette.ef6f36e2.min.css">
  25
  26
  27
  28           <meta name="theme-color" content="#009485">
  29
  30
  31
  32
  33
  34
  35
  36
  37
  38       <link rel="stylesheet" href="../../stylesheets/extra.css">
  39
  40
  41
  42
  43
  44   </head>
  45
  46
  47
  48
  49
  50
  51
  52     <body dir="ltr" data-md-color-scheme="" data-md-color-primary="teal" data-md-color-accent="">
  53
  54
  55     <script>function __prefix(e){return new URL("../..",location).pathname+"."+e}function __get(e,t=localStorage){return JSON.parse(t.getItem(__prefix(e)))}</script>
  56
  57     <input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
  58     <input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
  59     <label class="md-overlay" for="__drawer"></label>
  60     <div data-md-component="skip">
  61
  62
  63         <a href="#event-handling-javascript-api" class="md-skip">
  64           Skip to content
  65         </a>
  66
  67     </div>
  68     <div data-md-component="announce">
  69
  70         <aside class="md-announce">
  71           <div class="md-announce__inner md-grid md-typeset">
  72
  73     <a href="https://www.woltlab.com">Back to <strong>woltlab.com</strong></a>
  74
  75           </div>
  76         </aside>
  77
  78     </div>
  79
  80       <header class="md-header" data-md-component="header">
  81   <nav class="md-header__inner md-grid" aria-label="Header">
  82     <a href="../.." title="WoltLab Suite Documentation" class="md-header__button md-logo" aria-label="WoltLab Suite Documentation" data-md-component="logo">
  83
  84   <img src="../../assets/logo.png" alt="logo">
  85
  86     </a>
  87     <label class="md-header__button md-icon" for="__drawer">
  88       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 6h18v2H3V6m0 5h18v2H3v-2m0 5h18v2H3v-2z"/></svg>
  89     </label>
  90     <div class="md-header__title" data-md-component="header-title">
  91       <div class="md-header__ellipsis">
  92         <div class="md-header__topic">
  93           <span class="md-ellipsis">
  94             WoltLab Suite Documentation
  95           </span>
  96         </div>
  97         <div class="md-header__topic" data-md-component="header-topic">
  98           <span class="md-ellipsis">
  99
 100               Event Handling
 101
 102           </span>
 103         </div>
 104       </div>
 105     </div>
 106
 107
 108
 109       <label class="md-header__button md-icon" for="__search">
 110         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5z"/></svg>
 111       </label>
 112
 113 <div class="md-search" data-md-component="search" role="dialog">
 114   <label class="md-search__overlay" for="__search"></label>
 115   <div class="md-search__inner" role="search">
 116     <form class="md-search__form" name="search">
 117       <input type="text" class="md-search__input" name="query" aria-label="Search" placeholder="Search" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="search-query" data-md-state="active" required>
 118       <label class="md-search__icon md-icon" for="__search">
 119         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5z"/></svg>
 120         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12z"/></svg>
 121       </label>
 122       <button type="reset" class="md-search__icon md-icon" aria-label="Clear" tabindex="-1">
 123         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/></svg>
 124       </button>
 125     </form>
 126     <div class="md-search__output">
 127       <div class="md-search__scrollwrap" data-md-scrollfix>
 128         <div class="md-search-result" data-md-component="search-result">
 129           <div class="md-search-result__meta">
 130             Initializing search
 131           </div>
 132           <ol class="md-search-result__list"></ol>
 133         </div>
 134       </div>
 135     </div>
 136   </div>
 137 </div>
 138
 139
 140       <div class="md-header__source">
 141
 142 <a href="https://github.com/WoltLab/docs.woltlab.com/" title="Go to repository" class="md-source" data-md-component="source">
 143   <div class="md-source__icon md-icon">
 144
 145     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M439.55 236.05 244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81z"/></svg>
 146   </div>
 147   <div class="md-source__repository">
 148     GitHub
 149   </div>
 150 </a>
 151       </div>
 152
 153   </nav>
 154 </header>
 155
 156     <div class="md-container" data-md-component="container">
 157
 158
 159
 160
 161       <main class="md-main" data-md-component="main">
 162         <div class="md-main__inner md-grid">
 163
 164
 165
 166               <div class="md-sidebar md-sidebar--primary" data-md-component="sidebar" data-md-type="navigation" >
 167                 <div class="md-sidebar__scrollwrap">
 168                   <div class="md-sidebar__inner">
 169
 170
 171
 172 <nav class="md-nav md-nav--primary" aria-label="Navigation" data-md-level="0">
 173   <label class="md-nav__title" for="__drawer">
 174     <a href="../.." title="WoltLab Suite Documentation" class="md-nav__button md-logo" aria-label="WoltLab Suite Documentation" data-md-component="logo">
 175
 176   <img src="../../assets/logo.png" alt="logo">
 177
 178     </a>
 179     WoltLab Suite Documentation
 180   </label>
 181
 182     <div class="md-nav__source">
 183
 184 <a href="https://github.com/WoltLab/docs.woltlab.com/" title="Go to repository" class="md-source" data-md-component="source">
 185   <div class="md-source__icon md-icon">
 186
 187     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M439.55 236.05 244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81z"/></svg>
 188   </div>
 189   <div class="md-source__repository">
 190     GitHub
 191   </div>
 192 </a>
 193     </div>
 194
 195   <ul class="md-nav__list" data-md-scrollfix>
 196
 197
 198
 199
 200
 201
 202
 203
 204     <li class="md-nav__item">
 205       <a href="../../getting-started/" class="md-nav__link">
 206         Getting Started
 207       </a>
 208     </li>
 209
 210
 211
 212
 213
 214
 215
 216
 217
 218
 219
 220     <li class="md-nav__item md-nav__item--nested">
 221
 222
 223         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_2" type="checkbox" id="__nav_2" >
 224
 225       <label class="md-nav__link" for="__nav_2">
 226         PHP API
 227         <span class="md-nav__icon md-icon"></span>
 228       </label>
 229       <nav class="md-nav" aria-label="PHP API" data-md-level="1">
 230         <label class="md-nav__title" for="__nav_2">
 231           <span class="md-nav__icon md-icon"></span>
 232           PHP API
 233         </label>
 234         <ul class="md-nav__list" data-md-scrollfix>
 235
 236
 237
 238
 239
 240     <li class="md-nav__item">
 241       <a href="../../php/pages/" class="md-nav__link">
 242         Pages
 243       </a>
 244     </li>
 245
 246
 247
 248
 249
 250
 251
 252     <li class="md-nav__item">
 253       <a href="../../php/database-objects/" class="md-nav__link">
 254         Database Objects
 255       </a>
 256     </li>
 257
 258
 259
 260
 261
 262
 263
 264     <li class="md-nav__item">
 265       <a href="../../php/database-access/" class="md-nav__link">
 266         Database Access
 267       </a>
 268     </li>
 269
 270
 271
 272
 273
 274
 275
 276     <li class="md-nav__item">
 277       <a href="../../php/exceptions/" class="md-nav__link">
 278         Exceptions
 279       </a>
 280     </li>
 281
 282
 283
 284
 285
 286
 287
 288
 289     <li class="md-nav__item md-nav__item--nested">
 290
 291
 292         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_2_5" type="checkbox" id="__nav_2_5" >
 293
 294       <label class="md-nav__link" for="__nav_2_5">
 295         API
 296         <span class="md-nav__icon md-icon"></span>
 297       </label>
 298       <nav class="md-nav" aria-label="API" data-md-level="2">
 299         <label class="md-nav__title" for="__nav_2_5">
 300           <span class="md-nav__icon md-icon"></span>
 301           API
 302         </label>
 303         <ul class="md-nav__list" data-md-scrollfix>
 304
 305
 306
 307
 308
 309
 310     <li class="md-nav__item md-nav__item--nested">
 311
 312
 313         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_2_5_1" type="checkbox" id="__nav_2_5_1" >
 314
 315       <label class="md-nav__link" for="__nav_2_5_1">
 316         Caches
 317         <span class="md-nav__icon md-icon"></span>
 318       </label>
 319       <nav class="md-nav" aria-label="Caches" data-md-level="3">
 320         <label class="md-nav__title" for="__nav_2_5_1">
 321           <span class="md-nav__icon md-icon"></span>
 322           Caches
 323         </label>
 324         <ul class="md-nav__list" data-md-scrollfix>
 325
 326
 327
 328
 329
 330     <li class="md-nav__item">
 331       <a href="../../php/api/caches/" class="md-nav__link">
 332         Overview
 333       </a>
 334     </li>
 335
 336
 337
 338
 339
 340
 341
 342     <li class="md-nav__item">
 343       <a href="../../php/api/caches_persistent-caches/" class="md-nav__link">
 344         Persistent Caches
 345       </a>
 346     </li>
 347
 348
 349
 350
 351
 352
 353
 354     <li class="md-nav__item">
 355       <a href="../../php/api/caches_runtime-caches/" class="md-nav__link">
 356         Runtime Caches
 357       </a>
 358     </li>
 359
 360
 361
 362         </ul>
 363       </nav>
 364     </li>
 365
 366
 367
 368
 369
 370
 371
 372     <li class="md-nav__item">
 373       <a href="../../php/api/comments/" class="md-nav__link">
 374         Comments
 375       </a>
 376     </li>
 377
 378
 379
 380
 381
 382
 383
 384     <li class="md-nav__item">
 385       <a href="../../php/api/cronjobs/" class="md-nav__link">
 386         Cronjobs
 387       </a>
 388     </li>
 389
 390
 391
 392
 393
 394
 395
 396     <li class="md-nav__item">
 397       <a href="../../php/api/events/" class="md-nav__link">
 398         Events
 399       </a>
 400     </li>
 401
 402
 403
 404
 405
 406
 407
 408
 409     <li class="md-nav__item md-nav__item--nested">
 410
 411
 412         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_2_5_5" type="checkbox" id="__nav_2_5_5" >
 413
 414       <label class="md-nav__link" for="__nav_2_5_5">
 415         Form Builder
 416         <span class="md-nav__icon md-icon"></span>
 417       </label>
 418       <nav class="md-nav" aria-label="Form Builder" data-md-level="3">
 419         <label class="md-nav__title" for="__nav_2_5_5">
 420           <span class="md-nav__icon md-icon"></span>
 421           Form Builder
 422         </label>
 423         <ul class="md-nav__list" data-md-scrollfix>
 424
 425
 426
 427
 428
 429     <li class="md-nav__item">
 430       <a href="../../php/api/form_builder/overview/" class="md-nav__link">
 431         Overview
 432       </a>
 433     </li>
 434
 435
 436
 437
 438
 439
 440
 441     <li class="md-nav__item">
 442       <a href="../../php/api/form_builder/structure/" class="md-nav__link">
 443         Structure
 444       </a>
 445     </li>
 446
 447
 448
 449
 450
 451
 452
 453     <li class="md-nav__item">
 454       <a href="../../php/api/form_builder/form_fields/" class="md-nav__link">
 455         Fields
 456       </a>
 457     </li>
 458
 459
 460
 461
 462
 463
 464
 465     <li class="md-nav__item">
 466       <a href="../../php/api/form_builder/validation_data/" class="md-nav__link">
 467         Validation and Data
 468       </a>
 469     </li>
 470
 471
 472
 473
 474
 475
 476
 477     <li class="md-nav__item">
 478       <a href="../../php/api/form_builder/dependencies/" class="md-nav__link">
 479         Dependencies
 480       </a>
 481     </li>
 482
 483
 484
 485         </ul>
 486       </nav>
 487     </li>
 488
 489
 490
 491
 492
 493
 494
 495     <li class="md-nav__item">
 496       <a href="../../php/api/package_installation_plugins/" class="md-nav__link">
 497         Package Installation Plugins
 498       </a>
 499     </li>
 500
 501
 502
 503
 504
 505
 506
 507     <li class="md-nav__item">
 508       <a href="../../php/api/user_activity_points/" class="md-nav__link">
 509         User Activity Points
 510       </a>
 511     </li>
 512
 513
 514
 515
 516
 517
 518
 519     <li class="md-nav__item">
 520       <a href="../../php/api/user_notifications/" class="md-nav__link">
 521         User Notifications
 522       </a>
 523     </li>
 524
 525
 526
 527
 528
 529
 530
 531     <li class="md-nav__item">
 532       <a href="../../php/api/sitemaps/" class="md-nav__link">
 533         Sitemaps
 534       </a>
 535     </li>
 536
 537
 538
 539         </ul>
 540       </nav>
 541     </li>
 542
 543
 544
 545
 546
 547
 548
 549     <li class="md-nav__item">
 550       <a href="../../php/code-style/" class="md-nav__link">
 551         Code Style
 552       </a>
 553     </li>
 554
 555
 556
 557
 558
 559
 560
 561     <li class="md-nav__item">
 562       <a href="../../php/apps/" class="md-nav__link">
 563         Apps
 564       </a>
 565     </li>
 566
 567
 568
 569
 570
 571
 572
 573     <li class="md-nav__item">
 574       <a href="../../php/gdpr/" class="md-nav__link">
 575         GDPR
 576       </a>
 577     </li>
 578
 579
 580
 581         </ul>
 582       </nav>
 583     </li>
 584
 585
 586
 587
 588
 589
 590
 591
 592
 593
 594
 595     <li class="md-nav__item md-nav__item--nested">
 596
 597
 598         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_3" type="checkbox" id="__nav_3" >
 599
 600       <label class="md-nav__link" for="__nav_3">
 601         Languages, Templates & CSS
 602         <span class="md-nav__icon md-icon"></span>
 603       </label>
 604       <nav class="md-nav" aria-label="Languages, Templates & CSS" data-md-level="1">
 605         <label class="md-nav__title" for="__nav_3">
 606           <span class="md-nav__icon md-icon"></span>
 607           Languages, Templates & CSS
 608         </label>
 609         <ul class="md-nav__list" data-md-scrollfix>
 610
 611
 612
 613
 614
 615     <li class="md-nav__item">
 616       <a href="../../view/languages/" class="md-nav__link">
 617         Languages
 618       </a>
 619     </li>
 620
 621
 622
 623
 624
 625
 626
 627     <li class="md-nav__item">
 628       <a href="../../view/templates/" class="md-nav__link">
 629         Templates
 630       </a>
 631     </li>
 632
 633
 634
 635
 636
 637
 638
 639     <li class="md-nav__item">
 640       <a href="../../view/template-plugins/" class="md-nav__link">
 641         Template Plugins
 642       </a>
 643     </li>
 644
 645
 646
 647
 648
 649
 650
 651     <li class="md-nav__item">
 652       <a href="../../view/css/" class="md-nav__link">
 653         CSS
 654       </a>
 655     </li>
 656
 657
 658
 659         </ul>
 660       </nav>
 661     </li>
 662
 663
 664
 665
 666
 667
 668
 669
 670
 671
 672
 673
 674
 675     <li class="md-nav__item md-nav__item--active md-nav__item--nested">
 676
 677
 678         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_4" type="checkbox" id="__nav_4" checked>
 679
 680       <label class="md-nav__link" for="__nav_4">
 681         TypeScript and JavaScript API
 682         <span class="md-nav__icon md-icon"></span>
 683       </label>
 684       <nav class="md-nav" aria-label="TypeScript and JavaScript API" data-md-level="1">
 685         <label class="md-nav__title" for="__nav_4">
 686           <span class="md-nav__icon md-icon"></span>
 687           TypeScript and JavaScript API
 688         </label>
 689         <ul class="md-nav__list" data-md-scrollfix>
 690
 691
 692
 693
 694
 695     <li class="md-nav__item">
 696       <a href="../general-usage/" class="md-nav__link">
 697         General Usage
 698       </a>
 699     </li>
 700
 701
 702
 703
 704
 705
 706
 707     <li class="md-nav__item">
 708       <a href="../typescript/" class="md-nav__link">
 709         TypeScript
 710       </a>
 711     </li>
 712
 713
 714
 715
 716
 717
 718
 719
 720
 721
 722     <li class="md-nav__item md-nav__item--active md-nav__item--nested">
 723
 724
 725         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_4_3" type="checkbox" id="__nav_4_3" checked>
 726
 727       <label class="md-nav__link" for="__nav_4_3">
 728         New API
 729         <span class="md-nav__icon md-icon"></span>
 730       </label>
 731       <nav class="md-nav" aria-label="New API" data-md-level="2">
 732         <label class="md-nav__title" for="__nav_4_3">
 733           <span class="md-nav__icon md-icon"></span>
 734           New API
 735         </label>
 736         <ul class="md-nav__list" data-md-scrollfix>
 737
 738
 739
 740
 741
 742     <li class="md-nav__item">
 743       <a href="../new-api_writing-a-module/" class="md-nav__link">
 744         Writing a module
 745       </a>
 746     </li>
 747
 748
 749
 750
 751
 752
 753
 754     <li class="md-nav__item">
 755       <a href="../new-api_data-structures/" class="md-nav__link">
 756         Data Structures
 757       </a>
 758     </li>
 759
 760
 761
 762
 763
 764
 765
 766     <li class="md-nav__item">
 767       <a href="../new-api_core/" class="md-nav__link">
 768         Core Functions
 769       </a>
 770     </li>
 771
 772
 773
 774
 775
 776
 777
 778     <li class="md-nav__item">
 779       <a href="../new-api_dom/" class="md-nav__link">
 780         DOM
 781       </a>
 782     </li>
 783
 784
 785
 786
 787
 788
 789
 790
 791
 792     <li class="md-nav__item md-nav__item--active">
 793
 794       <input class="md-nav__toggle md-toggle" data-md-toggle="toc" type="checkbox" id="__toc">
 795
 796
 797
 798
 799
 800         <label class="md-nav__link md-nav__link--active" for="__toc">
 801           Event Handling
 802           <span class="md-nav__icon md-icon"></span>
 803         </label>
 804
 805       <a href="./" class="md-nav__link md-nav__link--active">
 806         Event Handling
 807       </a>
 808
 809
 810 <nav class="md-nav md-nav--secondary" aria-label="Table of contents">
 811
 812
 813
 814
 815
 816
 817     <label class="md-nav__title" for="__toc">
 818       <span class="md-nav__icon md-icon"></span>
 819       Table of contents
 820     </label>
 821     <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
 822
 823         <li class="md-nav__item">
 824   <a href="#eventkey" class="md-nav__link">
 825     EventKey
 826   </a>
 827
 828     <nav class="md-nav" aria-label="EventKey">
 829       <ul class="md-nav__list">
 830
 831           <li class="md-nav__item">
 832   <a href="#arrowdownevent-keyboardevent-boolean" class="md-nav__link">
 833     ArrowDown(event: KeyboardEvent): boolean
 834   </a>
 835
 836 </li>
 837
 838           <li class="md-nav__item">
 839   <a href="#arrowleftevent-keyboardevent-boolean" class="md-nav__link">
 840     ArrowLeft(event: KeyboardEvent): boolean
 841   </a>
 842
 843 </li>
 844
 845           <li class="md-nav__item">
 846   <a href="#arrowrightevent-keyboardevent-boolean" class="md-nav__link">
 847     ArrowRight(event: KeyboardEvent): boolean
 848   </a>
 849
 850 </li>
 851
 852           <li class="md-nav__item">
 853   <a href="#arrowupevent-keyboardevent-boolean" class="md-nav__link">
 854     ArrowUp(event: KeyboardEvent): boolean
 855   </a>
 856
 857 </li>
 858
 859           <li class="md-nav__item">
 860   <a href="#commaevent-keyboardevent-boolean" class="md-nav__link">
 861     Comma(event: KeyboardEvent): boolean
 862   </a>
 863
 864 </li>
 865
 866           <li class="md-nav__item">
 867   <a href="#enterevent-keyboardevent-boolean" class="md-nav__link">
 868     Enter(event: KeyboardEvent): boolean
 869   </a>
 870
 871 </li>
 872
 873           <li class="md-nav__item">
 874   <a href="#escapeevent-keyboardevent-boolean" class="md-nav__link">
 875     Escape(event: KeyboardEvent): boolean
 876   </a>
 877
 878 </li>
 879
 880           <li class="md-nav__item">
 881   <a href="#tabevent-keyboardevent-boolean" class="md-nav__link">
 882     Tab(event: KeyboardEvent): boolean
 883   </a>
 884
 885 </li>
 886
 887       </ul>
 888     </nav>
 889
 890 </li>
 891
 892         <li class="md-nav__item">
 893   <a href="#eventhandler" class="md-nav__link">
 894     EventHandler
 895   </a>
 896
 897     <nav class="md-nav" aria-label="EventHandler">
 898       <ul class="md-nav__list">
 899
 900           <li class="md-nav__item">
 901   <a href="#identifiying-events-with-the-developer-tools" class="md-nav__link">
 902     Identifiying Events with the Developer Tools
 903   </a>
 904
 905 </li>
 906
 907           <li class="md-nav__item">
 908   <a href="#addidentifier-string-action-string-callback-data-object-void-string" class="md-nav__link">
 909     add(identifier: string, action: string, callback: (data: Object) =&gt; void): string
 910   </a>
 911
 912 </li>
 913
 914           <li class="md-nav__item">
 915   <a href="#fireidentifier-string-action-string-data-object" class="md-nav__link">
 916     fire(identifier: string, action: string, data?: Object)
 917   </a>
 918
 919 </li>
 920
 921           <li class="md-nav__item">
 922   <a href="#removeidentifier-string-action-string-uuid-string" class="md-nav__link">
 923     remove(identifier: string, action: string, uuid: string)
 924   </a>
 925
 926 </li>
 927
 928           <li class="md-nav__item">
 929   <a href="#removeallidentifier-string-action-string" class="md-nav__link">
 930     removeAll(identifier: string, action: string)
 931   </a>
 932
 933 </li>
 934
 935           <li class="md-nav__item">
 936   <a href="#removeallbysuffixidentifier-string-suffix-string" class="md-nav__link">
 937     removeAllBySuffix(identifier: string, suffix: string)
 938   </a>
 939
 940 </li>
 941
 942       </ul>
 943     </nav>
 944
 945 </li>
 946
 947     </ul>
 948
 949 </nav>
 950
 951     </li>
 952
 953
 954
 955
 956
 957
 958
 959     <li class="md-nav__item">
 960       <a href="../new-api_ajax/" class="md-nav__link">
 961         Ajax
 962       </a>
 963     </li>
 964
 965
 966
 967
 968
 969
 970
 971     <li class="md-nav__item">
 972       <a href="../new-api_dialogs/" class="md-nav__link">
 973         Dialogs
 974       </a>
 975     </li>
 976
 977
 978
 979
 980
 981
 982
 983     <li class="md-nav__item">
 984       <a href="../new-api_browser/" class="md-nav__link">
 985         Browser and Screen Sizes
 986       </a>
 987     </li>
 988
 989
 990
 991
 992
 993
 994
 995     <li class="md-nav__item">
 996       <a href="../new-api_ui/" class="md-nav__link">
 997         User Interface
 998       </a>
 999     </li>
1000
1001
1002
1003         </ul>
1004       </nav>
1005     </li>
1006
1007
1008
1009
1010
1011
1012
1013     <li class="md-nav__item">
1014       <a href="../legacy-api/" class="md-nav__link">
1015         Legacy API
1016       </a>
1017     </li>
1018
1019
1020
1021
1022
1023
1024
1025     <li class="md-nav__item">
1026       <a href="../helper-functions/" class="md-nav__link">
1027         Helper Functions
1028       </a>
1029     </li>
1030
1031
1032
1033
1034
1035
1036
1037     <li class="md-nav__item">
1038       <a href="../code-snippets/" class="md-nav__link">
1039         Code Snippets
1040       </a>
1041     </li>
1042
1043
1044
1045         </ul>
1046       </nav>
1047     </li>
1048
1049
1050
1051
1052
1053
1054
1055
1056
1057
1058
1059     <li class="md-nav__item md-nav__item--nested">
1060
1061
1062         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_5" type="checkbox" id="__nav_5" >
1063
1064       <label class="md-nav__link" for="__nav_5">
1065         Package Components
1066         <span class="md-nav__icon md-icon"></span>
1067       </label>
1068       <nav class="md-nav" aria-label="Package Components" data-md-level="1">
1069         <label class="md-nav__title" for="__nav_5">
1070           <span class="md-nav__icon md-icon"></span>
1071           Package Components
1072         </label>
1073         <ul class="md-nav__list" data-md-scrollfix>
1074
1075
1076
1077
1078
1079     <li class="md-nav__item">
1080       <a href="../../package/package-xml/" class="md-nav__link">
1081         package.xml
1082       </a>
1083     </li>
1084
1085
1086
1087
1088
1089
1090
1091
1092     <li class="md-nav__item md-nav__item--nested">
1093
1094
1095         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_5_2" type="checkbox" id="__nav_5_2" >
1096
1097       <label class="md-nav__link" for="__nav_5_2">
1098         PIPs
1099         <span class="md-nav__icon md-icon"></span>
1100       </label>
1101       <nav class="md-nav" aria-label="PIPs" data-md-level="2">
1102         <label class="md-nav__title" for="__nav_5_2">
1103           <span class="md-nav__icon md-icon"></span>
1104           PIPs
1105         </label>
1106         <ul class="md-nav__list" data-md-scrollfix>
1107
1108
1109
1110
1111
1112     <li class="md-nav__item">
1113       <a href="../../package/pip/" class="md-nav__link">
1114         Overview
1115       </a>
1116     </li>
1117
1118
1119
1120
1121
1122
1123
1124     <li class="md-nav__item">
1125       <a href="../../package/pip/acl-option/" class="md-nav__link">
1126         aclOption
1127       </a>
1128     </li>
1129
1130
1131
1132
1133
1134
1135
1136     <li class="md-nav__item">
1137       <a href="../../package/pip/acp-menu/" class="md-nav__link">
1138         acpMenu
1139       </a>
1140     </li>
1141
1142
1143
1144
1145
1146
1147
1148     <li class="md-nav__item">
1149       <a href="../../package/pip/acp-search-provider/" class="md-nav__link">
1150         acpSearchProvider
1151       </a>
1152     </li>
1153
1154
1155
1156
1157
1158
1159
1160     <li class="md-nav__item">
1161       <a href="../../package/pip/acp-template/" class="md-nav__link">
1162         acpTemplate
1163       </a>
1164     </li>
1165
1166
1167
1168
1169
1170
1171
1172     <li class="md-nav__item">
1173       <a href="../../package/pip/bbcode/" class="md-nav__link">
1174         bbcode
1175       </a>
1176     </li>
1177
1178
1179
1180
1181
1182
1183
1184     <li class="md-nav__item">
1185       <a href="../../package/pip/box/" class="md-nav__link">
1186         box
1187       </a>
1188     </li>
1189
1190
1191
1192
1193
1194
1195
1196     <li class="md-nav__item">
1197       <a href="../../package/pip/clipboard-action/" class="md-nav__link">
1198         clipboardAction
1199       </a>
1200     </li>
1201
1202
1203
1204
1205
1206
1207
1208     <li class="md-nav__item">
1209       <a href="../../package/pip/core-object/" class="md-nav__link">
1210         coreObject
1211       </a>
1212     </li>
1213
1214
1215
1216
1217
1218
1219
1220     <li class="md-nav__item">
1221       <a href="../../package/pip/cronjob/" class="md-nav__link">
1222         cronjob
1223       </a>
1224     </li>
1225
1226
1227
1228
1229
1230
1231
1232     <li class="md-nav__item">
1233       <a href="../../package/pip/database/" class="md-nav__link">
1234         database
1235       </a>
1236     </li>
1237
1238
1239
1240
1241
1242
1243
1244     <li class="md-nav__item">
1245       <a href="../../package/pip/event-listener/" class="md-nav__link">
1246         eventListener
1247       </a>
1248     </li>
1249
1250
1251
1252
1253
1254
1255
1256     <li class="md-nav__item">
1257       <a href="../../package/pip/file/" class="md-nav__link">
1258         file
1259       </a>
1260     </li>
1261
1262
1263
1264
1265
1266
1267
1268     <li class="md-nav__item">
1269       <a href="../../package/pip/language/" class="md-nav__link">
1270         language
1271       </a>
1272     </li>
1273
1274
1275
1276
1277
1278
1279
1280     <li class="md-nav__item">
1281       <a href="../../package/pip/media-provider/" class="md-nav__link">
1282         mediaProvider
1283       </a>
1284     </li>
1285
1286
1287
1288
1289
1290
1291
1292     <li class="md-nav__item">
1293       <a href="../../package/pip/menu/" class="md-nav__link">
1294         menu
1295       </a>
1296     </li>
1297
1298
1299
1300
1301
1302
1303
1304     <li class="md-nav__item">
1305       <a href="../../package/pip/menu-item/" class="md-nav__link">
1306         menuItem
1307       </a>
1308     </li>
1309
1310
1311
1312
1313
1314
1315
1316     <li class="md-nav__item">
1317       <a href="../../package/pip/object-type/" class="md-nav__link">
1318         objectType
1319       </a>
1320     </li>
1321
1322
1323
1324
1325
1326
1327
1328     <li class="md-nav__item">
1329       <a href="../../package/pip/object-type-definition/" class="md-nav__link">
1330         objectTypeDefinition
1331       </a>
1332     </li>
1333
1334
1335
1336
1337
1338
1339
1340     <li class="md-nav__item">
1341       <a href="../../package/pip/option/" class="md-nav__link">
1342         option
1343       </a>
1344     </li>
1345
1346
1347
1348
1349
1350
1351
1352     <li class="md-nav__item">
1353       <a href="../../package/pip/page/" class="md-nav__link">
1354         page
1355       </a>
1356     </li>
1357
1358
1359
1360
1361
1362
1363
1364     <li class="md-nav__item">
1365       <a href="../../package/pip/pip/" class="md-nav__link">
1366         pip
1367       </a>
1368     </li>
1369
1370
1371
1372
1373
1374
1375
1376     <li class="md-nav__item">
1377       <a href="../../package/pip/script/" class="md-nav__link">
1378         script
1379       </a>
1380     </li>
1381
1382
1383
1384
1385
1386
1387
1388     <li class="md-nav__item">
1389       <a href="../../package/pip/smiley/" class="md-nav__link">
1390         smiley
1391       </a>
1392     </li>
1393
1394
1395
1396
1397
1398
1399
1400     <li class="md-nav__item">
1401       <a href="../../package/pip/sql/" class="md-nav__link">
1402         sql
1403       </a>
1404     </li>
1405
1406
1407
1408
1409
1410
1411
1412     <li class="md-nav__item">
1413       <a href="../../package/pip/style/" class="md-nav__link">
1414         style
1415       </a>
1416     </li>
1417
1418
1419
1420
1421
1422
1423
1424     <li class="md-nav__item">
1425       <a href="../../package/pip/template/" class="md-nav__link">
1426         template
1427       </a>
1428     </li>
1429
1430
1431
1432
1433
1434
1435
1436     <li class="md-nav__item">
1437       <a href="../../package/pip/template-listener/" class="md-nav__link">
1438         templateListener
1439       </a>
1440     </li>
1441
1442
1443
1444
1445
1446
1447
1448     <li class="md-nav__item">
1449       <a href="../../package/pip/user-group-option/" class="md-nav__link">
1450         userGroupOption
1451       </a>
1452     </li>
1453
1454
1455
1456
1457
1458
1459
1460     <li class="md-nav__item">
1461       <a href="../../package/pip/user-menu/" class="md-nav__link">
1462         userMenu
1463       </a>
1464     </li>
1465
1466
1467
1468
1469
1470
1471
1472     <li class="md-nav__item">
1473       <a href="../../package/pip/user-notification-event/" class="md-nav__link">
1474         userNotificationEvent
1475       </a>
1476     </li>
1477
1478
1479
1480
1481
1482
1483
1484     <li class="md-nav__item">
1485       <a href="../../package/pip/user-option/" class="md-nav__link">
1486         userOption
1487       </a>
1488     </li>
1489
1490
1491
1492
1493
1494
1495
1496     <li class="md-nav__item">
1497       <a href="../../package/pip/user-profile-menu/" class="md-nav__link">
1498         userProfileMenu
1499       </a>
1500     </li>
1501
1502
1503
1504         </ul>
1505       </nav>
1506     </li>
1507
1508
1509
1510
1511
1512
1513
1514     <li class="md-nav__item">
1515       <a href="../../package/database-php-api/" class="md-nav__link">
1516         Database PHP API
1517       </a>
1518     </li>
1519
1520
1521
1522         </ul>
1523       </nav>
1524     </li>
1525
1526
1527
1528
1529
1530
1531
1532
1533
1534
1535
1536     <li class="md-nav__item md-nav__item--nested">
1537
1538
1539         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6" type="checkbox" id="__nav_6" >
1540
1541       <label class="md-nav__link" for="__nav_6">
1542         Migration
1543         <span class="md-nav__icon md-icon"></span>
1544       </label>
1545       <nav class="md-nav" aria-label="Migration" data-md-level="1">
1546         <label class="md-nav__title" for="__nav_6">
1547           <span class="md-nav__icon md-icon"></span>
1548           Migration
1549         </label>
1550         <ul class="md-nav__list" data-md-scrollfix>
1551
1552
1553
1554
1555
1556
1557     <li class="md-nav__item md-nav__item--nested">
1558
1559
1560         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_1" type="checkbox" id="__nav_6_1" >
1561
1562       <label class="md-nav__link" for="__nav_6_1">
1563         Migrating from WSC 5.3
1564         <span class="md-nav__icon md-icon"></span>
1565       </label>
1566       <nav class="md-nav" aria-label="Migrating from WSC 5.3" data-md-level="2">
1567         <label class="md-nav__title" for="__nav_6_1">
1568           <span class="md-nav__icon md-icon"></span>
1569           Migrating from WSC 5.3
1570         </label>
1571         <ul class="md-nav__list" data-md-scrollfix>
1572
1573
1574
1575
1576
1577     <li class="md-nav__item">
1578       <a href="../../migration/wsc53/php/" class="md-nav__link">
1579         PHP API
1580       </a>
1581     </li>
1582
1583
1584
1585
1586
1587
1588
1589     <li class="md-nav__item">
1590       <a href="../../migration/wsc53/session/" class="md-nav__link">
1591         Session Handling and Authentication
1592       </a>
1593     </li>
1594
1595
1596
1597
1598
1599
1600
1601     <li class="md-nav__item">
1602       <a href="../../migration/wsc53/javascript/" class="md-nav__link">
1603         TypeScript and JavaScript
1604       </a>
1605     </li>
1606
1607
1608
1609
1610
1611
1612
1613     <li class="md-nav__item">
1614       <a href="../../migration/wsc53/templates/" class="md-nav__link">
1615         Templates
1616       </a>
1617     </li>
1618
1619
1620
1621
1622
1623
1624
1625     <li class="md-nav__item">
1626       <a href="../../migration/wsc53/libraries/" class="md-nav__link">
1627         Third Party Libraries
1628       </a>
1629     </li>
1630
1631
1632
1633         </ul>
1634       </nav>
1635     </li>
1636
1637
1638
1639
1640
1641
1642
1643
1644     <li class="md-nav__item md-nav__item--nested">
1645
1646
1647         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_2" type="checkbox" id="__nav_6_2" >
1648
1649       <label class="md-nav__link" for="__nav_6_2">
1650         Migrating from WSC 5.2
1651         <span class="md-nav__icon md-icon"></span>
1652       </label>
1653       <nav class="md-nav" aria-label="Migrating from WSC 5.2" data-md-level="2">
1654         <label class="md-nav__title" for="__nav_6_2">
1655           <span class="md-nav__icon md-icon"></span>
1656           Migrating from WSC 5.2
1657         </label>
1658         <ul class="md-nav__list" data-md-scrollfix>
1659
1660
1661
1662
1663
1664     <li class="md-nav__item">
1665       <a href="../../migration/wsc52/php/" class="md-nav__link">
1666         PHP API
1667       </a>
1668     </li>
1669
1670
1671
1672
1673
1674
1675
1676     <li class="md-nav__item">
1677       <a href="../../migration/wsc52/templates/" class="md-nav__link">
1678         Templates and Languages
1679       </a>
1680     </li>
1681
1682
1683
1684
1685
1686
1687
1688     <li class="md-nav__item">
1689       <a href="../../migration/wsc52/libraries/" class="md-nav__link">
1690         Third Party Libraries
1691       </a>
1692     </li>
1693
1694
1695
1696         </ul>
1697       </nav>
1698     </li>
1699
1700
1701
1702
1703
1704
1705
1706
1707     <li class="md-nav__item md-nav__item--nested">
1708
1709
1710         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_3" type="checkbox" id="__nav_6_3" >
1711
1712       <label class="md-nav__link" for="__nav_6_3">
1713         Migrating from WSC 3.1
1714         <span class="md-nav__icon md-icon"></span>
1715       </label>
1716       <nav class="md-nav" aria-label="Migrating from WSC 3.1" data-md-level="2">
1717         <label class="md-nav__title" for="__nav_6_3">
1718           <span class="md-nav__icon md-icon"></span>
1719           Migrating from WSC 3.1
1720         </label>
1721         <ul class="md-nav__list" data-md-scrollfix>
1722
1723
1724
1725
1726
1727     <li class="md-nav__item">
1728       <a href="../../migration/wsc31/php/" class="md-nav__link">
1729         PHP API
1730       </a>
1731     </li>
1732
1733
1734
1735         </ul>
1736       </nav>
1737     </li>
1738
1739
1740
1741
1742
1743
1744
1745
1746     <li class="md-nav__item md-nav__item--nested">
1747
1748
1749         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_4" type="checkbox" id="__nav_6_4" >
1750
1751       <label class="md-nav__link" for="__nav_6_4">
1752         Migrating from WSC 3.0
1753         <span class="md-nav__icon md-icon"></span>
1754       </label>
1755       <nav class="md-nav" aria-label="Migrating from WSC 3.0" data-md-level="2">
1756         <label class="md-nav__title" for="__nav_6_4">
1757           <span class="md-nav__icon md-icon"></span>
1758           Migrating from WSC 3.0
1759         </label>
1760         <ul class="md-nav__list" data-md-scrollfix>
1761
1762
1763
1764
1765
1766     <li class="md-nav__item">
1767       <a href="../../migration/wsc30/php/" class="md-nav__link">
1768         PHP API
1769       </a>
1770     </li>
1771
1772
1773
1774
1775
1776
1777
1778     <li class="md-nav__item">
1779       <a href="../../migration/wsc30/javascript/" class="md-nav__link">
1780         JavaScript API
1781       </a>
1782     </li>
1783
1784
1785
1786
1787
1788
1789
1790     <li class="md-nav__item">
1791       <a href="../../migration/wsc30/templates/" class="md-nav__link">
1792         Templates
1793       </a>
1794     </li>
1795
1796
1797
1798
1799
1800
1801
1802     <li class="md-nav__item">
1803       <a href="../../migration/wsc30/css/" class="md-nav__link">
1804         CSS
1805       </a>
1806     </li>
1807
1808
1809
1810
1811
1812
1813
1814     <li class="md-nav__item">
1815       <a href="../../migration/wsc30/package/" class="md-nav__link">
1816         Package Components
1817       </a>
1818     </li>
1819
1820
1821
1822         </ul>
1823       </nav>
1824     </li>
1825
1826
1827
1828
1829
1830
1831
1832
1833     <li class="md-nav__item md-nav__item--nested">
1834
1835
1836         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_5" type="checkbox" id="__nav_6_5" >
1837
1838       <label class="md-nav__link" for="__nav_6_5">
1839         Migrating from WCF 2.1
1840         <span class="md-nav__icon md-icon"></span>
1841       </label>
1842       <nav class="md-nav" aria-label="Migrating from WCF 2.1" data-md-level="2">
1843         <label class="md-nav__title" for="__nav_6_5">
1844           <span class="md-nav__icon md-icon"></span>
1845           Migrating from WCF 2.1
1846         </label>
1847         <ul class="md-nav__list" data-md-scrollfix>
1848
1849
1850
1851
1852
1853     <li class="md-nav__item">
1854       <a href="../../migration/wcf21/php/" class="md-nav__link">
1855         PHP API
1856       </a>
1857     </li>
1858
1859
1860
1861
1862
1863
1864
1865     <li class="md-nav__item">
1866       <a href="../../migration/wcf21/templates/" class="md-nav__link">
1867         Templates
1868       </a>
1869     </li>
1870
1871
1872
1873
1874
1875
1876
1877     <li class="md-nav__item">
1878       <a href="../../migration/wcf21/css/" class="md-nav__link">
1879         CSS
1880       </a>
1881     </li>
1882
1883
1884
1885
1886
1887
1888
1889     <li class="md-nav__item">
1890       <a href="../../migration/wcf21/package/" class="md-nav__link">
1891         Package Components
1892       </a>
1893     </li>
1894
1895
1896
1897         </ul>
1898       </nav>
1899     </li>
1900
1901
1902
1903         </ul>
1904       </nav>
1905     </li>
1906
1907
1908
1909
1910
1911
1912
1913
1914
1915
1916
1917     <li class="md-nav__item md-nav__item--nested">
1918
1919
1920         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_7" type="checkbox" id="__nav_7" >
1921
1922       <label class="md-nav__link" for="__nav_7">
1923         Tutorials
1924         <span class="md-nav__icon md-icon"></span>
1925       </label>
1926       <nav class="md-nav" aria-label="Tutorials" data-md-level="1">
1927         <label class="md-nav__title" for="__nav_7">
1928           <span class="md-nav__icon md-icon"></span>
1929           Tutorials
1930         </label>
1931         <ul class="md-nav__list" data-md-scrollfix>
1932
1933
1934
1935
1936
1937
1938     <li class="md-nav__item md-nav__item--nested">
1939
1940
1941         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_7_1" type="checkbox" id="__nav_7_1" >
1942
1943       <label class="md-nav__link" for="__nav_7_1">
1944         Tutorial Series
1945         <span class="md-nav__icon md-icon"></span>
1946       </label>
1947       <nav class="md-nav" aria-label="Tutorial Series" data-md-level="2">
1948         <label class="md-nav__title" for="__nav_7_1">
1949           <span class="md-nav__icon md-icon"></span>
1950           Tutorial Series
1951         </label>
1952         <ul class="md-nav__list" data-md-scrollfix>
1953
1954
1955
1956
1957
1958     <li class="md-nav__item">
1959       <a href="../../tutorial/series/overview/" class="md-nav__link">
1960         Overview
1961       </a>
1962     </li>
1963
1964
1965
1966
1967
1968
1969
1970     <li class="md-nav__item">
1971       <a href="../../tutorial/series/part_1/" class="md-nav__link">
1972         Part 1
1973       </a>
1974     </li>
1975
1976
1977
1978
1979
1980
1981
1982     <li class="md-nav__item">
1983       <a href="../../tutorial/series/part_2/" class="md-nav__link">
1984         Part 2
1985       </a>
1986     </li>
1987
1988
1989
1990
1991
1992
1993
1994     <li class="md-nav__item">
1995       <a href="../../tutorial/series/part_3/" class="md-nav__link">
1996         Part 3
1997       </a>
1998     </li>
1999
2000
2001
2002
2003
2004
2005
2006     <li class="md-nav__item">
2007       <a href="../../tutorial/series/part_4/" class="md-nav__link">
2008         Part 4
2009       </a>
2010     </li>
2011
2012
2013
2014         </ul>
2015       </nav>
2016     </li>
2017
2018
2019
2020         </ul>
2021       </nav>
2022     </li>
2023
2024
2025
2026   </ul>
2027 </nav>
2028                   </div>
2029                 </div>
2030               </div>
2031
2032
2033
2034               <div class="md-sidebar md-sidebar--secondary" data-md-component="sidebar" data-md-type="toc" >
2035                 <div class="md-sidebar__scrollwrap">
2036                   <div class="md-sidebar__inner">
2037
2038 <nav class="md-nav md-nav--secondary" aria-label="Table of contents">
2039
2040
2041
2042
2043
2044
2045     <label class="md-nav__title" for="__toc">
2046       <span class="md-nav__icon md-icon"></span>
2047       Table of contents
2048     </label>
2049     <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
2050
2051         <li class="md-nav__item">
2052   <a href="#eventkey" class="md-nav__link">
2053     EventKey
2054   </a>
2055
2056     <nav class="md-nav" aria-label="EventKey">
2057       <ul class="md-nav__list">
2058
2059           <li class="md-nav__item">
2060   <a href="#arrowdownevent-keyboardevent-boolean" class="md-nav__link">
2061     ArrowDown(event: KeyboardEvent): boolean
2062   </a>
2063
2064 </li>
2065
2066           <li class="md-nav__item">
2067   <a href="#arrowleftevent-keyboardevent-boolean" class="md-nav__link">
2068     ArrowLeft(event: KeyboardEvent): boolean
2069   </a>
2070
2071 </li>
2072
2073           <li class="md-nav__item">
2074   <a href="#arrowrightevent-keyboardevent-boolean" class="md-nav__link">
2075     ArrowRight(event: KeyboardEvent): boolean
2076   </a>
2077
2078 </li>
2079
2080           <li class="md-nav__item">
2081   <a href="#arrowupevent-keyboardevent-boolean" class="md-nav__link">
2082     ArrowUp(event: KeyboardEvent): boolean
2083   </a>
2084
2085 </li>
2086
2087           <li class="md-nav__item">
2088   <a href="#commaevent-keyboardevent-boolean" class="md-nav__link">
2089     Comma(event: KeyboardEvent): boolean
2090   </a>
2091
2092 </li>
2093
2094           <li class="md-nav__item">
2095   <a href="#enterevent-keyboardevent-boolean" class="md-nav__link">
2096     Enter(event: KeyboardEvent): boolean
2097   </a>
2098
2099 </li>
2100
2101           <li class="md-nav__item">
2102   <a href="#escapeevent-keyboardevent-boolean" class="md-nav__link">
2103     Escape(event: KeyboardEvent): boolean
2104   </a>
2105
2106 </li>
2107
2108           <li class="md-nav__item">
2109   <a href="#tabevent-keyboardevent-boolean" class="md-nav__link">
2110     Tab(event: KeyboardEvent): boolean
2111   </a>
2112
2113 </li>
2114
2115       </ul>
2116     </nav>
2117
2118 </li>
2119
2120         <li class="md-nav__item">
2121   <a href="#eventhandler" class="md-nav__link">
2122     EventHandler
2123   </a>
2124
2125     <nav class="md-nav" aria-label="EventHandler">
2126       <ul class="md-nav__list">
2127
2128           <li class="md-nav__item">
2129   <a href="#identifiying-events-with-the-developer-tools" class="md-nav__link">
2130     Identifiying Events with the Developer Tools
2131   </a>
2132
2133 </li>
2134
2135           <li class="md-nav__item">
2136   <a href="#addidentifier-string-action-string-callback-data-object-void-string" class="md-nav__link">
2137     add(identifier: string, action: string, callback: (data: Object) =&gt; void): string
2138   </a>
2139
2140 </li>
2141
2142           <li class="md-nav__item">
2143   <a href="#fireidentifier-string-action-string-data-object" class="md-nav__link">
2144     fire(identifier: string, action: string, data?: Object)
2145   </a>
2146
2147 </li>
2148
2149           <li class="md-nav__item">
2150   <a href="#removeidentifier-string-action-string-uuid-string" class="md-nav__link">
2151     remove(identifier: string, action: string, uuid: string)
2152   </a>
2153
2154 </li>
2155
2156           <li class="md-nav__item">
2157   <a href="#removeallidentifier-string-action-string" class="md-nav__link">
2158     removeAll(identifier: string, action: string)
2159   </a>
2160
2161 </li>
2162
2163           <li class="md-nav__item">
2164   <a href="#removeallbysuffixidentifier-string-suffix-string" class="md-nav__link">
2165     removeAllBySuffix(identifier: string, suffix: string)
2166   </a>
2167
2168 </li>
2169
2170       </ul>
2171     </nav>
2172
2173 </li>
2174
2175     </ul>
2176
2177 </nav>
2178                   </div>
2179                 </div>
2180               </div>
2181
2182
2183           <div class="md-content" data-md-component="content">
2184             <article class="md-content__inner md-typeset">
2185
2186
2187                   <a href="https://github.com/WoltLab/docs.woltlab.com/edit/5.4/docs/javascript/new-api_events.md" title="Edit this page" class="md-content__button md-icon">
2188                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.71 7.04c.39-.39.39-1.04 0-1.41l-2.34-2.34c-.37-.39-1.02-.39-1.41 0l-1.84 1.83 3.75 3.75M3 17.25V21h3.75L17.81 9.93l-3.75-3.75L3 17.25z"/></svg>
2189                   </a>
2190
2191
2192                 <h1 id="event-handling-javascript-api">Event Handling - JavaScript API<a class="headerlink" href="#event-handling-javascript-api" title="Permanent link">#</a></h1>
2193 <h2 id="eventkey"><code>EventKey</code><a class="headerlink" href="#eventkey" title="Permanent link">#</a></h2>
2194 <p>This class offers a set of static methods that can be used to determine if some
2195 common keys are being pressed. Internally it compares either the <code>.key</code> property
2196 if it is supported or the value of <code>.which</code>.</p>
2197 <div class="highlight"><pre><span></span><code><span class="nx">require</span><span class="p">([</span><span class="s2">&quot;EventKey&quot;</span><span class="p">],</span> <span class="kd">function</span><span class="p">(</span><span class="nx">EventKey</span><span class="p">)</span> <span class="p">{</span>
2198   <span class="nx">elBySel</span><span class="p">(</span><span class="s2">&quot;.some-input&quot;</span><span class="p">).</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s2">&quot;keydown&quot;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">{</span>
2199     <span class="k">if</span> <span class="p">(</span><span class="nx">EventKey</span><span class="p">.</span><span class="nx">Enter</span><span class="p">(</span><span class="nx">event</span><span class="p">))</span> <span class="p">{</span>
2200       <span class="c1">// the `Enter` key was pressed</span>
2201     <span class="p">}</span>
2202   <span class="p">});</span>
2203 <span class="p">});</span>
2204 </code></pre></div>
2205 <h3 id="arrowdownevent-keyboardevent-boolean"><code>ArrowDown(event: KeyboardEvent): boolean</code><a class="headerlink" href="#arrowdownevent-keyboardevent-boolean" title="Permanent link">#</a></h3>
2206 <p>Returns true if the user has pressed the <code>↓</code> key.</p>
2207 <h3 id="arrowleftevent-keyboardevent-boolean"><code>ArrowLeft(event: KeyboardEvent): boolean</code><a class="headerlink" href="#arrowleftevent-keyboardevent-boolean" title="Permanent link">#</a></h3>
2208 <p>Returns true if the user has pressed the <code>←</code> key.</p>
2209 <h3 id="arrowrightevent-keyboardevent-boolean"><code>ArrowRight(event: KeyboardEvent): boolean</code><a class="headerlink" href="#arrowrightevent-keyboardevent-boolean" title="Permanent link">#</a></h3>
2210 <p>Returns true if the user has pressed the <code>→</code> key.</p>
2211 <h3 id="arrowupevent-keyboardevent-boolean"><code>ArrowUp(event: KeyboardEvent): boolean</code><a class="headerlink" href="#arrowupevent-keyboardevent-boolean" title="Permanent link">#</a></h3>
2212 <p>Returns true if the user has pressed the <code>↑</code> key.</p>
2213 <h3 id="commaevent-keyboardevent-boolean"><code>Comma(event: KeyboardEvent): boolean</code><a class="headerlink" href="#commaevent-keyboardevent-boolean" title="Permanent link">#</a></h3>
2214 <p>Returns true if the user has pressed the <code>,</code> key.</p>
2215 <h3 id="enterevent-keyboardevent-boolean"><code>Enter(event: KeyboardEvent): boolean</code><a class="headerlink" href="#enterevent-keyboardevent-boolean" title="Permanent link">#</a></h3>
2216 <p>Returns true if the user has pressed the <code>↲</code> key.</p>
2217 <h3 id="escapeevent-keyboardevent-boolean"><code>Escape(event: KeyboardEvent): boolean</code><a class="headerlink" href="#escapeevent-keyboardevent-boolean" title="Permanent link">#</a></h3>
2218 <p>Returns true if the user has pressed the <code>Esc</code> key.</p>
2219 <h3 id="tabevent-keyboardevent-boolean"><code>Tab(event: KeyboardEvent): boolean</code><a class="headerlink" href="#tabevent-keyboardevent-boolean" title="Permanent link">#</a></h3>
2220 <p>Returns true if the user has pressed the <code>↹</code> key.</p>
2221 <h2 id="eventhandler"><code>EventHandler</code><a class="headerlink" href="#eventhandler" title="Permanent link">#</a></h2>
2222 <p>A synchronous event system based on string identifiers rather than DOM elements,
2223 similar to the PHP event system in WoltLab Suite. Any components can listen to
2224 events or trigger events itself at any time.</p>
2225 <h3 id="identifiying-events-with-the-developer-tools">Identifiying Events with the Developer Tools<a class="headerlink" href="#identifiying-events-with-the-developer-tools" title="Permanent link">#</a></h3>
2226 <p>The Developer Tools in WoltLab Suite 3.1 offer an easy option to identify existing
2227 events that are fired while code is being executed. You can enable this watch
2228 mode through your browser's console using <code>Devtools.toggleEventLogging()</code>:</p>
2229 <div class="highlight"><pre><span></span><code>&gt; Devtools.toggleEventLogging();
2230 &lt;   Event logging enabled
2231 &lt; [Devtools.EventLogging] Firing event: bar @ com.example.app.foo
2232 &lt; [Devtools.EventLogging] Firing event: baz @ com.example.app.foo
2233 </code></pre></div>
2234 <h3 id="addidentifier-string-action-string-callback-data-object-void-string"><code>add(identifier: string, action: string, callback: (data: Object) =&gt; void): string</code><a class="headerlink" href="#addidentifier-string-action-string-callback-data-object-void-string" title="Permanent link">#</a></h3>
2235 <p>Adding an event listeners returns a randomly generated UUIDv4 that is used to
2236 identify the listener. This UUID is required to remove a specific listener through
2237 the <code>remove()</code> method.</p>
2238 <h3 id="fireidentifier-string-action-string-data-object"><code>fire(identifier: string, action: string, data?: Object)</code><a class="headerlink" href="#fireidentifier-string-action-string-data-object" title="Permanent link">#</a></h3>
2239 <p>Triggers an event using an optional <code>data</code> object that is passed to each listener
2240 by reference.</p>
2241 <h3 id="removeidentifier-string-action-string-uuid-string"><code>remove(identifier: string, action: string, uuid: string)</code><a class="headerlink" href="#removeidentifier-string-action-string-uuid-string" title="Permanent link">#</a></h3>
2242 <p>Removes a previously registered event listener using the UUID returned by <code>add()</code>.</p>
2243 <h3 id="removeallidentifier-string-action-string"><code>removeAll(identifier: string, action: string)</code><a class="headerlink" href="#removeallidentifier-string-action-string" title="Permanent link">#</a></h3>
2244 <p>Removes all event listeners registered for the provided <code>identifier</code> and <code>action</code>.</p>
2245 <h3 id="removeallbysuffixidentifier-string-suffix-string"><code>removeAllBySuffix(identifier: string, suffix: string)</code><a class="headerlink" href="#removeallbysuffixidentifier-string-suffix-string" title="Permanent link">#</a></h3>
2246 <p>Removes all event listeners for an <code>identifier</code> whose action ends with the value
2247 of <code>suffix</code>.</p>
2248
2249
2250
2251
2252 <hr>
2253 <div class="md-source-date">
2254   <small>
2255
2256       Last update: 2021-01-08
2257
2258   </small>
2259 </div>
2260
2261
2262
2263
2264
2265
2266
2267
2268             </article>
2269           </div>
2270         </div>
2271
2272       </main>
2273
2274
2275 <footer class="md-footer">
2276
2277     <nav class="md-footer__inner md-grid" aria-label="Footer">
2278
2279         <a href="../new-api_dom/" class="md-footer__link md-footer__link--prev" rel="prev">
2280           <div class="md-footer__button md-icon">
2281             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12z"/></svg>
2282           </div>
2283           <div class="md-footer__title">
2284             <div class="md-ellipsis">
2285               <span class="md-footer__direction">
2286                 Previous
2287               </span>
2288               DOM
2289             </div>
2290           </div>
2291         </a>
2292
2293
2294         <a href="../new-api_ajax/" class="md-footer__link md-footer__link--next" rel="next">
2295           <div class="md-footer__title">
2296             <div class="md-ellipsis">
2297               <span class="md-footer__direction">
2298                 Next
2299               </span>
2300               Ajax
2301             </div>
2302           </div>
2303           <div class="md-footer__button md-icon">
2304             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 11v2h12l-5.5 5.5 1.42 1.42L19.84 12l-7.92-7.92L10.5 5.5 16 11H4z"/></svg>
2305           </div>
2306         </a>
2307
2308     </nav>
2309
2310   <div class="md-footer-meta md-typeset">
2311     <div class="md-footer-meta__inner md-grid">
2312       <div class="md-footer-copyright">
2313
2314           <div class="md-footer-copyright__highlight">
2315             Copyright © 2020 WoltLab GmbH
2316           </div>
2317
2318         Made with
2319         <a href="https://squidfunk.github.io/mkdocs-material/" target="_blank" rel="noopener">
2320           Material for MkDocs
2321         </a>
2322
2323       </div>
2324       <div class="md-footer-copyright">
2325         <a href="https://www.woltlab.com/legal-notice/">Legal Notice</a>
2326         <a href="https://www.woltlab.com/privacy-policy/">Privacy Policy</a>
2327 </div>
2328     </div>
2329   </div>
2330 </footer>
2331
2332     </div>
2333     <div class="md-dialog" data-md-component="dialog">
2334       <div class="md-dialog__inner md-typeset"></div>
2335     </div>
2336     <script id="__config" type="application/json">{"base": "../..", "features": [], "translations": {"clipboard.copy": "Copy to clipboard", "clipboard.copied": "Copied to clipboard", "search.config.lang": "en", "search.config.pipeline": "trimmer, stopWordFilter", "search.config.separator": "[\\s\\-]+", "search.placeholder": "Search", "search.result.placeholder": "Type to start searching", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.term.missing": "Missing"}, "search": "../../assets/javascripts/workers/search.fe42c31b.min.js", "version": {"provider": "mike"}}</script>
2337
2338
2339       <script src="../../assets/javascripts/bundle.4ea5477f.min.js"></script>
2340
2341
2342   </body>
2343 </html>