3 <html lang=
"en" class=
"no-js">
7 <meta name=
"viewport" content=
"width=device-width,initial-scale=1">
11 <link rel=
"canonical" href=
"https://docs.woltlab.com/6.0/javascript/new-api_events/">
14 <link rel=
"prev" href=
"../new-api_dom/">
17 <link rel=
"next" href=
"../new-api_ajax/">
19 <link rel=
"icon" href=
"../../assets/default.favicon.ico">
20 <meta name=
"generator" content=
"mkdocs-1.5.1, mkdocs-material-9.1.21">
24 <title>Event Handling - WoltLab Suite Documentation
</title>
28 <link rel=
"stylesheet" href=
"../../assets/stylesheets/main.eebd395e.min.css">
31 <link rel=
"stylesheet" href=
"../../assets/stylesheets/palette.ecc896b0.min.css">
41 <link rel=
"stylesheet" href=
"../../stylesheets/extra.css">
43 <script>__md_scope=new URL(
"../..",location),__md_hash=e=
>[...e].reduce((e,_)=
>(e<
<5)-e+_.charCodeAt(
0),
0),__md_get=(e,_=localStorage,t=__md_scope)=
>JSON.parse(_.getItem(t.pathname+
"."+e)),__md_set=(e,_,t=localStorage,a=__md_scope)=
>{try{t.setItem(a.pathname+
"."+e,JSON.stringify(_))}catch(e){}}
</script>
58 <body dir=
"ltr" data-md-color-scheme=
"default" data-md-color-primary=
"teal" data-md-color-accent=
"indigo">
62 <input class=
"md-toggle" data-md-toggle=
"drawer" type=
"checkbox" id=
"__drawer" autocomplete=
"off">
63 <input class=
"md-toggle" data-md-toggle=
"search" type=
"checkbox" id=
"__search" autocomplete=
"off">
64 <label class=
"md-overlay" for=
"__drawer"></label>
65 <div data-md-component=
"skip">
68 <a href=
"#event-handling-javascript-api" class=
"md-skip">
73 <div data-md-component=
"announce">
75 <aside class=
"md-banner">
76 <div class=
"md-banner__inner md-grid md-typeset">
79 <a href=
"https://www.woltlab.com">Back to
<strong>woltlab.com
</strong></a>
87 <div data-md-color-scheme=
"default" data-md-component=
"outdated" hidden
>
96 <header class=
"md-header md-header--shadow" data-md-component=
"header">
97 <nav class=
"md-header__inner md-grid" aria-label=
"Header">
98 <a href=
"../.." title=
"WoltLab Suite Documentation" class=
"md-header__button md-logo" aria-label=
"WoltLab Suite Documentation" data-md-component=
"logo">
100 <img src=
"../../assets/logo.png" alt=
"logo">
103 <label class=
"md-header__button md-icon" for=
"__drawer">
104 <svg xmlns=
"http://www.w3.org/2000/svg" viewBox=
"0 0 24 24"><path d=
"M3 6h18v2H3V6m0 5h18v2H3v-2m0 5h18v2H3v-2Z"/></svg>
106 <div class=
"md-header__title" data-md-component=
"header-title">
107 <div class=
"md-header__ellipsis">
108 <div class=
"md-header__topic">
109 <span class=
"md-ellipsis">
110 WoltLab Suite Documentation
113 <div class=
"md-header__topic" data-md-component=
"header-topic">
114 <span class=
"md-ellipsis">
127 <label class=
"md-header__button md-icon" for=
"__search">
128 <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>
130 <div class=
"md-search" data-md-component=
"search" role=
"dialog">
131 <label class=
"md-search__overlay" for=
"__search"></label>
132 <div class=
"md-search__inner" role=
"search">
133 <form class=
"md-search__form" name=
"search">
134 <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" required
>
135 <label class=
"md-search__icon md-icon" for=
"__search">
136 <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>
137 <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>
139 <nav class=
"md-search__options" aria-label=
"Search">
141 <button type=
"reset" class=
"md-search__icon md-icon" title=
"Clear" aria-label=
"Clear" tabindex=
"-1">
142 <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>
147 <div class=
"md-search__output">
148 <div class=
"md-search__scrollwrap" data-md-scrollfix
>
149 <div class=
"md-search-result" data-md-component=
"search-result">
150 <div class=
"md-search-result__meta">
153 <ol class=
"md-search-result__list" role=
"presentation"></ol>
161 <div class=
"md-header__source">
162 <a href=
"https://github.com/WoltLab/docs.woltlab.com/" title=
"Go to repository" class=
"md-source" data-md-component=
"source">
163 <div class=
"md-source__icon md-icon">
165 <svg xmlns=
"http://www.w3.org/2000/svg" viewBox=
"0 0 448 512"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc.--><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>
167 <div class=
"md-source__repository">
177 <div class=
"md-container" data-md-component=
"container">
184 <main class=
"md-main" data-md-component=
"main">
185 <div class=
"md-main__inner md-grid">
189 <div class=
"md-sidebar md-sidebar--primary" data-md-component=
"sidebar" data-md-type=
"navigation" >
190 <div class=
"md-sidebar__scrollwrap">
191 <div class=
"md-sidebar__inner">
195 <nav class=
"md-nav md-nav--primary" aria-label=
"Navigation" data-md-level=
"0">
196 <label class=
"md-nav__title" for=
"__drawer">
197 <a href=
"../.." title=
"WoltLab Suite Documentation" class=
"md-nav__button md-logo" aria-label=
"WoltLab Suite Documentation" data-md-component=
"logo">
199 <img src=
"../../assets/logo.png" alt=
"logo">
202 WoltLab Suite Documentation
205 <div class=
"md-nav__source">
206 <a href=
"https://github.com/WoltLab/docs.woltlab.com/" title=
"Go to repository" class=
"md-source" data-md-component=
"source">
207 <div class=
"md-source__icon md-icon">
209 <svg xmlns=
"http://www.w3.org/2000/svg" viewBox=
"0 0 448 512"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc.--><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>
211 <div class=
"md-source__repository">
217 <ul class=
"md-nav__list" data-md-scrollfix
>
226 <li class=
"md-nav__item">
227 <a href=
"../../getting-started/" class=
"md-nav__link">
242 <li class=
"md-nav__item md-nav__item--nested">
247 <input class=
"md-nav__toggle md-toggle " type=
"checkbox" id=
"__nav_2" >
251 <label class=
"md-nav__link" for=
"__nav_2" id=
"__nav_2_label" tabindex=
"0">
253 <span class=
"md-nav__icon md-icon"></span>
256 <nav class=
"md-nav" data-md-level=
"1" aria-labelledby=
"__nav_2_label" aria-expanded=
"false">
257 <label class=
"md-nav__title" for=
"__nav_2">
258 <span class=
"md-nav__icon md-icon"></span>
261 <ul class=
"md-nav__list" data-md-scrollfix
>
268 <li class=
"md-nav__item">
269 <a href=
"../../php/pages/" class=
"md-nav__link">
282 <li class=
"md-nav__item">
283 <a href=
"../../php/database-objects/" class=
"md-nav__link">
296 <li class=
"md-nav__item">
297 <a href=
"../../php/database-access/" class=
"md-nav__link">
310 <li class=
"md-nav__item">
311 <a href=
"../../php/exceptions/" class=
"md-nav__link">
325 <li class=
"md-nav__item md-nav__item--nested">
330 <input class=
"md-nav__toggle md-toggle " type=
"checkbox" id=
"__nav_2_5" >
334 <label class=
"md-nav__link" for=
"__nav_2_5" id=
"__nav_2_5_label" tabindex=
"0">
336 <span class=
"md-nav__icon md-icon"></span>
339 <nav class=
"md-nav" data-md-level=
"2" aria-labelledby=
"__nav_2_5_label" aria-expanded=
"false">
340 <label class=
"md-nav__title" for=
"__nav_2_5">
341 <span class=
"md-nav__icon md-icon"></span>
344 <ul class=
"md-nav__list" data-md-scrollfix
>
352 <li class=
"md-nav__item md-nav__item--nested">
357 <input class=
"md-nav__toggle md-toggle " type=
"checkbox" id=
"__nav_2_5_1" >
361 <label class=
"md-nav__link" for=
"__nav_2_5_1" id=
"__nav_2_5_1_label" tabindex=
"0">
363 <span class=
"md-nav__icon md-icon"></span>
366 <nav class=
"md-nav" data-md-level=
"3" aria-labelledby=
"__nav_2_5_1_label" aria-expanded=
"false">
367 <label class=
"md-nav__title" for=
"__nav_2_5_1">
368 <span class=
"md-nav__icon md-icon"></span>
371 <ul class=
"md-nav__list" data-md-scrollfix
>
378 <li class=
"md-nav__item">
379 <a href=
"../../php/api/caches/" class=
"md-nav__link">
392 <li class=
"md-nav__item">
393 <a href=
"../../php/api/caches_persistent-caches/" class=
"md-nav__link">
406 <li class=
"md-nav__item">
407 <a href=
"../../php/api/caches_runtime-caches/" class=
"md-nav__link">
427 <li class=
"md-nav__item">
428 <a href=
"../../php/api/comments/" class=
"md-nav__link">
441 <li class=
"md-nav__item">
442 <a href=
"../../php/api/cronjobs/" class=
"md-nav__link">
455 <li class=
"md-nav__item">
456 <a href=
"../../php/api/events/" class=
"md-nav__link">
470 <li class=
"md-nav__item md-nav__item--nested">
475 <input class=
"md-nav__toggle md-toggle " type=
"checkbox" id=
"__nav_2_5_5" >
479 <label class=
"md-nav__link" for=
"__nav_2_5_5" id=
"__nav_2_5_5_label" tabindex=
"0">
481 <span class=
"md-nav__icon md-icon"></span>
484 <nav class=
"md-nav" data-md-level=
"3" aria-labelledby=
"__nav_2_5_5_label" aria-expanded=
"false">
485 <label class=
"md-nav__title" for=
"__nav_2_5_5">
486 <span class=
"md-nav__icon md-icon"></span>
489 <ul class=
"md-nav__list" data-md-scrollfix
>
496 <li class=
"md-nav__item">
497 <a href=
"../../php/api/form_builder/overview/" class=
"md-nav__link">
510 <li class=
"md-nav__item">
511 <a href=
"../../php/api/form_builder/structure/" class=
"md-nav__link">
524 <li class=
"md-nav__item">
525 <a href=
"../../php/api/form_builder/form_fields/" class=
"md-nav__link">
538 <li class=
"md-nav__item">
539 <a href=
"../../php/api/form_builder/validation_data/" class=
"md-nav__link">
552 <li class=
"md-nav__item">
553 <a href=
"../../php/api/form_builder/dependencies/" class=
"md-nav__link">
573 <li class=
"md-nav__item">
574 <a href=
"../../php/api/package_installation_plugins/" class=
"md-nav__link">
575 Package Installation Plugins
587 <li class=
"md-nav__item">
588 <a href=
"../../php/api/user_activity_points/" class=
"md-nav__link">
601 <li class=
"md-nav__item">
602 <a href=
"../../php/api/user_notifications/" class=
"md-nav__link">
615 <li class=
"md-nav__item">
616 <a href=
"../../php/api/sitemaps/" class=
"md-nav__link">
636 <li class=
"md-nav__item">
637 <a href=
"../../php/code-style/" class=
"md-nav__link">
650 <li class=
"md-nav__item">
651 <a href=
"../../php/apps/" class=
"md-nav__link">
664 <li class=
"md-nav__item">
665 <a href=
"../../php/gdpr/" class=
"md-nav__link">
687 <li class=
"md-nav__item md-nav__item--nested">
692 <input class=
"md-nav__toggle md-toggle " type=
"checkbox" id=
"__nav_3" >
696 <label class=
"md-nav__link" for=
"__nav_3" id=
"__nav_3_label" tabindex=
"0">
697 Languages, Templates & CSS
698 <span class=
"md-nav__icon md-icon"></span>
701 <nav class=
"md-nav" data-md-level=
"1" aria-labelledby=
"__nav_3_label" aria-expanded=
"false">
702 <label class=
"md-nav__title" for=
"__nav_3">
703 <span class=
"md-nav__icon md-icon"></span>
704 Languages, Templates & CSS
706 <ul class=
"md-nav__list" data-md-scrollfix
>
713 <li class=
"md-nav__item">
714 <a href=
"../../view/languages/" class=
"md-nav__link">
727 <li class=
"md-nav__item">
728 <a href=
"../../view/templates/" class=
"md-nav__link">
741 <li class=
"md-nav__item">
742 <a href=
"../../view/template-modifiers/" class=
"md-nav__link">
755 <li class=
"md-nav__item">
756 <a href=
"../../view/template-plugins/" class=
"md-nav__link">
769 <li class=
"md-nav__item">
770 <a href=
"../../view/css/" class=
"md-nav__link">
794 <li class=
"md-nav__item md-nav__item--active md-nav__item--nested">
799 <input class=
"md-nav__toggle md-toggle " type=
"checkbox" id=
"__nav_4" checked
>
803 <label class=
"md-nav__link" for=
"__nav_4" id=
"__nav_4_label" tabindex=
"0">
804 TypeScript and JavaScript API
805 <span class=
"md-nav__icon md-icon"></span>
808 <nav class=
"md-nav" data-md-level=
"1" aria-labelledby=
"__nav_4_label" aria-expanded=
"true">
809 <label class=
"md-nav__title" for=
"__nav_4">
810 <span class=
"md-nav__icon md-icon"></span>
811 TypeScript and JavaScript API
813 <ul class=
"md-nav__list" data-md-scrollfix
>
820 <li class=
"md-nav__item">
821 <a href=
"../general-usage/" class=
"md-nav__link">
834 <li class=
"md-nav__item">
835 <a href=
"../typescript/" class=
"md-nav__link">
849 <li class=
"md-nav__item md-nav__item--nested">
854 <input class=
"md-nav__toggle md-toggle " type=
"checkbox" id=
"__nav_4_3" >
858 <label class=
"md-nav__link" for=
"__nav_4_3" id=
"__nav_4_3_label" tabindex=
"0">
860 <span class=
"md-nav__icon md-icon"></span>
863 <nav class=
"md-nav" data-md-level=
"2" aria-labelledby=
"__nav_4_3_label" aria-expanded=
"false">
864 <label class=
"md-nav__title" for=
"__nav_4_3">
865 <span class=
"md-nav__icon md-icon"></span>
868 <ul class=
"md-nav__list" data-md-scrollfix
>
875 <li class=
"md-nav__item">
876 <a href=
"../components_ckeditor5/" class=
"md-nav__link">
889 <li class=
"md-nav__item">
890 <a href=
"../components_confirmation/" class=
"md-nav__link">
903 <li class=
"md-nav__item">
904 <a href=
"../components_dialog/" class=
"md-nav__link">
917 <li class=
"md-nav__item">
918 <a href=
"../components_google_maps/" class=
"md-nav__link">
931 <li class=
"md-nav__item">
932 <a href=
"../components_pagination/" class=
"md-nav__link">
955 <li class=
"md-nav__item md-nav__item--active md-nav__item--nested">
960 <input class=
"md-nav__toggle md-toggle " type=
"checkbox" id=
"__nav_4_4" checked
>
964 <label class=
"md-nav__link" for=
"__nav_4_4" id=
"__nav_4_4_label" tabindex=
"0">
966 <span class=
"md-nav__icon md-icon"></span>
969 <nav class=
"md-nav" data-md-level=
"2" aria-labelledby=
"__nav_4_4_label" aria-expanded=
"true">
970 <label class=
"md-nav__title" for=
"__nav_4_4">
971 <span class=
"md-nav__icon md-icon"></span>
974 <ul class=
"md-nav__list" data-md-scrollfix
>
981 <li class=
"md-nav__item">
982 <a href=
"../new-api_writing-a-module/" class=
"md-nav__link">
995 <li class=
"md-nav__item">
996 <a href=
"../new-api_core/" class=
"md-nav__link">
1009 <li class=
"md-nav__item">
1010 <a href=
"../new-api_dom/" class=
"md-nav__link">
1025 <li class=
"md-nav__item md-nav__item--active">
1027 <input class=
"md-nav__toggle md-toggle" type=
"checkbox" id=
"__toc">
1033 <label class=
"md-nav__link md-nav__link--active" for=
"__toc">
1035 <span class=
"md-nav__icon md-icon"></span>
1038 <a href=
"./" class=
"md-nav__link md-nav__link--active">
1044 <nav class=
"md-nav md-nav--secondary" aria-label=
"Table of contents">
1051 <label class=
"md-nav__title" for=
"__toc">
1052 <span class=
"md-nav__icon md-icon"></span>
1055 <ul class=
"md-nav__list" data-md-component=
"toc" data-md-scrollfix
>
1057 <li class=
"md-nav__item">
1058 <a href=
"#eventkey" class=
"md-nav__link">
1062 <nav class=
"md-nav" aria-label=
"EventKey">
1063 <ul class=
"md-nav__list">
1065 <li class=
"md-nav__item">
1066 <a href=
"#arrowdownevent-keyboardevent-boolean" class=
"md-nav__link">
1067 ArrowDown(event: KeyboardEvent): boolean
1072 <li class=
"md-nav__item">
1073 <a href=
"#arrowleftevent-keyboardevent-boolean" class=
"md-nav__link">
1074 ArrowLeft(event: KeyboardEvent): boolean
1079 <li class=
"md-nav__item">
1080 <a href=
"#arrowrightevent-keyboardevent-boolean" class=
"md-nav__link">
1081 ArrowRight(event: KeyboardEvent): boolean
1086 <li class=
"md-nav__item">
1087 <a href=
"#arrowupevent-keyboardevent-boolean" class=
"md-nav__link">
1088 ArrowUp(event: KeyboardEvent): boolean
1093 <li class=
"md-nav__item">
1094 <a href=
"#commaevent-keyboardevent-boolean" class=
"md-nav__link">
1095 Comma(event: KeyboardEvent): boolean
1100 <li class=
"md-nav__item">
1101 <a href=
"#enterevent-keyboardevent-boolean" class=
"md-nav__link">
1102 Enter(event: KeyboardEvent): boolean
1107 <li class=
"md-nav__item">
1108 <a href=
"#escapeevent-keyboardevent-boolean" class=
"md-nav__link">
1109 Escape(event: KeyboardEvent): boolean
1114 <li class=
"md-nav__item">
1115 <a href=
"#tabevent-keyboardevent-boolean" class=
"md-nav__link">
1116 Tab(event: KeyboardEvent): boolean
1126 <li class=
"md-nav__item">
1127 <a href=
"#eventhandler" class=
"md-nav__link">
1131 <nav class=
"md-nav" aria-label=
"EventHandler">
1132 <ul class=
"md-nav__list">
1134 <li class=
"md-nav__item">
1135 <a href=
"#identifiying-events-with-the-developer-tools" class=
"md-nav__link">
1136 Identifiying Events with the Developer Tools
1141 <li class=
"md-nav__item">
1142 <a href=
"#addidentifier-string-action-string-callback-data-object-void-string" class=
"md-nav__link">
1143 add(identifier: string, action: string, callback: (data: Object) =
> void): string
1148 <li class=
"md-nav__item">
1149 <a href=
"#fireidentifier-string-action-string-data-object" class=
"md-nav__link">
1150 fire(identifier: string, action: string, data?: Object)
1155 <li class=
"md-nav__item">
1156 <a href=
"#removeidentifier-string-action-string-uuid-string" class=
"md-nav__link">
1157 remove(identifier: string, action: string, uuid: string)
1162 <li class=
"md-nav__item">
1163 <a href=
"#removeallidentifier-string-action-string" class=
"md-nav__link">
1164 removeAll(identifier: string, action: string)
1169 <li class=
"md-nav__item">
1170 <a href=
"#removeallbysuffixidentifier-string-suffix-string" class=
"md-nav__link">
1171 removeAllBySuffix(identifier: string, suffix: string)
1195 <li class=
"md-nav__item">
1196 <a href=
"../new-api_ajax/" class=
"md-nav__link">
1209 <li class=
"md-nav__item">
1210 <a href=
"../new-api_dialogs/" class=
"md-nav__link">
1223 <li class=
"md-nav__item">
1224 <a href=
"../new-api_browser/" class=
"md-nav__link">
1225 Browser and Screen Sizes
1237 <li class=
"md-nav__item">
1238 <a href=
"../new-api_ui/" class=
"md-nav__link">
1258 <li class=
"md-nav__item">
1259 <a href=
"../legacy-api/" class=
"md-nav__link">
1272 <li class=
"md-nav__item">
1273 <a href=
"../code-snippets/" class=
"md-nav__link">
1295 <li class=
"md-nav__item md-nav__item--nested">
1300 <input class=
"md-nav__toggle md-toggle " type=
"checkbox" id=
"__nav_5" >
1304 <label class=
"md-nav__link" for=
"__nav_5" id=
"__nav_5_label" tabindex=
"0">
1306 <span class=
"md-nav__icon md-icon"></span>
1309 <nav class=
"md-nav" data-md-level=
"1" aria-labelledby=
"__nav_5_label" aria-expanded=
"false">
1310 <label class=
"md-nav__title" for=
"__nav_5">
1311 <span class=
"md-nav__icon md-icon"></span>
1314 <ul class=
"md-nav__list" data-md-scrollfix
>
1321 <li class=
"md-nav__item">
1322 <a href=
"../../package/package-xml/" class=
"md-nav__link">
1336 <li class=
"md-nav__item md-nav__item--nested">
1341 <input class=
"md-nav__toggle md-toggle " type=
"checkbox" id=
"__nav_5_2" >
1345 <label class=
"md-nav__link" for=
"__nav_5_2" id=
"__nav_5_2_label" tabindex=
"0">
1347 <span class=
"md-nav__icon md-icon"></span>
1350 <nav class=
"md-nav" data-md-level=
"2" aria-labelledby=
"__nav_5_2_label" aria-expanded=
"false">
1351 <label class=
"md-nav__title" for=
"__nav_5_2">
1352 <span class=
"md-nav__icon md-icon"></span>
1355 <ul class=
"md-nav__list" data-md-scrollfix
>
1362 <li class=
"md-nav__item">
1363 <a href=
"../../package/pip/" class=
"md-nav__link">
1376 <li class=
"md-nav__item">
1377 <a href=
"../../package/pip/acl-option/" class=
"md-nav__link">
1390 <li class=
"md-nav__item">
1391 <a href=
"../../package/pip/acp-menu/" class=
"md-nav__link">
1404 <li class=
"md-nav__item">
1405 <a href=
"../../package/pip/acp-search-provider/" class=
"md-nav__link">
1418 <li class=
"md-nav__item">
1419 <a href=
"../../package/pip/acp-template/" class=
"md-nav__link">
1432 <li class=
"md-nav__item">
1433 <a href=
"../../package/pip/acp-template-delete/" class=
"md-nav__link">
1446 <li class=
"md-nav__item">
1447 <a href=
"../../package/pip/bbcode/" class=
"md-nav__link">
1460 <li class=
"md-nav__item">
1461 <a href=
"../../package/pip/box/" class=
"md-nav__link">
1474 <li class=
"md-nav__item">
1475 <a href=
"../../package/pip/clipboard-action/" class=
"md-nav__link">
1488 <li class=
"md-nav__item">
1489 <a href=
"../../package/pip/core-object/" class=
"md-nav__link">
1502 <li class=
"md-nav__item">
1503 <a href=
"../../package/pip/cronjob/" class=
"md-nav__link">
1516 <li class=
"md-nav__item">
1517 <a href=
"../../package/pip/database/" class=
"md-nav__link">
1530 <li class=
"md-nav__item">
1531 <a href=
"../../package/pip/event-listener/" class=
"md-nav__link">
1544 <li class=
"md-nav__item">
1545 <a href=
"../../package/pip/file/" class=
"md-nav__link">
1558 <li class=
"md-nav__item">
1559 <a href=
"../../package/pip/file-delete/" class=
"md-nav__link">
1572 <li class=
"md-nav__item">
1573 <a href=
"../../package/pip/language/" class=
"md-nav__link">
1586 <li class=
"md-nav__item">
1587 <a href=
"../../package/pip/media-provider/" class=
"md-nav__link">
1600 <li class=
"md-nav__item">
1601 <a href=
"../../package/pip/menu/" class=
"md-nav__link">
1614 <li class=
"md-nav__item">
1615 <a href=
"../../package/pip/menu-item/" class=
"md-nav__link">
1628 <li class=
"md-nav__item">
1629 <a href=
"../../package/pip/object-type/" class=
"md-nav__link">
1642 <li class=
"md-nav__item">
1643 <a href=
"../../package/pip/object-type-definition/" class=
"md-nav__link">
1644 objectTypeDefinition
1656 <li class=
"md-nav__item">
1657 <a href=
"../../package/pip/option/" class=
"md-nav__link">
1670 <li class=
"md-nav__item">
1671 <a href=
"../../package/pip/page/" class=
"md-nav__link">
1684 <li class=
"md-nav__item">
1685 <a href=
"../../package/pip/pip/" class=
"md-nav__link">
1698 <li class=
"md-nav__item">
1699 <a href=
"../../package/pip/script/" class=
"md-nav__link">
1712 <li class=
"md-nav__item">
1713 <a href=
"../../package/pip/smiley/" class=
"md-nav__link">
1726 <li class=
"md-nav__item">
1727 <a href=
"../../package/pip/sql/" class=
"md-nav__link">
1740 <li class=
"md-nav__item">
1741 <a href=
"../../package/pip/style/" class=
"md-nav__link">
1754 <li class=
"md-nav__item">
1755 <a href=
"../../package/pip/template/" class=
"md-nav__link">
1768 <li class=
"md-nav__item">
1769 <a href=
"../../package/pip/template-delete/" class=
"md-nav__link">
1782 <li class=
"md-nav__item">
1783 <a href=
"../../package/pip/template-listener/" class=
"md-nav__link">
1796 <li class=
"md-nav__item">
1797 <a href=
"../../package/pip/user-group-option/" class=
"md-nav__link">
1810 <li class=
"md-nav__item">
1811 <a href=
"../../package/pip/user-menu/" class=
"md-nav__link">
1824 <li class=
"md-nav__item">
1825 <a href=
"../../package/pip/user-notification-event/" class=
"md-nav__link">
1826 userNotificationEvent
1838 <li class=
"md-nav__item">
1839 <a href=
"../../package/pip/user-option/" class=
"md-nav__link">
1852 <li class=
"md-nav__item">
1853 <a href=
"../../package/pip/user-profile-menu/" class=
"md-nav__link">
1873 <li class=
"md-nav__item">
1874 <a href=
"../../package/database-php-api/" class=
"md-nav__link">
1896 <li class=
"md-nav__item md-nav__item--nested">
1901 <input class=
"md-nav__toggle md-toggle " type=
"checkbox" id=
"__nav_6" >
1905 <label class=
"md-nav__link" for=
"__nav_6" id=
"__nav_6_label" tabindex=
"0">
1907 <span class=
"md-nav__icon md-icon"></span>
1910 <nav class=
"md-nav" data-md-level=
"1" aria-labelledby=
"__nav_6_label" aria-expanded=
"false">
1911 <label class=
"md-nav__title" for=
"__nav_6">
1912 <span class=
"md-nav__icon md-icon"></span>
1915 <ul class=
"md-nav__list" data-md-scrollfix
>
1923 <li class=
"md-nav__item md-nav__item--nested">
1928 <input class=
"md-nav__toggle md-toggle " type=
"checkbox" id=
"__nav_6_1" >
1932 <label class=
"md-nav__link" for=
"__nav_6_1" id=
"__nav_6_1_label" tabindex=
"0">
1933 From WoltLab Suite
5.5
1934 <span class=
"md-nav__icon md-icon"></span>
1937 <nav class=
"md-nav" data-md-level=
"2" aria-labelledby=
"__nav_6_1_label" aria-expanded=
"false">
1938 <label class=
"md-nav__title" for=
"__nav_6_1">
1939 <span class=
"md-nav__icon md-icon"></span>
1940 From WoltLab Suite
5.5
1942 <ul class=
"md-nav__list" data-md-scrollfix
>
1949 <li class=
"md-nav__item">
1950 <a href=
"../../migration/wsc55/php/" class=
"md-nav__link">
1963 <li class=
"md-nav__item">
1964 <a href=
"../../migration/wsc55/javascript/" class=
"md-nav__link">
1965 TypeScript and JavaScript
1977 <li class=
"md-nav__item">
1978 <a href=
"../../migration/wsc55/templates/" class=
"md-nav__link">
1991 <li class=
"md-nav__item">
1992 <a href=
"../../migration/wsc55/icons/" class=
"md-nav__link">
2005 <li class=
"md-nav__item">
2006 <a href=
"../../migration/wsc55/dialogs/" class=
"md-nav__link">
2019 <li class=
"md-nav__item">
2020 <a href=
"../../migration/wsc55/libraries/" class=
"md-nav__link">
2021 Third Party Libraries
2033 <li class=
"md-nav__item">
2034 <a href=
"../../migration/wsc55/deprecations_removals/" class=
"md-nav__link">
2035 Deprecations and Removals
2055 <li class=
"md-nav__item md-nav__item--nested">
2060 <input class=
"md-nav__toggle md-toggle " type=
"checkbox" id=
"__nav_6_2" >
2064 <label class=
"md-nav__link" for=
"__nav_6_2" id=
"__nav_6_2_label" tabindex=
"0">
2065 From WoltLab Suite
5.4
2066 <span class=
"md-nav__icon md-icon"></span>
2069 <nav class=
"md-nav" data-md-level=
"2" aria-labelledby=
"__nav_6_2_label" aria-expanded=
"false">
2070 <label class=
"md-nav__title" for=
"__nav_6_2">
2071 <span class=
"md-nav__icon md-icon"></span>
2072 From WoltLab Suite
5.4
2074 <ul class=
"md-nav__list" data-md-scrollfix
>
2081 <li class=
"md-nav__item">
2082 <a href=
"../../migration/wsc54/php/" class=
"md-nav__link">
2095 <li class=
"md-nav__item">
2096 <a href=
"../../migration/wsc54/javascript/" class=
"md-nav__link">
2097 TypeScript and JavaScript
2109 <li class=
"md-nav__item">
2110 <a href=
"../../migration/wsc54/templates/" class=
"md-nav__link">
2123 <li class=
"md-nav__item">
2124 <a href=
"../../migration/wsc54/libraries/" class=
"md-nav__link">
2125 Third Party Libraries
2137 <li class=
"md-nav__item">
2138 <a href=
"../../migration/wsc54/deprecations_removals/" class=
"md-nav__link">
2139 Deprecations and Removals
2159 <li class=
"md-nav__item md-nav__item--nested">
2164 <input class=
"md-nav__toggle md-toggle " type=
"checkbox" id=
"__nav_6_3" >
2168 <label class=
"md-nav__link" for=
"__nav_6_3" id=
"__nav_6_3_label" tabindex=
"0">
2169 From WoltLab Suite
5.3
2170 <span class=
"md-nav__icon md-icon"></span>
2173 <nav class=
"md-nav" data-md-level=
"2" aria-labelledby=
"__nav_6_3_label" aria-expanded=
"false">
2174 <label class=
"md-nav__title" for=
"__nav_6_3">
2175 <span class=
"md-nav__icon md-icon"></span>
2176 From WoltLab Suite
5.3
2178 <ul class=
"md-nav__list" data-md-scrollfix
>
2185 <li class=
"md-nav__item">
2186 <a href=
"../../migration/wsc53/php/" class=
"md-nav__link">
2199 <li class=
"md-nav__item">
2200 <a href=
"../../migration/wsc53/session/" class=
"md-nav__link">
2201 Session Handling and Authentication
2213 <li class=
"md-nav__item">
2214 <a href=
"../../migration/wsc53/javascript/" class=
"md-nav__link">
2215 TypeScript and JavaScript
2227 <li class=
"md-nav__item">
2228 <a href=
"../../migration/wsc53/templates/" class=
"md-nav__link">
2241 <li class=
"md-nav__item">
2242 <a href=
"../../migration/wsc53/libraries/" class=
"md-nav__link">
2243 Third Party Libraries
2263 <li class=
"md-nav__item md-nav__item--nested">
2268 <input class=
"md-nav__toggle md-toggle " type=
"checkbox" id=
"__nav_6_4" >
2272 <label class=
"md-nav__link" for=
"__nav_6_4" id=
"__nav_6_4_label" tabindex=
"0">
2273 From WoltLab Suite
5.2
2274 <span class=
"md-nav__icon md-icon"></span>
2277 <nav class=
"md-nav" data-md-level=
"2" aria-labelledby=
"__nav_6_4_label" aria-expanded=
"false">
2278 <label class=
"md-nav__title" for=
"__nav_6_4">
2279 <span class=
"md-nav__icon md-icon"></span>
2280 From WoltLab Suite
5.2
2282 <ul class=
"md-nav__list" data-md-scrollfix
>
2289 <li class=
"md-nav__item">
2290 <a href=
"../../migration/wsc52/php/" class=
"md-nav__link">
2303 <li class=
"md-nav__item">
2304 <a href=
"../../migration/wsc52/templates/" class=
"md-nav__link">
2305 Templates and Languages
2317 <li class=
"md-nav__item">
2318 <a href=
"../../migration/wsc52/libraries/" class=
"md-nav__link">
2319 Third Party Libraries
2339 <li class=
"md-nav__item md-nav__item--nested">
2344 <input class=
"md-nav__toggle md-toggle " type=
"checkbox" id=
"__nav_6_5" >
2348 <label class=
"md-nav__link" for=
"__nav_6_5" id=
"__nav_6_5_label" tabindex=
"0">
2349 From WoltLab Suite
3.1
2350 <span class=
"md-nav__icon md-icon"></span>
2353 <nav class=
"md-nav" data-md-level=
"2" aria-labelledby=
"__nav_6_5_label" aria-expanded=
"false">
2354 <label class=
"md-nav__title" for=
"__nav_6_5">
2355 <span class=
"md-nav__icon md-icon"></span>
2356 From WoltLab Suite
3.1
2358 <ul class=
"md-nav__list" data-md-scrollfix
>
2365 <li class=
"md-nav__item">
2366 <a href=
"../../migration/wsc31/php/" class=
"md-nav__link">
2387 <li class=
"md-nav__item md-nav__item--nested">
2392 <input class=
"md-nav__toggle md-toggle " type=
"checkbox" id=
"__nav_6_6" >
2396 <label class=
"md-nav__link" for=
"__nav_6_6" id=
"__nav_6_6_label" tabindex=
"0">
2397 From WoltLab Suite
3.0
2398 <span class=
"md-nav__icon md-icon"></span>
2401 <nav class=
"md-nav" data-md-level=
"2" aria-labelledby=
"__nav_6_6_label" aria-expanded=
"false">
2402 <label class=
"md-nav__title" for=
"__nav_6_6">
2403 <span class=
"md-nav__icon md-icon"></span>
2404 From WoltLab Suite
3.0
2406 <ul class=
"md-nav__list" data-md-scrollfix
>
2413 <li class=
"md-nav__item">
2414 <a href=
"../../migration/wsc30/php/" class=
"md-nav__link">
2427 <li class=
"md-nav__item">
2428 <a href=
"../../migration/wsc30/javascript/" class=
"md-nav__link">
2441 <li class=
"md-nav__item">
2442 <a href=
"../../migration/wsc30/templates/" class=
"md-nav__link">
2455 <li class=
"md-nav__item">
2456 <a href=
"../../migration/wsc30/css/" class=
"md-nav__link">
2469 <li class=
"md-nav__item">
2470 <a href=
"../../migration/wsc30/package/" class=
"md-nav__link">
2491 <li class=
"md-nav__item md-nav__item--nested">
2496 <input class=
"md-nav__toggle md-toggle " type=
"checkbox" id=
"__nav_6_7" >
2500 <label class=
"md-nav__link" for=
"__nav_6_7" id=
"__nav_6_7_label" tabindex=
"0">
2502 <span class=
"md-nav__icon md-icon"></span>
2505 <nav class=
"md-nav" data-md-level=
"2" aria-labelledby=
"__nav_6_7_label" aria-expanded=
"false">
2506 <label class=
"md-nav__title" for=
"__nav_6_7">
2507 <span class=
"md-nav__icon md-icon"></span>
2510 <ul class=
"md-nav__list" data-md-scrollfix
>
2517 <li class=
"md-nav__item">
2518 <a href=
"../../migration/wcf21/php/" class=
"md-nav__link">
2531 <li class=
"md-nav__item">
2532 <a href=
"../../migration/wcf21/templates/" class=
"md-nav__link">
2545 <li class=
"md-nav__item">
2546 <a href=
"../../migration/wcf21/css/" class=
"md-nav__link">
2559 <li class=
"md-nav__item">
2560 <a href=
"../../migration/wcf21/package/" class=
"md-nav__link">
2589 <li class=
"md-nav__item md-nav__item--nested">
2594 <input class=
"md-nav__toggle md-toggle " type=
"checkbox" id=
"__nav_7" >
2598 <label class=
"md-nav__link" for=
"__nav_7" id=
"__nav_7_label" tabindex=
"0">
2600 <span class=
"md-nav__icon md-icon"></span>
2603 <nav class=
"md-nav" data-md-level=
"1" aria-labelledby=
"__nav_7_label" aria-expanded=
"false">
2604 <label class=
"md-nav__title" for=
"__nav_7">
2605 <span class=
"md-nav__icon md-icon"></span>
2608 <ul class=
"md-nav__list" data-md-scrollfix
>
2616 <li class=
"md-nav__item md-nav__item--nested">
2621 <input class=
"md-nav__toggle md-toggle " type=
"checkbox" id=
"__nav_7_1" >
2625 <label class=
"md-nav__link" for=
"__nav_7_1" id=
"__nav_7_1_label" tabindex=
"0">
2627 <span class=
"md-nav__icon md-icon"></span>
2630 <nav class=
"md-nav" data-md-level=
"2" aria-labelledby=
"__nav_7_1_label" aria-expanded=
"false">
2631 <label class=
"md-nav__title" for=
"__nav_7_1">
2632 <span class=
"md-nav__icon md-icon"></span>
2635 <ul class=
"md-nav__list" data-md-scrollfix
>
2642 <li class=
"md-nav__item">
2643 <a href=
"../../tutorial/series/overview/" class=
"md-nav__link">
2656 <li class=
"md-nav__item">
2657 <a href=
"../../tutorial/series/part_1/" class=
"md-nav__link">
2670 <li class=
"md-nav__item">
2671 <a href=
"../../tutorial/series/part_2/" class=
"md-nav__link">
2684 <li class=
"md-nav__item">
2685 <a href=
"../../tutorial/series/part_3/" class=
"md-nav__link">
2698 <li class=
"md-nav__item">
2699 <a href=
"../../tutorial/series/part_4/" class=
"md-nav__link">
2712 <li class=
"md-nav__item">
2713 <a href=
"../../tutorial/series/part_5/" class=
"md-nav__link">
2726 <li class=
"md-nav__item">
2727 <a href=
"../../tutorial/series/part_6/" class=
"md-nav__link">
2756 <div class=
"md-sidebar md-sidebar--secondary" data-md-component=
"sidebar" data-md-type=
"toc" >
2757 <div class=
"md-sidebar__scrollwrap">
2758 <div class=
"md-sidebar__inner">
2761 <nav class=
"md-nav md-nav--secondary" aria-label=
"Table of contents">
2768 <label class=
"md-nav__title" for=
"__toc">
2769 <span class=
"md-nav__icon md-icon"></span>
2772 <ul class=
"md-nav__list" data-md-component=
"toc" data-md-scrollfix
>
2774 <li class=
"md-nav__item">
2775 <a href=
"#eventkey" class=
"md-nav__link">
2779 <nav class=
"md-nav" aria-label=
"EventKey">
2780 <ul class=
"md-nav__list">
2782 <li class=
"md-nav__item">
2783 <a href=
"#arrowdownevent-keyboardevent-boolean" class=
"md-nav__link">
2784 ArrowDown(event: KeyboardEvent): boolean
2789 <li class=
"md-nav__item">
2790 <a href=
"#arrowleftevent-keyboardevent-boolean" class=
"md-nav__link">
2791 ArrowLeft(event: KeyboardEvent): boolean
2796 <li class=
"md-nav__item">
2797 <a href=
"#arrowrightevent-keyboardevent-boolean" class=
"md-nav__link">
2798 ArrowRight(event: KeyboardEvent): boolean
2803 <li class=
"md-nav__item">
2804 <a href=
"#arrowupevent-keyboardevent-boolean" class=
"md-nav__link">
2805 ArrowUp(event: KeyboardEvent): boolean
2810 <li class=
"md-nav__item">
2811 <a href=
"#commaevent-keyboardevent-boolean" class=
"md-nav__link">
2812 Comma(event: KeyboardEvent): boolean
2817 <li class=
"md-nav__item">
2818 <a href=
"#enterevent-keyboardevent-boolean" class=
"md-nav__link">
2819 Enter(event: KeyboardEvent): boolean
2824 <li class=
"md-nav__item">
2825 <a href=
"#escapeevent-keyboardevent-boolean" class=
"md-nav__link">
2826 Escape(event: KeyboardEvent): boolean
2831 <li class=
"md-nav__item">
2832 <a href=
"#tabevent-keyboardevent-boolean" class=
"md-nav__link">
2833 Tab(event: KeyboardEvent): boolean
2843 <li class=
"md-nav__item">
2844 <a href=
"#eventhandler" class=
"md-nav__link">
2848 <nav class=
"md-nav" aria-label=
"EventHandler">
2849 <ul class=
"md-nav__list">
2851 <li class=
"md-nav__item">
2852 <a href=
"#identifiying-events-with-the-developer-tools" class=
"md-nav__link">
2853 Identifiying Events with the Developer Tools
2858 <li class=
"md-nav__item">
2859 <a href=
"#addidentifier-string-action-string-callback-data-object-void-string" class=
"md-nav__link">
2860 add(identifier: string, action: string, callback: (data: Object) =
> void): string
2865 <li class=
"md-nav__item">
2866 <a href=
"#fireidentifier-string-action-string-data-object" class=
"md-nav__link">
2867 fire(identifier: string, action: string, data?: Object)
2872 <li class=
"md-nav__item">
2873 <a href=
"#removeidentifier-string-action-string-uuid-string" class=
"md-nav__link">
2874 remove(identifier: string, action: string, uuid: string)
2879 <li class=
"md-nav__item">
2880 <a href=
"#removeallidentifier-string-action-string" class=
"md-nav__link">
2881 removeAll(identifier: string, action: string)
2886 <li class=
"md-nav__item">
2887 <a href=
"#removeallbysuffixidentifier-string-suffix-string" class=
"md-nav__link">
2888 removeAllBySuffix(identifier: string, suffix: string)
2907 <div class=
"md-content" data-md-component=
"content">
2908 <article class=
"md-content__inner md-typeset">
2916 <h1 id=
"event-handling-javascript-api">Event Handling - JavaScript API
<a class=
"headerlink" href=
"#event-handling-javascript-api" title=
"Permanent link">#
</a></h1>
2917 <h2 id=
"eventkey"><code>EventKey
</code><a class=
"headerlink" href=
"#eventkey" title=
"Permanent link">#
</a></h2>
2918 <p>This class offers a set of static methods that can be used to determine if some
2919 common keys are being pressed. Internally it compares either the
<code>.key
</code> property
2920 if it is supported or the value of
<code>.which
</code>.
</p>
2921 <div class=
"highlight"><table class=
"highlighttable"><tr><td class=
"linenos"><div class=
"linenodiv"><pre><span></span><span class=
"normal">1</span>
2922 <span class=
"normal">2</span>
2923 <span class=
"normal">3</span>
2924 <span class=
"normal">4</span>
2925 <span class=
"normal">5</span>
2926 <span class=
"normal">6</span>
2927 <span class=
"normal">7</span></pre></div></td><td class=
"code"><div><pre><span></span><code><span class=
"nx">require
</span><span class=
"p">([
</span><span class=
"s2">"EventKey
"</span><span class=
"p">],
</span><span class=
"w"> </span><span class=
"kd">function
</span><span class=
"p">(
</span><span class=
"nx">EventKey
</span><span class=
"p">)
</span><span class=
"w"> </span><span class=
"p">{
</span>
2928 <span class=
"w"> </span><span class=
"nx">elBySel
</span><span class=
"p">(
</span><span class=
"s2">".some-input
"</span><span class=
"p">).
</span><span class=
"nx">addEventListener
</span><span class=
"p">(
</span><span class=
"s2">"keydown
"</span><span class=
"p">,
</span><span class=
"w"> </span><span class=
"kd">function
</span><span class=
"p">(
</span><span class=
"nx">event
</span><span class=
"p">)
</span><span class=
"w"> </span><span class=
"p">{
</span>
2929 <span class=
"w"> </span><span class=
"k">if
</span><span class=
"w"> </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=
"w"> </span><span class=
"p">{
</span>
2930 <span class=
"w"> </span><span class=
"c1">// the `Enter` key was pressed
</span>
2931 <span class=
"w"> </span><span class=
"p">}
</span>
2932 <span class=
"w"> </span><span class=
"p">});
</span>
2933 <span class=
"p">});
</span>
2934 </code></pre></div></td></tr></table></div>
2935 <h3 id=
"arrowdownevent-keyboardevent-boolean"><code>ArrowDown(event: KeyboardEvent): boolean
</code><a class=
"headerlink" href=
"#arrowdownevent-keyboardevent-boolean" title=
"Permanent link">#
</a></h3>
2936 <p>Returns true if the user has pressed the
<code>↓
</code> key.
</p>
2937 <h3 id=
"arrowleftevent-keyboardevent-boolean"><code>ArrowLeft(event: KeyboardEvent): boolean
</code><a class=
"headerlink" href=
"#arrowleftevent-keyboardevent-boolean" title=
"Permanent link">#
</a></h3>
2938 <p>Returns true if the user has pressed the
<code>←
</code> key.
</p>
2939 <h3 id=
"arrowrightevent-keyboardevent-boolean"><code>ArrowRight(event: KeyboardEvent): boolean
</code><a class=
"headerlink" href=
"#arrowrightevent-keyboardevent-boolean" title=
"Permanent link">#
</a></h3>
2940 <p>Returns true if the user has pressed the
<code>→
</code> key.
</p>
2941 <h3 id=
"arrowupevent-keyboardevent-boolean"><code>ArrowUp(event: KeyboardEvent): boolean
</code><a class=
"headerlink" href=
"#arrowupevent-keyboardevent-boolean" title=
"Permanent link">#
</a></h3>
2942 <p>Returns true if the user has pressed the
<code>↑
</code> key.
</p>
2943 <h3 id=
"commaevent-keyboardevent-boolean"><code>Comma(event: KeyboardEvent): boolean
</code><a class=
"headerlink" href=
"#commaevent-keyboardevent-boolean" title=
"Permanent link">#
</a></h3>
2944 <p>Returns true if the user has pressed the
<code>,
</code> key.
</p>
2945 <h3 id=
"enterevent-keyboardevent-boolean"><code>Enter(event: KeyboardEvent): boolean
</code><a class=
"headerlink" href=
"#enterevent-keyboardevent-boolean" title=
"Permanent link">#
</a></h3>
2946 <p>Returns true if the user has pressed the
<code>↲
</code> key.
</p>
2947 <h3 id=
"escapeevent-keyboardevent-boolean"><code>Escape(event: KeyboardEvent): boolean
</code><a class=
"headerlink" href=
"#escapeevent-keyboardevent-boolean" title=
"Permanent link">#
</a></h3>
2948 <p>Returns true if the user has pressed the
<code>Esc
</code> key.
</p>
2949 <h3 id=
"tabevent-keyboardevent-boolean"><code>Tab(event: KeyboardEvent): boolean
</code><a class=
"headerlink" href=
"#tabevent-keyboardevent-boolean" title=
"Permanent link">#
</a></h3>
2950 <p>Returns true if the user has pressed the
<code>↹
</code> key.
</p>
2951 <h2 id=
"eventhandler"><code>EventHandler
</code><a class=
"headerlink" href=
"#eventhandler" title=
"Permanent link">#
</a></h2>
2952 <p>A synchronous event system based on string identifiers rather than DOM elements,
2953 similar to the PHP event system in WoltLab Suite. Any components can listen to
2954 events or trigger events itself at any time.
</p>
2955 <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>
2956 <p>The Developer Tools offer an easy option to identify existing events that are fired while code is being executed.
2957 You can enable this watch mode through your browser's console using
<code>Devtools.toggleEventLogging()
</code>:
</p>
2958 <div class=
"highlight"><table class=
"highlighttable"><tr><td class=
"linenos"><div class=
"linenodiv"><pre><span></span><span class=
"normal">1</span>
2959 <span class=
"normal">2</span>
2960 <span class=
"normal">3</span>
2961 <span class=
"normal">4</span></pre></div></td><td class=
"code"><div><pre><span></span><code>> Devtools.toggleEventLogging();
2962 < Event logging enabled
2963 < [Devtools.EventLogging] Firing event: bar @ com.example.app.foo
2964 < [Devtools.EventLogging] Firing event: baz @ com.example.app.foo
2965 </code></pre></div></td></tr></table></div>
2966 <h3 id=
"addidentifier-string-action-string-callback-data-object-void-string"><code>add(identifier: string, action: string, callback: (data: Object) =
> void): string
</code><a class=
"headerlink" href=
"#addidentifier-string-action-string-callback-data-object-void-string" title=
"Permanent link">#
</a></h3>
2967 <p>Adding an event listeners returns a randomly generated UUIDv4 that is used to
2968 identify the listener. This UUID is required to remove a specific listener through
2969 the
<code>remove()
</code> method.
</p>
2970 <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>
2971 <p>Triggers an event using an optional
<code>data
</code> object that is passed to each listener
2973 <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>
2974 <p>Removes a previously registered event listener using the UUID returned by
<code>add()
</code>.
</p>
2975 <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>
2976 <p>Removes all event listeners registered for the provided
<code>identifier
</code> and
<code>action
</code>.
</p>
2977 <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>
2978 <p>Removes all event listeners for an
<code>identifier
</code> whose action ends with the value
2979 of
<code>suffix
</code>.
</p>
2982 <div class=
"md-source-file">
3004 <footer class=
"md-footer">
3006 <div class=
"md-footer-meta md-typeset">
3007 <div class=
"md-footer-meta__inner md-grid">
3008 <div class=
"md-copyright">
3010 <div class=
"md-copyright__highlight">
3011 Copyright ©
2020 WoltLab GmbH
3016 <a href=
"https://squidfunk.github.io/mkdocs-material/" target=
"_blank" rel=
"noopener">
3022 <div class=
"md-copyright">
3023 <a href=
"https://www.woltlab.com/legal-notice/">Legal Notice
</a>
3024 <a href=
"https://www.woltlab.com/privacy-policy/">Privacy Policy
</a>
3032 <div class=
"md-dialog" data-md-component=
"dialog">
3033 <div class=
"md-dialog__inner md-typeset"></div>
3036 <script id=
"__config" type=
"application/json">{
"base":
"../..",
"features": [
"navigation.tracking"],
"search":
"../../assets/javascripts/workers/search.74e28a9f.min.js",
"translations": {
"clipboard.copied":
"Copied to clipboard",
"clipboard.copy":
"Copy to clipboard",
"search.result.more.one":
"1 more on this page",
"search.result.more.other":
"# more on this page",
"search.result.none":
"No matching documents",
"search.result.one":
"1 matching document",
"search.result.other":
"# matching documents",
"search.result.placeholder":
"Type to start searching",
"search.result.term.missing":
"Missing",
"select.version":
"Select version"},
"version": {
"provider":
"mike"}}
</script>
3039 <script src=
"../../assets/javascripts/bundle.220ee61c.min.js"></script>