From 0b78b92b1b2eef6a7146f1ec1c8d5f16f6ca3c6f Mon Sep 17 00:00:00 2001
From: "christian.hausknecht" <christian.hausknecht@oeffentliche.de>
Date: Thu, 18 Apr 2024 18:35:06 +0200
Subject: [PATCH] Repairs event handling with focus of manipulation and
 filtering

- enables filtering and manipulating events immediately after occurrence due to specialized event factories. Prevent `Flow` based delay we had until now.
- simplifies `Listener`-type. It remains more or less as a marker type, in order to dispatch the convenience functions to grab values out of specific DOM elements.
- get rid of unnecessary convenience functions
- remove `@ignore` from one test case as the cause is now fixed
- add a new dedicated documentation chapter for event handling including `Key`-API
---
 .../jsMain/kotlin/dev/fritz2/core/events.kt   | 3902 +++++++++++++++--
 .../jsMain/kotlin/dev/fritz2/core/listener.kt |  112 +-
 .../src/jsMain/kotlin/dev/fritz2/core/tags.kt |    9 +-
 .../jsTest/kotlin/dev/fritz2/core/events.kt   |   83 +-
 .../headless/components/checkboxGroup.kt      |   15 +-
 .../fritz2/headless/components/disclosure.kt  |    4 +-
 .../dev/fritz2/headless/components/listbox.kt |    2 +-
 .../dev/fritz2/headless/components/menu.kt    |    4 +-
 .../dev/fritz2/headless/components/popOver.kt |    2 +-
 .../dev/fritz2/headless/components/switch.kt  |   13 +-
 .../fritz2/headless/components/tabGroup.kt    |   22 +-
 .../dev/fritz2/headless/components/toast.kt   |    8 +-
 .../fritz2/headless/foundation/OpenClose.kt   |   21 +-
 www/src/pages/docs/30_Render HTML.md          |    4 +-
 www/src/pages/docs/45_EventHandling.md        |  452 ++
 15 files changed, 4176 insertions(+), 477 deletions(-)
 create mode 100644 www/src/pages/docs/45_EventHandling.md

diff --git a/core/src/jsMain/kotlin/dev/fritz2/core/events.kt b/core/src/jsMain/kotlin/dev/fritz2/core/events.kt
index 25cc64a67..0f84b8196 100644
--- a/core/src/jsMain/kotlin/dev/fritz2/core/events.kt
+++ b/core/src/jsMain/kotlin/dev/fritz2/core/events.kt
@@ -21,808 +21,4062 @@ import org.w3c.xhr.ProgressEvent
  */
 interface WithEvents<out T : EventTarget> {
 
+    companion object {
+        private const val AFTERPRINT = "afterprint"
+        private const val BEFOREPRINT = "beforeprint"
+        private const val BEFOREUNLOAD = "beforeunload"
+        private const val BLUR = "blur"
+        private const val CANPLAY = "canplay"
+        private const val CANPLAYTHROUGH = "canplaythrough"
+        private const val CHANGE = "change"
+        private const val CLICK = "click"
+        private const val CONTEXTMENU = "contextmenu"
+        private const val COPY = "copy"
+        private const val CUT = "cut"
+        private const val DBLCLICK = "dblclick"
+        private const val DRAG = "drag"
+        private const val DRAGEND = "dragend"
+        private const val DRAGENTER = "dragenter"
+        private const val DRAGLEAVE = "dragleave"
+        private const val DRAGOVER = "dragover"
+        private const val DRAGSTART = "dragstart"
+        private const val DROP = "drop"
+        private const val DURATIONCHANGE = "durationchange"
+        private const val ENDED = "ended"
+        private const val FOCUS = "focus"
+        private const val FOCUSIN = "focusin"
+        private const val FOCUSOUT = "focusout"
+        private const val FULLSCREENCHANGE = "fullscreenchange"
+        private const val FULLSCREENERROR = "fullscreenerror"
+        private const val HASHCHANGE = "hashchange"
+        private const val INPUT = "input"
+        private const val INVALID = "invalid"
+        private const val KEYDOWN = "keydown"
+        private const val KEYPRESS = "keypress"
+        private const val KEYUP = "keyup"
+        private const val LOAD = "load"
+        private const val LOADEDDATA = "loadeddata"
+        private const val LOADEDMETADATA = "loadedmetadata"
+        private const val MOUSEENTER = "mouseenter"
+        private const val MOUSELEAVE = "mouseleave"
+        private const val MOUSEMOVE = "mousemove"
+        private const val MOUSEOVER = "mouseover"
+        private const val MOUSEOUT = "mouseout"
+        private const val MOUSEUP = "mouseup"
+        private const val OFFLINE = "offline"
+        private const val ONLINE = "online"
+        private const val OPEN = "open"
+        private const val PAGEHIDE = "pagehide"
+        private const val PAGESHOW = "pageshow"
+        private const val PASTE = "paste"
+        private const val LOADSTART = "loadstart"
+        private const val MESSAGE = "message"
+        private const val MOUSEDOWN = "mousedown"
+        private const val PAUSE = "pause"
+        private const val PLAY = "play"
+        private const val PLAYING = "playing"
+        private const val POPSTATE = "popstate"
+        private const val PROGRESS = "progress"
+        private const val RATECHANGE = "ratechange"
+        private const val RESIZE = "resize"
+        private const val RESET = "reset"
+        private const val SCROLL = "scroll"
+        private const val SEARCH = "search"
+        private const val SEEKED = "seeked"
+        private const val SEEKING = "seeking"
+        private const val SELECT = "select"
+        private const val SHOW = "show"
+        private const val STALLED = "stalled"
+        private const val STORAGE = "storage"
+        private const val SUBMIT = "submit"
+        private const val SUSPEND = "suspend"
+        private const val TIMEUPDATE = "timeupdate"
+        private const val TOGGLE = "toggle"
+        private const val TOUCHCANCEL = "touchcancel"
+        private const val TOUCHEND = "touchend"
+        private const val TOUCHMOVE = "touchmove"
+        private const val TOUCHSTART = "touchstart"
+        private const val UNLOAD = "unload"
+        private const val VOLUMECHANGE = "volumechange"
+        private const val WAITING = "waiting"
+        private const val WHEEL = "wheel"
+        private const val ABORT = "abort"
+    }
+
     /**
      * Creates an [Listener] for the given event [eventName].
      *
-     * @param eventName of the [Event] to listen for
+     * @param eventName the [DOM-API name](https://developer.mozilla.org/en-US/docs/Web/API/Element#events) of an event.
+     * Can be a custom name.
+     * @param capture if `true`, activates capturing mode, else remains in `bubble` mode (default)
+     * @param selector optional lambda expression to select specific events with option to manipulate it
+     * (e.g. `preventDefault` or `stopPropagation`).
+     *
+     * @return a [Listener]-object, which is more or less a [Flow] of the specific `Event`-type.
      */
-    fun <X : Event> subscribe(eventName: String, capture: Boolean = false, init: Event.() -> Unit = {}): Listener<X, T>
+    fun <X : Event> subscribe(
+        eventName: String,
+        capture: Boolean = false,
+        selector: X.() -> Boolean = { true }
+    ): Listener<X, T>
 
     /**
      * occurs when the loading of a media is aborted
      */
-    val aborts get() = subscribe<Event>("abort")
+    val aborts: Listener<Event, T> get() = subscribe(ABORT)
 
     /**
-     * occurs when a page has started printing, or if the print dialogue box has been closed
+     * occurs when the loading of a media is aborted
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
      */
-    val afterprints get() = subscribe<Event>("afterprint")
+    fun aborts(init: Event.() -> Unit): Listener<Event, T> = subscribe(ABORT) { init(); true }
 
     /**
-     * occurs when a page is about to be printed
+     * occurs when the loading of a media is aborted
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
      */
-    val beforeprints get() = subscribe<Event>("beforeprint")
+    fun abortsIf(selector: Event.() -> Boolean): Listener<Event, T> = subscribe(ABORT, selector = selector)
 
     /**
-     * occurs before the document is about to be unloaded
+     * occurs when a page has started printing, or if the print dialogue box has been closed
      */
-    val beforeunloads get() = subscribe<Event>("beforeunload")
+    val afterprints: Listener<Event, T> get() = subscribe(AFTERPRINT)
 
     /**
-     * occurs when an element loses focus
+     * occurs when a page has started printing, or if the print dialogue box has been closed
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
      */
-    val blurs get() = subscribe<FocusEvent>("blur")
+    fun afterprints(init: Event.() -> Unit): Listener<Event, T> = subscribe(AFTERPRINT) { init(); true }
 
     /**
-     * occurs when the browser can start playing the media (when it has buffered enough to begin)
+     * occurs when a page has started printing, or if the print dialogue box has been closed
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
      */
-    val canplays get() = subscribe<Event>("canplay")
+    fun afterprintsIf(selector: Event.() -> Boolean): Listener<Event, T> = subscribe(AFTERPRINT, selector = selector)
 
     /**
-     * occurs when the browser can play through the media without stopping for buffering
+     * occurs when a page is about to be printed
      */
-    val canplaythroughs get() = subscribe<Event>("canplaythrough")
+    val beforeprints: Listener<Event, T> get() = subscribe(BEFOREPRINT)
 
     /**
-     * occurs when the content of a form element, the selection, or the checked state have changed
-     * (for `<input>`, `<select>`, and `<textarea>`)
+     * occurs when a page is about to be printed
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
      */
-    val changes get() = subscribe<Event>("change")
+    fun beforeprints(init: Event.() -> Unit): Listener<Event, T> = subscribe(BEFOREPRINT) { init(); true }
 
     /**
-     * occurs when the user clicks on an element
+     * occurs when a page is about to be printed
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
      */
-    val clicks get() = subscribe<MouseEvent>("click")
+    fun beforeprintsIf(selector: Event.() -> Boolean): Listener<Event, T> = subscribe(BEFOREPRINT, selector = selector)
 
     /**
-     * occurs when the user right-clicks on an element to open a context menu
+     * occurs before the document is about to be unloaded
      */
-    val contextmenus get() = subscribe<MouseEvent>("contextmenu")
+    val beforeunloads: Listener<Event, T> get() = subscribe(BEFOREUNLOAD)
 
     /**
-     * occurs when the user copies the content of an element
+     * occurs before the document is about to be unloaded
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
      */
-    val copys get() = subscribe<ClipboardEvent>("copy")
+    fun beforeunloads(init: Event.() -> Unit): Listener<Event, T> = subscribe(BEFOREUNLOAD) { init(); true }
 
     /**
-     * occurs when the user cuts the content of an element
+     * occurs before the document is about to be unloaded
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
      */
-    val cuts get() = subscribe<ClipboardEvent>("cut")
+    fun beforeunloadsIf(selector: Event.() -> Boolean): Listener<Event, T> =
+        subscribe(BEFOREUNLOAD, selector = selector)
 
     /**
-     * occurs when the user double-clicks on an element
+     * occurs when an element loses focus
      */
-    val dblclicks get() = subscribe<MouseEvent>("dblclick")
+    val blurs: Listener<FocusEvent, T> get() = subscribe(BLUR)
 
     /**
-     * occurs when an element is being dragged
+     * occurs when an element loses focus
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [FocusEvent]s on its [Flow]
      */
-    val drags get() = subscribe<DragEvent>("drag")
+    fun blurs(init: FocusEvent.() -> Unit): Listener<FocusEvent, T> = subscribe(BLUR) { init(); true }
 
     /**
-     * occurs when the user has finished dragging an element
+     * occurs when an element loses focus
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [FocusEvent]s on its [Flow]
      */
-    val dragends get() = subscribe<DragEvent>("dragend")
+    fun blursIf(selector: FocusEvent.() -> Boolean): Listener<FocusEvent, T> = subscribe(BLUR, selector = selector)
 
     /**
-     * occurs when the dragged element enters the drop target
+     * occurs when the browser can start playing the media (when it has buffered enough to begin)
      */
-    val dragenters get() = subscribe<DragEvent>("dragenter")
+    val canplays: Listener<Event, T> get() = subscribe(CANPLAY)
 
     /**
-     * occurs when the dragged element leaves the drop target
+     * occurs when the browser can start playing the media (when it has buffered enough to begin)
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
      */
-    val dragleaves get() = subscribe<DragEvent>("dragleave")
+    fun canplays(init: Event.() -> Unit): Listener<Event, T> = subscribe(CANPLAY) { init(); true }
 
     /**
-     * occurs when the dragged element is over the drop target
+     * occurs when the browser can start playing the media (when it has buffered enough to begin)
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
      */
-    val dragovers get() = subscribe<DragEvent>("dragover")
+    fun canplaysIf(selector: Event.() -> Boolean): Listener<Event, T> = subscribe(CANPLAY, selector = selector)
 
     /**
-     * occurs when the user starts to drag an element
+     * occurs when the browser can play through the media without stopping for buffering
      */
-    val dragstarts get() = subscribe<DragEvent>("dragstart")
+    val canplaythroughs: Listener<Event, T> get() = subscribe(CANPLAYTHROUGH)
 
     /**
-     * occurs when the dragged element is dropped on the drop target
+     * occurs when the browser can play through the media without stopping for buffering
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
      */
-    val drops get() = subscribe<DragEvent>("drop")
+    fun canplaythroughs(init: Event.() -> Unit): Listener<Event, T> = subscribe(CANPLAYTHROUGH) { init(); true }
 
     /**
-     * occurs when the duration of the media is changed
+     * occurs when the browser can play through the media without stopping for buffering
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
      */
-    val durationchanges get() = subscribe<Event>("durationchange")
+    fun canplaythroughsIf(selector: Event.() -> Boolean): Listener<Event, T> =
+        subscribe(CANPLAYTHROUGH, selector = selector)
 
     /**
-     * occurs when the media has reach the end (useful for messages like "thanks for listening")
+     * occurs when the content of a form element, the selection, or the checked state have changed
+     * (for `<input>`, `<select>`, and `<textarea>`)
      */
-    val endeds get() = subscribe<Event>("ended")
+    val changes: Listener<Event, T> get() = subscribe(CHANGE)
 
     /**
-     * occurs when an element gets focus
+     * occurs when the content of a form element, the selection, or the checked state have changed
+     * (for `<input>`, `<select>`, and `<textarea>`)
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
      */
-    val focuss get() = subscribe<FocusEvent>("focus")
+    fun changes(init: Event.() -> Unit): Listener<Event, T> = subscribe(CHANGE) { init(); true }
 
     /**
-     * occurs when an element is about to get focus
+     * occurs when the content of a form element, the selection, or the checked state have changed
+     * (for `<input>`, `<select>`, and `<textarea>`)
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
      */
-    val focusins get() = subscribe<FocusEvent>("focusin")
+    fun changesIf(selector: Event.() -> Boolean): Listener<Event, T> = subscribe(CHANGE, selector = selector)
 
     /**
-     * occurs when an element is about to lose focus
+     * occurs when the user clicks on an element
      */
-    val focusouts get() = subscribe<FocusEvent>("focusout")
+    val clicks: Listener<MouseEvent, T> get() = subscribe(CLICK)
 
     /**
-     * occurs when an element is displayed in fullscreen mode
+     * occurs when the user clicks on an element
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [MouseEvent]s on its [Flow]
      */
-    val fullscreenchanges get() = subscribe<Event>("fullscreenchange")
+    fun clicks(init: MouseEvent.() -> Unit): Listener<MouseEvent, T> = subscribe(CLICK) { init(); true }
 
     /**
-     * occurs when an element can not be displayed in fullscreen mode
+     * occurs when the user clicks on an element
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [MouseEvent]s on its [Flow]
      */
-    val fullscreenerrors get() = subscribe<Event>("fullscreenerror")
+    fun clicksIf(selector: MouseEvent.() -> Boolean): Listener<MouseEvent, T> = subscribe(CLICK, selector = selector)
 
     /**
-     * occurs when there has been changes to the anchor part of a URL
+     * occurs when the user right-clicks on an element to open a context menu
      */
-    val hashchanges get() = subscribe<HashChangeEvent>("hashchange")
+    val contextmenus: Listener<MouseEvent, T> get() = subscribe(CONTEXTMENU)
 
     /**
-     * occurs when an element gets user input has to use Event as type because Chrome and Safari offer Events instead
-     * of InputEvents when selecting from a datalist
+     * occurs when the user right-clicks on an element to open a context menu
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [MouseEvent]s on its [Flow]
      */
-    val inputs get() = subscribe<Event>("input")
+    fun contextmenus(init: MouseEvent.() -> Unit): Listener<MouseEvent, T> = subscribe(CONTEXTMENU) { init(); true }
 
     /**
-     * occurs when an element is invalid
+     * occurs when the user right-clicks on an element to open a context menu
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [MouseEvent]s on its [Flow]
      */
-    val invalids get() = subscribe<Event>("invalid")
+    fun contextmenusIf(selector: MouseEvent.() -> Boolean): Listener<MouseEvent, T> =
+        subscribe(CONTEXTMENU, selector = selector)
 
     /**
-     * occurs when the user is pressing a key
+     * occurs when the user copies the content of an element
      */
-    val keydowns get() = subscribe<KeyboardEvent>("keydown")
+    val copys: Listener<ClipboardEvent, T> get() = subscribe(COPY)
 
     /**
-     * occurs when the user presses a key
+     * occurs when the user copies the content of an element
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [ClipboardEvent]s on its [Flow]
      */
-    val keypresss get() = subscribe<KeyboardEvent>("keypress")
+    fun copys(init: ClipboardEvent.() -> Unit): Listener<ClipboardEvent, T> = subscribe(COPY) { init(); true }
 
     /**
-     * occurs when the user releases a key
+     * occurs when the user copies the content of an element
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [ClipboardEvent]s on its [Flow]
      */
-    val keyups get() = subscribe<KeyboardEvent>("keyup")
+    fun copysIf(selector: ClipboardEvent.() -> Boolean): Listener<ClipboardEvent, T> =
+        subscribe(COPY, selector = selector)
 
     /**
-     * occurs when an object has loaded
+     * occurs when the user cuts the content of an element
      */
-    val loads get() = subscribe<Event>("load")
+    val cuts: Listener<ClipboardEvent, T> get() = subscribe(CUT)
 
     /**
-     * occurs when media data is loaded
+     * occurs when the user cuts the content of an element
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [ClipboardEvent]s on its [Flow]
      */
-    val loadeddatas get() = subscribe<Event>("loadeddata")
+    fun cuts(init: ClipboardEvent.() -> Unit): Listener<ClipboardEvent, T> = subscribe(CUT) { init(); true }
 
     /**
-     * occurs when metadata (like dimensions and duration) are loaded
+     * occurs when the user cuts the content of an element
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [ClipboardEvent]s on its [Flow]
      */
-    val loadedmetadatas get() = subscribe<Event>("loadedmetadata")
+    fun cutsIf(selector: ClipboardEvent.() -> Boolean): Listener<ClipboardEvent, T> =
+        subscribe(CUT, selector = selector)
 
     /**
-     * occurs when the pointer is moved onto an element
+     * occurs when the user double-clicks on an element
      */
-    val mouseenters get() = subscribe<MouseEvent>("mouseenter")
+    val dblclicks: Listener<MouseEvent, T> get() = subscribe(DBLCLICK)
 
     /**
-     * occurs when the pointer is moved out of an element
+     * occurs when the user double-clicks on an element
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [MouseEvent]s on its [Flow]
      */
-    val mouseleaves get() = subscribe<MouseEvent>("mouseleave")
+    fun dblclicks(init: MouseEvent.() -> Unit): Listener<MouseEvent, T> = subscribe(DBLCLICK) { init(); true }
 
     /**
-     * occurs when the pointer is moving while it is over an element
+     * occurs when the user double-clicks on an element
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [MouseEvent]s on its [Flow]
      */
-    val mousemoves get() = subscribe<MouseEvent>("mousemove")
+    fun dblclicksIf(selector: MouseEvent.() -> Boolean): Listener<MouseEvent, T> =
+        subscribe(DBLCLICK, selector = selector)
 
     /**
-     * occurs when the pointer is moved onto an element, or onto one of its children
+     * occurs when an element is being dragged
      */
-    val mouseovers get() = subscribe<MouseEvent>("mouseover")
+    val drags: Listener<DragEvent, T> get() = subscribe(DRAG)
 
     /**
-     * occurs when a user moves the mouse pointer out of an element, or out of one of its children
+     * occurs when an element is being dragged
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [DragEvent]s on its [Flow]
      */
-    val mouseouts get() = subscribe<MouseEvent>("mouseout")
+    fun drags(init: DragEvent.() -> Unit): Listener<DragEvent, T> = subscribe(DRAG) { init(); true }
 
     /**
-     * occurs when a user releases a mouse button over an element
+     * occurs when an element is being dragged
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [DragEvent]s on its [Flow]
      */
-    val mouseups get() = subscribe<MouseEvent>("mouseup")
+    fun dragsIf(selector: DragEvent.() -> Boolean): Listener<DragEvent, T> = subscribe(DRAG, selector = selector)
 
     /**
-     * occurs when the browser starts to work offline
+     * occurs when the user has finished dragging an element
      */
-    val offlines get() = subscribe<Event>("offline")
+    val dragends: Listener<DragEvent, T> get() = subscribe(DRAGEND)
 
     /**
-     * occurs when the browser starts to work online
+     * occurs when the user has finished dragging an element
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [DragEvent]s on its [Flow]
      */
-    val onlines get() = subscribe<Event>("online")
+    fun dragends(init: DragEvent.() -> Unit): Listener<DragEvent, T> = subscribe(DRAGEND) { init(); true }
 
     /**
-     * occurs when a connection with the event source is opened
+     * occurs when the user has finished dragging an element
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [DragEvent]s on its [Flow]
      */
-    val opens get() = subscribe<Event>("open")
+    fun dragendsIf(selector: DragEvent.() -> Boolean): Listener<DragEvent, T> = subscribe(DRAGEND, selector = selector)
 
     /**
-     * occurs when the user navigates away from a webpage
+     * occurs when the dragged element enters the drop target
      */
-    val pagehides get() = subscribe<PageTransitionEvent>("pagehide")
+    val dragenters: Listener<DragEvent, T> get() = subscribe(DRAGENTER)
 
     /**
-     * occurs when the user navigates to a webpage
+     * occurs when the dragged element enters the drop target
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [DragEvent]s on its [Flow]
      */
-    val pageshows get() = subscribe<PageTransitionEvent>("pageshow")
+    fun dragenters(init: DragEvent.() -> Unit): Listener<DragEvent, T> = subscribe(DRAGENTER) { init(); true }
 
     /**
-     * occurs when the user pastes some content in an element
+     * occurs when the dragged element enters the drop target
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [DragEvent]s on its [Flow]
      */
-    val pastes get() = subscribe<ClipboardEvent>("paste")
+    fun dragentersIf(selector: DragEvent.() -> Boolean): Listener<DragEvent, T> =
+        subscribe(DRAGENTER, selector = selector)
 
     /**
-     * occurs when the browser starts looking for the specified media
+     * occurs when the dragged element leaves the drop target
      */
-    val loadstarts get() = subscribe<ProgressEvent>("loadstart")
+    val dragleaves: Listener<DragEvent, T> get() = subscribe(DRAGLEAVE)
 
     /**
-     * occurs when a message is received through the event source
+     * occurs when the dragged element leaves the drop target
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [DragEvent]s on its [Flow]
      */
-    val messages get() = subscribe<Event>("message")
+    fun dragleaves(init: DragEvent.() -> Unit): Listener<DragEvent, T> = subscribe(DRAGLEAVE) { init(); true }
 
     /**
-     * occurs when the user presses a mouse button over an element
+     * occurs when the dragged element leaves the drop target
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [DragEvent]s on its [Flow]
      */
-    val mousedowns get() = subscribe<MouseEvent>("mousedown")
+    fun dragleavesIf(selector: DragEvent.() -> Boolean): Listener<DragEvent, T> =
+        subscribe(DRAGLEAVE, selector = selector)
 
     /**
-     * occurs when the media is paused either by the user or programmatically
+     * occurs when the dragged element is over the drop target
      */
-    val pauses get() = subscribe<Event>("pause")
+    val dragovers: Listener<DragEvent, T> get() = subscribe(DRAGOVER)
 
     /**
-     * occurs when the media has been started or is no longer paused
+     * occurs when the dragged element is over the drop target
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [DragEvent]s on its [Flow]
      */
-    val plays get() = subscribe<Event>("play")
+    fun dragovers(init: DragEvent.() -> Unit): Listener<DragEvent, T> = subscribe(DRAGOVER) { init(); true }
 
     /**
-     * occurs when the media is playing after having been paused or stopped for buffering
+     * occurs when the dragged element is over the drop target
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [DragEvent]s on its [Flow]
      */
-    val playings get() = subscribe<Event>("playing")
+    fun dragoversIf(selector: DragEvent.() -> Boolean): Listener<DragEvent, T> =
+        subscribe(DRAGOVER, selector = selector)
 
     /**
-     * occurs when the window's history changes
+     * occurs when the user starts to drag an element
      */
-    val popstates get() = subscribe<PopStateEvent>("popstate")
+    val dragstarts: Listener<DragEvent, T> get() = subscribe(DRAGSTART)
 
     /**
-     * occurs when the browser is in the process of getting the media data (downloading the media)
+     * occurs when the user starts to drag an element
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [DragEvent]s on its [Flow]
      */
-    val progresss get() = subscribe<Event>("progress")
+    fun dragstarts(init: DragEvent.() -> Unit): Listener<DragEvent, T> = subscribe(DRAGSTART) { init(); true }
 
     /**
-     * occurs when the playing speed of the media is changed
+     * occurs when the user starts to drag an element
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [DragEvent]s on its [Flow]
      */
-    val ratechanges get() = subscribe<Event>("ratechange")
+    fun dragstartsIf(selector: DragEvent.() -> Boolean): Listener<DragEvent, T> =
+        subscribe(DRAGSTART, selector = selector)
 
     /**
-     * occurs when the document view is resized
+     * occurs when the dragged element is dropped on the drop target
      */
-    val resizes get() = subscribe<Event>("resize")
+    val drops: Listener<DragEvent, T> get() = subscribe(DROP)
 
     /**
-     * occurs when a form is reset
+     * occurs when the dragged element is dropped on the drop target
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [DragEvent]s on its [Flow]
      */
-    val resets get() = subscribe<Event>("reset")
+    fun drops(init: DragEvent.() -> Unit): Listener<DragEvent, T> = subscribe(DROP) { init(); true }
 
     /**
-     * occurs when an element's scrollbar is being scrolled
+     * occurs when the dragged element is dropped on the drop target
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [DragEvent]s on its [Flow]
      */
-    val scrolls get() = subscribe<Event>("scroll")
+    fun dropsIf(selector: DragEvent.() -> Boolean): Listener<DragEvent, T> = subscribe(DROP, selector = selector)
 
     /**
-     * occurs when the user writes something in a search field (for <input="search">)
+     * occurs when the duration of the media is changed
      */
-    val searchs get() = subscribe<Event>("search")
+    val durationchanges: Listener<Event, T> get() = subscribe(DURATIONCHANGE)
 
     /**
-     * occurs when the user is finished moving/skipping to a new position in the media
+     * occurs when the duration of the media is changed
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
      */
-    val seekeds get() = subscribe<Event>("seeked")
+    fun durationchanges(init: Event.() -> Unit): Listener<Event, T> = subscribe(DURATIONCHANGE) { init(); true }
 
     /**
-     * occurs when the user starts moving/skipping to a new position in the media
+     * occurs when the duration of the media is changed
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
      */
-    val seekings get() = subscribe<Event>("seeking")
+    fun durationchangesIf(selector: Event.() -> Boolean): Listener<Event, T> =
+        subscribe(DURATIONCHANGE, selector = selector)
 
     /**
-     * occurs after the user selects some text (for <input> and <textarea>)
+     * occurs when the media has reach the end (useful for messages like "thanks for listening")
      */
-    val selects get() = subscribe<Event>("select")
+    val endeds: Listener<Event, T> get() = subscribe(ENDED)
 
     /**
-     * occurs when a <menu> element is shown as a context menu
+     * occurs when the media has reach the end (useful for messages like "thanks for listening")
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
      */
-    val shows get() = subscribe<Event>("show")
+    fun endeds(init: Event.() -> Unit): Listener<Event, T> = subscribe(ENDED) { init(); true }
 
     /**
-     * occurs when the browser is trying to get media data, but data is not available
+     * occurs when the media has reach the end (useful for messages like "thanks for listening")
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
      */
-    val stalleds get() = subscribe<Event>("stalled")
+    fun endedsIf(selector: Event.() -> Boolean): Listener<Event, T> = subscribe(ENDED, selector = selector)
 
     /**
-     * occurs when a Web Storage area is updated
+     * occurs when an element gets focus
      */
-    val storages get() = subscribe<StorageEvent>("storage")
+    val focuss: Listener<FocusEvent, T> get() = subscribe(FOCUS)
 
     /**
-     * occurs when a form is submitted
+     * occurs when an element gets focus
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [FocusEvent]s on its [Flow]
      */
-    val submits get() = subscribe<Event>("submit")
+    fun focuss(init: FocusEvent.() -> Unit): Listener<FocusEvent, T> = subscribe(FOCUS) { init(); true }
 
     /**
-     * occurs when the browser is intentionally not getting media data
+     * occurs when an element gets focus
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [FocusEvent]s on its [Flow]
      */
-    val suspends get() = subscribe<Event>("suspend")
+    fun focussIf(selector: FocusEvent.() -> Boolean): Listener<FocusEvent, T> = subscribe(FOCUS, selector = selector)
 
     /**
-     * occurs when the playing position has changed (like when the user fast forwards to a different point in the media)
+     * occurs when an element is about to get focus
      */
-    val timeupdates get() = subscribe<Event>("timeupdate")
+    val focusins: Listener<FocusEvent, T> get() = subscribe(FOCUSIN)
 
     /**
-     * occurs when the user opens or closes the <details> element
+     * occurs when an element is about to get focus
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [FocusEvent]s on its [Flow]
      */
-    val toggles get() = subscribe<Event>("toggle")
+    fun focusins(init: FocusEvent.() -> Unit): Listener<FocusEvent, T> = subscribe(FOCUSIN) { init(); true }
 
     /**
-     * occurs when the touch is interrupted
+     * occurs when an element is about to get focus
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [FocusEvent]s on its [Flow]
      */
-    val touchcancels get() = subscribe<TouchEvent>("touchcancel")
+    fun focusinsIf(selector: FocusEvent.() -> Boolean): Listener<FocusEvent, T> =
+        subscribe(FOCUSIN, selector = selector)
 
     /**
-     * occurs when a finger is removed from a touch screen
+     * occurs when an element is about to lose focus
      */
-    val touchends get() = subscribe<TouchEvent>("touchend")
+    val focusouts: Listener<FocusEvent, T> get() = subscribe(FOCUSOUT)
 
     /**
-     * occurs when a finger is dragged across the screen
+     * occurs when an element is about to lose focus
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [FocusEvent]s on its [Flow]
      */
-    val touchmoves get() = subscribe<TouchEvent>("touchmove")
+    fun focusouts(init: FocusEvent.() -> Unit): Listener<FocusEvent, T> = subscribe(FOCUSOUT) { init(); true }
 
     /**
-     * occurs when a finger is placed on a touch screen
+     * occurs when an element is about to lose focus
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [FocusEvent]s on its [Flow]
      */
-    val touchstarts get() = subscribe<TouchEvent>("touchstart")
+    fun focusoutsIf(selector: FocusEvent.() -> Boolean): Listener<FocusEvent, T> =
+        subscribe(FOCUSOUT, selector = selector)
 
     /**
-     * occurs once a page has unloaded (for <body>)
+     * occurs when an element is displayed in fullscreen mode
+     */
+    val fullscreenchanges: Listener<Event, T> get() = subscribe(FULLSCREENCHANGE)
+
+    /**
+     * occurs when an element is displayed in fullscreen mode
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
+     */
+    fun fullscreenchanges(init: Event.() -> Unit): Listener<Event, T> = subscribe(FULLSCREENCHANGE) { init(); true }
+
+    /**
+     * occurs when an element is displayed in fullscreen mode
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
+     */
+    fun fullscreenchangesIf(selector: Event.() -> Boolean): Listener<Event, T> =
+        subscribe(FULLSCREENCHANGE, selector = selector)
+
+    /**
+     * occurs when an element can not be displayed in fullscreen mode
+     */
+    val fullscreenerrors: Listener<Event, T> get() = subscribe(FULLSCREENERROR)
+
+    /**
+     * occurs when an element can not be displayed in fullscreen mode
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
+     */
+    fun fullscreenerrors(init: Event.() -> Unit): Listener<Event, T> = subscribe(FULLSCREENERROR) { init(); true }
+
+    /**
+     * occurs when an element can not be displayed in fullscreen mode
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
+     */
+    fun fullscreenerrorsIf(selector: Event.() -> Boolean): Listener<Event, T> =
+        subscribe(FULLSCREENERROR, selector = selector)
+
+    /**
+     * occurs when there has been changes to the anchor part of a URL
+     */
+    val hashchanges: Listener<HashChangeEvent, T> get() = subscribe(HASHCHANGE)
+
+    /**
+     * occurs when there has been changes to the anchor part of a URL
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [HashChangeEvent]s on its [Flow]
+     */
+    fun hashchanges(init: HashChangeEvent.() -> Unit): Listener<HashChangeEvent, T> =
+        subscribe(HASHCHANGE) { init(); true }
+
+    /**
+     * occurs when there has been changes to the anchor part of a URL
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [HashChangeEvent]s on its [Flow]
+     */
+    fun hashchangesIf(selector: HashChangeEvent.() -> Boolean): Listener<HashChangeEvent, T> =
+        subscribe(HASHCHANGE, selector = selector)
+
+    /**
+     * occurs when an element gets user input has to use Event as type because Chrome and Safari offer Events instead
+     * of InputEvents when selecting from a datalist
+     */
+    val inputs: Listener<Event, T> get() = subscribe(INPUT)
+
+    /**
+     * occurs when an element gets user input has to use Event as type because Chrome and Safari offer Events instead
+     * of InputEvents when selecting from a datalist
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
+     */
+    fun inputs(init: Event.() -> Unit): Listener<Event, T> = subscribe(INPUT) { init(); true }
+
+    /**
+     * occurs when an element gets user input has to use Event as type because Chrome and Safari offer Events instead
+     * of InputEvents when selecting from a datalist
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
+     */
+    fun inputsIf(selector: Event.() -> Boolean): Listener<Event, T> = subscribe(INPUT, selector = selector)
+
+    /**
+     * occurs when an element is invalid
+     */
+    val invalids: Listener<Event, T> get() = subscribe(INVALID)
+
+    /**
+     * occurs when an element is invalid
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
+     */
+    fun invalids(init: Event.() -> Unit): Listener<Event, T> = subscribe(INVALID) { init(); true }
+
+    /**
+     * occurs when an element is invalid
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
+     */
+    fun invalidsIf(selector: Event.() -> Boolean): Listener<Event, T> = subscribe(INVALID, selector = selector)
+
+    /**
+     * occurs when the user is pressing a key
+     */
+    val keydowns: Listener<KeyboardEvent, T> get() = subscribe(KEYDOWN)
+
+    /**
+     * occurs when the user is pressing a key
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [KeyboardEvent]s on its [Flow]
+     */
+    fun keydowns(init: KeyboardEvent.() -> Unit): Listener<KeyboardEvent, T> = subscribe(KEYDOWN) { init(); true }
+
+    /**
+     * occurs when the user is pressing a key
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [KeyboardEvent]s on its [Flow]
+     */
+    fun keydownsIf(selector: KeyboardEvent.() -> Boolean): Listener<KeyboardEvent, T> =
+        subscribe(KEYDOWN, selector = selector)
+
+    /**
+     * occurs when the user presses a key
+     */
+    val keypresss: Listener<KeyboardEvent, T> get() = subscribe(KEYPRESS)
+
+    /**
+     * occurs when the user presses a key
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [KeyboardEvent]s on its [Flow]
+     */
+    fun keypresss(init: KeyboardEvent.() -> Unit): Listener<KeyboardEvent, T> = subscribe(KEYPRESS) { init(); true }
+
+    /**
+     * occurs when the user presses a key
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [KeyboardEvent]s on its [Flow]
+     */
+    fun keypresssIf(selector: KeyboardEvent.() -> Boolean): Listener<KeyboardEvent, T> =
+        subscribe(KEYPRESS, selector = selector)
+
+    /**
+     * occurs when the user releases a key
+     */
+    val keyups: Listener<KeyboardEvent, T> get() = subscribe(KEYUP)
+
+    /**
+     * occurs when the user releases a key
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [KeyboardEvent]s on its [Flow]
+     */
+    fun keyups(init: KeyboardEvent.() -> Unit): Listener<KeyboardEvent, T> = subscribe(KEYUP) { init(); true }
+
+    /**
+     * occurs when the user releases a key
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [KeyboardEvent]s on its [Flow]
+     */
+    fun keyupsIf(selector: KeyboardEvent.() -> Boolean): Listener<KeyboardEvent, T> =
+        subscribe(KEYUP, selector = selector)
+
+    /**
+     * occurs when an object has loaded
+     */
+    val loads: Listener<Event, T> get() = subscribe(LOAD)
+
+    /**
+     * occurs when an object has loaded
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
+     */
+    fun loads(init: Event.() -> Unit): Listener<Event, T> = subscribe(LOAD) { init(); true }
+
+    /**
+     * occurs when an object has loaded
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
+     */
+    fun loadsIf(selector: Event.() -> Boolean): Listener<Event, T> = subscribe(LOAD, selector = selector)
+
+    /**
+     * occurs when media data is loaded
+     */
+    val loadeddatas: Listener<Event, T> get() = subscribe(LOADEDDATA)
+
+    /**
+     * occurs when media data is loaded
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
+     */
+    fun loadeddatas(init: Event.() -> Unit): Listener<Event, T> = subscribe(LOADEDDATA) { init(); true }
+
+    /**
+     * occurs when media data is loaded
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
+     */
+    fun loadeddatasIf(selector: Event.() -> Boolean): Listener<Event, T> = subscribe(LOADEDDATA, selector = selector)
+
+    /**
+     * occurs when metadata (like dimensions and duration) are loaded
+     */
+    val loadedmetadatas: Listener<Event, T> get() = subscribe(LOADEDMETADATA)
+
+    /**
+     * occurs when metadata (like dimensions and duration) are loaded
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
+     */
+    fun loadedmetadatas(init: Event.() -> Unit): Listener<Event, T> = subscribe(LOADEDMETADATA) { init(); true }
+
+    /**
+     * occurs when metadata (like dimensions and duration) are loaded
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
+     */
+    fun loadedmetadatasIf(selector: Event.() -> Boolean): Listener<Event, T> =
+        subscribe(LOADEDMETADATA, selector = selector)
+
+    /**
+     * occurs when the pointer is moved onto an element
+     */
+    val mouseenters: Listener<MouseEvent, T> get() = subscribe(MOUSEENTER)
+
+    /**
+     * occurs when the pointer is moved onto an element
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [MouseEvent]s on its [Flow]
+     */
+    fun mouseenters(init: MouseEvent.() -> Unit): Listener<MouseEvent, T> = subscribe(MOUSEENTER) { init(); true }
+
+    /**
+     * occurs when the pointer is moved onto an element
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [MouseEvent]s on its [Flow]
+     */
+    fun mouseentersIf(selector: MouseEvent.() -> Boolean): Listener<MouseEvent, T> =
+        subscribe(MOUSEENTER, selector = selector)
+
+    /**
+     * occurs when the pointer is moved out of an element
+     */
+    val mouseleaves: Listener<MouseEvent, T> get() = subscribe(MOUSELEAVE)
+
+    /**
+     * occurs when the pointer is moved out of an element
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [MouseEvent]s on its [Flow]
+     */
+    fun mouseleaves(init: MouseEvent.() -> Unit): Listener<MouseEvent, T> = subscribe(MOUSELEAVE) { init(); true }
+
+    /**
+     * occurs when the pointer is moved out of an element
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [MouseEvent]s on its [Flow]
+     */
+    fun mouseleavesIf(selector: MouseEvent.() -> Boolean): Listener<MouseEvent, T> =
+        subscribe(MOUSELEAVE, selector = selector)
+
+    /**
+     * occurs when the pointer is moving while it is over an element
+     */
+    val mousemoves: Listener<MouseEvent, T> get() = subscribe(MOUSEMOVE)
+
+    /**
+     * occurs when the pointer is moving while it is over an element
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [MouseEvent]s on its [Flow]
+     */
+    fun mousemoves(init: MouseEvent.() -> Unit): Listener<MouseEvent, T> = subscribe(MOUSEMOVE) { init(); true }
+
+    /**
+     * occurs when the pointer is moving while it is over an element
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [MouseEvent]s on its [Flow]
+     */
+    fun mousemovesIf(selector: MouseEvent.() -> Boolean): Listener<MouseEvent, T> =
+        subscribe(MOUSEMOVE, selector = selector)
+
+    /**
+     * occurs when the pointer is moved onto an element, or onto one of its children
+     */
+    val mouseovers: Listener<MouseEvent, T> get() = subscribe(MOUSEOVER)
+
+    /**
+     * occurs when the pointer is moved onto an element, or onto one of its children
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [MouseEvent]s on its [Flow]
+     */
+    fun mouseovers(init: MouseEvent.() -> Unit): Listener<MouseEvent, T> = subscribe(MOUSEOVER) { init(); true }
+
+    /**
+     * occurs when the pointer is moved onto an element, or onto one of its children
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [MouseEvent]s on its [Flow]
+     */
+    fun mouseoversIf(selector: MouseEvent.() -> Boolean): Listener<MouseEvent, T> =
+        subscribe(MOUSEOVER, selector = selector)
+
+    /**
+     * occurs when a user moves the mouse pointer out of an element, or out of one of its children
+     */
+    val mouseouts: Listener<MouseEvent, T> get() = subscribe(MOUSEOUT)
+
+    /**
+     * occurs when a user moves the mouse pointer out of an element, or out of one of its children
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [MouseEvent]s on its [Flow]
+     */
+    fun mouseouts(init: MouseEvent.() -> Unit): Listener<MouseEvent, T> = subscribe(MOUSEOUT) { init(); true }
+
+    /**
+     * occurs when a user moves the mouse pointer out of an element, or out of one of its children
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [MouseEvent]s on its [Flow]
+     */
+    fun mouseoutsIf(selector: MouseEvent.() -> Boolean): Listener<MouseEvent, T> =
+        subscribe(MOUSEOUT, selector = selector)
+
+    /**
+     * occurs when a user releases a mouse button over an element
+     */
+    val mouseups: Listener<MouseEvent, T> get() = subscribe(MOUSEUP)
+
+    /**
+     * occurs when a user releases a mouse button over an element
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [MouseEvent]s on its [Flow]
+     */
+    fun mouseups(init: MouseEvent.() -> Unit): Listener<MouseEvent, T> = subscribe(MOUSEUP) { init(); true }
+
+    /**
+     * occurs when a user releases a mouse button over an element
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [MouseEvent]s on its [Flow]
+     */
+    fun mouseupsIf(selector: MouseEvent.() -> Boolean): Listener<MouseEvent, T> =
+        subscribe(MOUSEUP, selector = selector)
+
+    /**
+     * occurs when the browser starts to work offline
+     */
+    val offlines: Listener<Event, T> get() = subscribe(OFFLINE)
+
+    /**
+     * occurs when the browser starts to work offline
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
+     */
+    fun offlines(init: Event.() -> Unit): Listener<Event, T> = subscribe(OFFLINE) { init(); true }
+
+    /**
+     * occurs when the browser starts to work offline
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
+     */
+    fun offlinesIf(selector: Event.() -> Boolean): Listener<Event, T> = subscribe(OFFLINE, selector = selector)
+
+    /**
+     * occurs when the browser starts to work online
+     */
+    val onlines: Listener<Event, T> get() = subscribe(ONLINE)
+
+    /**
+     * occurs when the browser starts to work online
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
+     */
+    fun onlines(init: Event.() -> Unit): Listener<Event, T> = subscribe(ONLINE) { init(); true }
+
+    /**
+     * occurs when the browser starts to work online
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
+     */
+    fun onlinesIf(selector: Event.() -> Boolean): Listener<Event, T> = subscribe(ONLINE, selector = selector)
+
+    /**
+     * occurs when a connection with the event source is opened
+     */
+    val opens: Listener<Event, T> get() = subscribe(OPEN)
+
+    /**
+     * occurs when a connection with the event source is opened
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
+     */
+    fun opens(init: Event.() -> Unit): Listener<Event, T> = subscribe(OPEN) { init(); true }
+
+    /**
+     * occurs when a connection with the event source is opened
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
+     */
+    fun opensIf(selector: Event.() -> Boolean): Listener<Event, T> = subscribe(OPEN, selector = selector)
+
+    /**
+     * occurs when the user navigates away from a webpage
+     */
+    val pagehides: Listener<PageTransitionEvent, T> get() = subscribe(PAGEHIDE)
+
+    /**
+     * occurs when the user navigates away from a webpage
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [PageTransitionEvent]s on its [Flow]
+     */
+    fun pagehides(init: PageTransitionEvent.() -> Unit): Listener<PageTransitionEvent, T> =
+        subscribe(PAGEHIDE) { init(); true }
+
+    /**
+     * occurs when the user navigates away from a webpage
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [PageTransitionEvent]s on its [Flow]
+     */
+    fun pagehidesIf(selector: PageTransitionEvent.() -> Boolean): Listener<PageTransitionEvent, T> =
+        subscribe(PAGEHIDE, selector = selector)
+
+    /**
+     * occurs when the user navigates to a webpage
+     */
+    val pageshows: Listener<PageTransitionEvent, T> get() = subscribe(PAGESHOW)
+
+    /**
+     * occurs when the user navigates to a webpage
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [PageTransitionEvent]s on its [Flow]
+     */
+    fun pageshows(init: PageTransitionEvent.() -> Unit): Listener<PageTransitionEvent, T> =
+        subscribe(PAGESHOW) { init(); true }
+
+    /**
+     * occurs when the user navigates to a webpage
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [PageTransitionEvent]s on its [Flow]
+     */
+    fun pageshowsIf(selector: PageTransitionEvent.() -> Boolean): Listener<PageTransitionEvent, T> =
+        subscribe(PAGESHOW, selector = selector)
+
+    /**
+     * occurs when the user pastes some content in an element
+     */
+    val pastes: Listener<ClipboardEvent, T> get() = subscribe(PASTE)
+
+    /**
+     * occurs when the user pastes some content in an element
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [ClipboardEvent]s on its [Flow]
+     */
+    fun pastes(init: ClipboardEvent.() -> Unit): Listener<ClipboardEvent, T> = subscribe(PASTE) { init(); true }
+
+    /**
+     * occurs when the user pastes some content in an element
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [ClipboardEvent]s on its [Flow]
+     */
+    fun pastesIf(selector: ClipboardEvent.() -> Boolean): Listener<ClipboardEvent, T> =
+        subscribe(PASTE, selector = selector)
+
+    /**
+     * occurs when the browser starts looking for the specified media
+     */
+    val loadstarts: Listener<ProgressEvent, T> get() = subscribe(LOADSTART)
+
+    /**
+     * occurs when the browser starts looking for the specified media
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [ProgressEvent]s on its [Flow]
+     */
+    fun loadstarts(init: ProgressEvent.() -> Unit): Listener<ProgressEvent, T> = subscribe(LOADSTART) { init(); true }
+
+    /**
+     * occurs when the browser starts looking for the specified media
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [ProgressEvent]s on its [Flow]
+     */
+    fun loadstartsIf(selector: ProgressEvent.() -> Boolean): Listener<ProgressEvent, T> =
+        subscribe(LOADSTART, selector = selector)
+
+    /**
+     * occurs when a message is received through the event source
+     */
+    val messages: Listener<Event, T> get() = subscribe(MESSAGE)
+
+    /**
+     * occurs when a message is received through the event source
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
+     */
+    fun messages(init: Event.() -> Unit): Listener<Event, T> = subscribe(MESSAGE) { init(); true }
+
+    /**
+     * occurs when a message is received through the event source
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
+     */
+    fun messagesIf(selector: Event.() -> Boolean): Listener<Event, T> = subscribe(MESSAGE, selector = selector)
+
+    /**
+     * occurs when the user presses a mouse button over an element
+     */
+    val mousedowns: Listener<MouseEvent, T> get() = subscribe(MOUSEDOWN)
+
+    /**
+     * occurs when the user presses a mouse button over an element
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [MouseEvent]s on its [Flow]
+     */
+    fun mousedowns(init: MouseEvent.() -> Unit): Listener<MouseEvent, T> = subscribe(MOUSEDOWN) { init(); true }
+
+    /**
+     * occurs when the user presses a mouse button over an element
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [MouseEvent]s on its [Flow]
+     */
+    fun mousedownsIf(selector: MouseEvent.() -> Boolean): Listener<MouseEvent, T> =
+        subscribe(MOUSEDOWN, selector = selector)
+
+    /**
+     * occurs when the media is paused either by the user or programmatically
+     */
+    val pauses: Listener<Event, T> get() = subscribe(PAUSE)
+
+    /**
+     * occurs when the media is paused either by the user or programmatically
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
+     */
+    fun pauses(init: Event.() -> Unit): Listener<Event, T> = subscribe(PAUSE) { init(); true }
+
+    /**
+     * occurs when the media is paused either by the user or programmatically
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
+     */
+    fun pausesIf(selector: Event.() -> Boolean): Listener<Event, T> = subscribe(PAUSE, selector = selector)
+
+    /**
+     * occurs when the media has been started or is no longer paused
+     */
+    val plays: Listener<Event, T> get() = subscribe(PLAY)
+
+    /**
+     * occurs when the media has been started or is no longer paused
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
+     */
+    fun plays(init: Event.() -> Unit): Listener<Event, T> = subscribe(PLAY) { init(); true }
+
+    /**
+     * occurs when the media has been started or is no longer paused
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
+     */
+    fun playsIf(selector: Event.() -> Boolean): Listener<Event, T> = subscribe(PLAY, selector = selector)
+
+    /**
+     * occurs when the media is playing after having been paused or stopped for buffering
+     */
+    val playings: Listener<Event, T> get() = subscribe(PLAYING)
+
+    /**
+     * occurs when the media is playing after having been paused or stopped for buffering
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
+     */
+    fun playings(init: Event.() -> Unit): Listener<Event, T> = subscribe(PLAYING) { init(); true }
+
+    /**
+     * occurs when the media is playing after having been paused or stopped for buffering
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
+     */
+    fun playingsIf(selector: Event.() -> Boolean): Listener<Event, T> = subscribe(PLAYING, selector = selector)
+
+    /**
+     * occurs when the window's history changes
+     */
+    val popstates: Listener<PopStateEvent, T> get() = subscribe(POPSTATE)
+
+    /**
+     * occurs when the window's history changes
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [PopStateEvent]s on its [Flow]
+     */
+    fun popstates(init: PopStateEvent.() -> Unit): Listener<PopStateEvent, T> = subscribe(POPSTATE) { init(); true }
+
+    /**
+     * occurs when the window's history changes
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [PopStateEvent]s on its [Flow]
+     */
+    fun popstatesIf(selector: PopStateEvent.() -> Boolean): Listener<PopStateEvent, T> =
+        subscribe(POPSTATE, selector = selector)
+
+    /**
+     * occurs when the browser is in the process of getting the media data (downloading the media)
+     */
+    val progresss: Listener<Event, T> get() = subscribe(PROGRESS)
+
+    /**
+     * occurs when the browser is in the process of getting the media data (downloading the media)
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
+     */
+    fun progresss(init: Event.() -> Unit): Listener<Event, T> = subscribe(PROGRESS) { init(); true }
+
+    /**
+     * occurs when the browser is in the process of getting the media data (downloading the media)
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
+     */
+    fun progresssIf(selector: Event.() -> Boolean): Listener<Event, T> = subscribe(PROGRESS, selector = selector)
+
+    /**
+     * occurs when the playing speed of the media is changed
+     */
+    val ratechanges: Listener<Event, T> get() = subscribe(RATECHANGE)
+
+    /**
+     * occurs when the playing speed of the media is changed
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
+     */
+    fun ratechanges(init: Event.() -> Unit): Listener<Event, T> = subscribe(RATECHANGE) { init(); true }
+
+    /**
+     * occurs when the playing speed of the media is changed
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
+     */
+    fun ratechangesIf(selector: Event.() -> Boolean): Listener<Event, T> = subscribe(RATECHANGE, selector = selector)
+
+    /**
+     * occurs when the document view is resized
+     */
+    val resizes: Listener<Event, T> get() = subscribe(RESIZE)
+
+    /**
+     * occurs when the document view is resized
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
+     */
+    fun resizes(init: Event.() -> Unit): Listener<Event, T> = subscribe(RESIZE) { init(); true }
+
+    /**
+     * occurs when the document view is resized
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
+     */
+    fun resizesIf(selector: Event.() -> Boolean): Listener<Event, T> = subscribe(RESIZE, selector = selector)
+
+    /**
+     * occurs when a form is reset
+     */
+    val resets: Listener<Event, T> get() = subscribe(RESET)
+
+    /**
+     * occurs when a form is reset
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
+     */
+    fun resets(init: Event.() -> Unit): Listener<Event, T> = subscribe(RESET) { init(); true }
+
+    /**
+     * occurs when a form is reset
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
+     */
+    fun resetsIf(selector: Event.() -> Boolean): Listener<Event, T> = subscribe(RESET, selector = selector)
+
+    /**
+     * occurs when an element's scrollbar is being scrolled
+     */
+    val scrolls: Listener<Event, T> get() = subscribe(SCROLL)
+
+    /**
+     * occurs when an element's scrollbar is being scrolled
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
+     */
+    fun scrolls(init: Event.() -> Unit): Listener<Event, T> = subscribe(SCROLL) { init(); true }
+
+    /**
+     * occurs when an element's scrollbar is being scrolled
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
+     */
+    fun scrollsIf(selector: Event.() -> Boolean): Listener<Event, T> = subscribe(SCROLL, selector = selector)
+
+    /**
+     * occurs when the user writes something in a search field (for <input="search">)
+     */
+    val searchs: Listener<Event, T> get() = subscribe(SEARCH)
+
+    /**
+     * occurs when the user writes something in a search field (for <input="search">)
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
+     */
+    fun searchs(init: Event.() -> Unit): Listener<Event, T> = subscribe(SEARCH) { init(); true }
+
+    /**
+     * occurs when the user writes something in a search field (for <input="search">)
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
+     */
+    fun searchsIf(selector: Event.() -> Boolean): Listener<Event, T> = subscribe(SEARCH, selector = selector)
+
+    /**
+     * occurs when the user is finished moving/skipping to a new position in the media
+     */
+    val seekeds: Listener<Event, T> get() = subscribe(SEEKED)
+
+    /**
+     * occurs when the user is finished moving/skipping to a new position in the media
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
+     */
+    fun seekeds(init: Event.() -> Unit): Listener<Event, T> = subscribe(SEEKED) { init(); true }
+
+    /**
+     * occurs when the user is finished moving/skipping to a new position in the media
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
+     */
+    fun seekedsIf(selector: Event.() -> Boolean): Listener<Event, T> = subscribe(SEEKED, selector = selector)
+
+    /**
+     * occurs when the user starts moving/skipping to a new position in the media
+     */
+    val seekings: Listener<Event, T> get() = subscribe(SEEKING)
+
+    /**
+     * occurs when the user starts moving/skipping to a new position in the media
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
+     */
+    fun seekings(init: Event.() -> Unit): Listener<Event, T> = subscribe(SEEKING) { init(); true }
+
+    /**
+     * occurs when the user starts moving/skipping to a new position in the media
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
+     */
+    fun seekingsIf(selector: Event.() -> Boolean): Listener<Event, T> = subscribe(SEEKING, selector = selector)
+
+    /**
+     * occurs after the user selects some text (for <input> and <textarea>)
+     */
+    val selects: Listener<Event, T> get() = subscribe(SELECT)
+
+    /**
+     * occurs after the user selects some text (for <input> and <textarea>)
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
+     */
+    fun selects(init: Event.() -> Unit): Listener<Event, T> = subscribe(SELECT) { init(); true }
+
+    /**
+     * occurs after the user selects some text (for <input> and <textarea>)
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
+     */
+    fun selectsIf(selector: Event.() -> Boolean): Listener<Event, T> = subscribe(SELECT, selector = selector)
+
+    /**
+     * occurs when a <menu> element is shown as a context menu
+     */
+    val shows: Listener<Event, T> get() = subscribe(SHOW)
+
+    /**
+     * occurs when a <menu> element is shown as a context menu
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
+     */
+    fun shows(init: Event.() -> Unit): Listener<Event, T> = subscribe(SHOW) { init(); true }
+
+    /**
+     * occurs when a <menu> element is shown as a context menu
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
+     */
+    fun showsIf(selector: Event.() -> Boolean): Listener<Event, T> = subscribe(SHOW, selector = selector)
+
+    /**
+     * occurs when the browser is trying to get media data, but data is not available
+     */
+    val stalleds: Listener<Event, T> get() = subscribe(STALLED)
+
+    /**
+     * occurs when the browser is trying to get media data, but data is not available
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
+     */
+    fun stalleds(init: Event.() -> Unit): Listener<Event, T> = subscribe(STALLED) { init(); true }
+
+    /**
+     * occurs when the browser is trying to get media data, but data is not available
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
+     */
+    fun stalledsIf(selector: Event.() -> Boolean): Listener<Event, T> = subscribe(STALLED, selector = selector)
+
+    /**
+     * occurs when a Web Storage area is updated
+     */
+    val storages: Listener<StorageEvent, T> get() = subscribe(STORAGE)
+
+    /**
+     * occurs when a Web Storage area is updated
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [StorageEvent]s on its [Flow]
+     */
+    fun storages(init: StorageEvent.() -> Unit): Listener<StorageEvent, T> = subscribe(STORAGE) { init(); true }
+
+    /**
+     * occurs when a Web Storage area is updated
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [StorageEvent]s on its [Flow]
+     */
+    fun storagesIf(selector: StorageEvent.() -> Boolean): Listener<StorageEvent, T> =
+        subscribe(STORAGE, selector = selector)
+
+    /**
+     * occurs when a form is submitted
+     */
+    val submits: Listener<Event, T> get() = subscribe(SUBMIT)
+
+    /**
+     * occurs when a form is submitted
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
+     */
+    fun submits(init: Event.() -> Unit): Listener<Event, T> = subscribe(SUBMIT) { init(); true }
+
+    /**
+     * occurs when a form is submitted
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
+     */
+    fun submitsIf(selector: Event.() -> Boolean): Listener<Event, T> = subscribe(SUBMIT, selector = selector)
+
+    /**
+     * occurs when the browser is intentionally not getting media data
+     */
+    val suspends: Listener<Event, T> get() = subscribe(SUSPEND)
+
+    /**
+     * occurs when the browser is intentionally not getting media data
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
+     */
+    fun suspends(init: Event.() -> Unit): Listener<Event, T> = subscribe(SUSPEND) { init(); true }
+
+    /**
+     * occurs when the browser is intentionally not getting media data
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
+     */
+    fun suspendsIf(selector: Event.() -> Boolean): Listener<Event, T> = subscribe(SUSPEND, selector = selector)
+
+    /**
+     * occurs when the playing position has changed (like when the user fast forwards to a different point in the media)
+     */
+    val timeupdates: Listener<Event, T> get() = subscribe(TIMEUPDATE)
+
+    /**
+     * occurs when the playing position has changed (like when the user fast forwards to a different point in the media)
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
+     */
+    fun timeupdates(init: Event.() -> Unit): Listener<Event, T> = subscribe(TIMEUPDATE) { init(); true }
+
+    /**
+     * occurs when the playing position has changed (like when the user fast forwards to a different point in the media)
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
+     */
+    fun timeupdatesIf(selector: Event.() -> Boolean): Listener<Event, T> = subscribe(TIMEUPDATE, selector = selector)
+
+    /**
+     * occurs when the user opens or closes the <details> element
+     */
+    val toggles: Listener<Event, T> get() = subscribe(TOGGLE)
+
+    /**
+     * occurs when the user opens or closes the <details> element
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
+     */
+    fun toggles(init: Event.() -> Unit): Listener<Event, T> = subscribe(TOGGLE) { init(); true }
+
+    /**
+     * occurs when the user opens or closes the <details> element
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
+     */
+    fun togglesIf(selector: Event.() -> Boolean): Listener<Event, T> = subscribe(TOGGLE, selector = selector)
+
+    /**
+     * occurs when the touch is interrupted
+     */
+    val touchcancels: Listener<TouchEvent, T> get() = subscribe(TOUCHCANCEL)
+
+    /**
+     * occurs when the touch is interrupted
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [TouchEvent]s on its [Flow]
+     */
+    fun touchcancels(init: TouchEvent.() -> Unit): Listener<TouchEvent, T> = subscribe(TOUCHCANCEL) { init(); true }
+
+    /**
+     * occurs when the touch is interrupted
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [TouchEvent]s on its [Flow]
+     */
+    fun touchcancelsIf(selector: TouchEvent.() -> Boolean): Listener<TouchEvent, T> =
+        subscribe(TOUCHCANCEL, selector = selector)
+
+    /**
+     * occurs when a finger is removed from a touch screen
+     */
+    val touchends: Listener<TouchEvent, T> get() = subscribe(TOUCHEND)
+
+    /**
+     * occurs when a finger is removed from a touch screen
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [TouchEvent]s on its [Flow]
+     */
+    fun touchends(init: TouchEvent.() -> Unit): Listener<TouchEvent, T> = subscribe(TOUCHEND) { init(); true }
+
+    /**
+     * occurs when a finger is removed from a touch screen
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [TouchEvent]s on its [Flow]
+     */
+    fun touchendsIf(selector: TouchEvent.() -> Boolean): Listener<TouchEvent, T> =
+        subscribe(TOUCHEND, selector = selector)
+
+    /**
+     * occurs when a finger is dragged across the screen
+     */
+    val touchmoves: Listener<TouchEvent, T> get() = subscribe(TOUCHMOVE)
+
+    /**
+     * occurs when a finger is dragged across the screen
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [TouchEvent]s on its [Flow]
+     */
+    fun touchmoves(init: TouchEvent.() -> Unit): Listener<TouchEvent, T> = subscribe(TOUCHMOVE) { init(); true }
+
+    /**
+     * occurs when a finger is dragged across the screen
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [TouchEvent]s on its [Flow]
+     */
+    fun touchmovesIf(selector: TouchEvent.() -> Boolean): Listener<TouchEvent, T> =
+        subscribe(TOUCHMOVE, selector = selector)
+
+    /**
+     * occurs when a finger is placed on a touch screen
+     */
+    val touchstarts: Listener<TouchEvent, T> get() = subscribe(TOUCHSTART)
+
+    /**
+     * occurs when a finger is placed on a touch screen
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [TouchEvent]s on its [Flow]
+     */
+    fun touchstarts(init: TouchEvent.() -> Unit): Listener<TouchEvent, T> = subscribe(TOUCHSTART) { init(); true }
+
+    /**
+     * occurs when a finger is placed on a touch screen
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [TouchEvent]s on its [Flow]
+     */
+    fun touchstartsIf(selector: TouchEvent.() -> Boolean): Listener<TouchEvent, T> =
+        subscribe(TOUCHSTART, selector = selector)
+
+    /**
+     * occurs once a page has unloaded (for <body>)
+     */
+    val unloads: Listener<Event, T> get() = subscribe(UNLOAD)
+
+    /**
+     * occurs once a page has unloaded (for <body>)
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
+     */
+    fun unloads(init: Event.() -> Unit): Listener<Event, T> = subscribe(UNLOAD) { init(); true }
+
+    /**
+     * occurs once a page has unloaded (for <body>)
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
+     */
+    fun unloadsIf(selector: Event.() -> Boolean): Listener<Event, T> = subscribe(UNLOAD, selector = selector)
+
+    /**
+     * occurs when the volume of the media has changed (includes setting the volume to "mute")
+     */
+    val volumechanges: Listener<Event, T> get() = subscribe(VOLUMECHANGE)
+
+    /**
+     * occurs when the volume of the media has changed (includes setting the volume to "mute")
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
+     */
+    fun volumechanges(init: Event.() -> Unit): Listener<Event, T> = subscribe(VOLUMECHANGE) { init(); true }
+
+    /**
+     * occurs when the volume of the media has changed (includes setting the volume to "mute")
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
+     */
+    fun volumechangesIf(selector: Event.() -> Boolean): Listener<Event, T> =
+        subscribe(VOLUMECHANGE, selector = selector)
+
+    /**
+     * occurs when the media has paused but is expected to resume (like when the media pauses to buffer more data)
+     */
+    val waitings: Listener<Event, T> get() = subscribe(WAITING)
+
+    /**
+     * occurs when the media has paused but is expected to resume (like when the media pauses to buffer more data)
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
+     */
+    fun waitings(init: Event.() -> Unit): Listener<Event, T> = subscribe(WAITING) { init(); true }
+
+    /**
+     * occurs when the media has paused but is expected to resume (like when the media pauses to buffer more data)
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
+     */
+    fun waitingsIf(selector: Event.() -> Boolean): Listener<Event, T> = subscribe(WAITING, selector = selector)
+
+    /**
+     * occurs when the mouse wheel rolls up or down over an element
+     */
+    val wheels: Listener<WheelEvent, T> get() = subscribe(WHEEL)
+
+    /**
+     * occurs when the mouse wheel rolls up or down over an element
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [WheelEvent]s on its [Flow]
+     */
+    fun wheels(init: WheelEvent.() -> Unit): Listener<WheelEvent, T> = subscribe(WHEEL) { init(); true }
+
+    /**
+     * occurs when the mouse wheel rolls up or down over an element
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [WheelEvent]s on its [Flow]
+     */
+    fun wheelsIf(selector: WheelEvent.() -> Boolean): Listener<WheelEvent, T> = subscribe(WHEEL, selector = selector)
+
+    /**
+     * occurs when the loading of a media is aborted
+     */
+    val abortsCaptured: Listener<Event, T> get() = subscribe(ABORT, true)
+
+    /**
+     * occurs when the loading of a media is aborted
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
+     */
+    fun abortsCaptured(init: Event.() -> Unit): Listener<Event, T> = subscribe(ABORT, true) { init(); true }
+
+    /**
+     * occurs when the loading of a media is aborted
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
+     */
+    fun abortsCapturedIf(selector: Event.() -> Boolean): Listener<Event, T> =
+        subscribe(ABORT, true, selector = selector)
+
+    /**
+     * occurs when a page has started printing, or if the print dialogue box has been closed
+     */
+    val afterprintsCaptured: Listener<Event, T> get() = subscribe(AFTERPRINT, true)
+
+    /**
+     * occurs when a page has started printing, or if the print dialogue box has been closed
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
+     */
+    fun afterprintsCaptured(init: Event.() -> Unit): Listener<Event, T> = subscribe(AFTERPRINT, true) { init(); true }
+
+    /**
+     * occurs when a page has started printing, or if the print dialogue box has been closed
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
+     */
+    fun afterprintsCapturedIf(selector: Event.() -> Boolean): Listener<Event, T> =
+        subscribe(AFTERPRINT, true, selector = selector)
+
+    /**
+     * occurs when a page is about to be printed
+     */
+    val beforeprintsCaptured: Listener<Event, T> get() = subscribe(BEFOREPRINT, true)
+
+    /**
+     * occurs when a page is about to be printed
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
+     */
+    fun beforeprintsCaptured(init: Event.() -> Unit): Listener<Event, T> = subscribe(BEFOREPRINT, true) { init(); true }
+
+    /**
+     * occurs when a page is about to be printed
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
+     */
+    fun beforeprintsCapturedIf(selector: Event.() -> Boolean): Listener<Event, T> =
+        subscribe(BEFOREPRINT, true, selector = selector)
+
+    /**
+     * occurs before the document is about to be unloaded
+     */
+    val beforeunloadsCaptured: Listener<Event, T> get() = subscribe(BEFOREUNLOAD, true)
+
+    /**
+     * occurs before the document is about to be unloaded
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
+     */
+    fun beforeunloadsCaptured(init: Event.() -> Unit): Listener<Event, T> =
+        subscribe(BEFOREUNLOAD, true) { init(); true }
+
+    /**
+     * occurs before the document is about to be unloaded
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
+     */
+    fun beforeunloadsCapturedIf(selector: Event.() -> Boolean): Listener<Event, T> =
+        subscribe(BEFOREUNLOAD, true, selector = selector)
+
+    /**
+     * occurs when an element loses focus
+     */
+    val blursCaptured: Listener<FocusEvent, T> get() = subscribe(BLUR, true)
+
+    /**
+     * occurs when an element loses focus
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [FocusEvent]s on its [Flow]
+     */
+    fun blursCaptured(init: FocusEvent.() -> Unit): Listener<FocusEvent, T> = subscribe(BLUR, true) { init(); true }
+
+    /**
+     * occurs when an element loses focus
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [FocusEvent]s on its [Flow]
+     */
+    fun blursCapturedIf(selector: FocusEvent.() -> Boolean): Listener<FocusEvent, T> =
+        subscribe(BLUR, true, selector = selector)
+
+    /**
+     * occurs when the browser can start playing the media (when it has buffered enough to begin)
+     */
+    val canplaysCaptured: Listener<Event, T> get() = subscribe(CANPLAY, true)
+
+    /**
+     * occurs when the browser can start playing the media (when it has buffered enough to begin)
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
+     */
+    fun canplaysCaptured(init: Event.() -> Unit): Listener<Event, T> = subscribe(CANPLAY, true) { init(); true }
+
+    /**
+     * occurs when the browser can start playing the media (when it has buffered enough to begin)
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
+     */
+    fun canplaysCapturedIf(selector: Event.() -> Boolean): Listener<Event, T> =
+        subscribe(CANPLAY, true, selector = selector)
+
+    /**
+     * occurs when the browser can play through the media without stopping for buffering
+     */
+    val canplaythroughsCaptured: Listener<Event, T> get() = subscribe(CANPLAYTHROUGH, true)
+
+    /**
+     * occurs when the browser can play through the media without stopping for buffering
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
+     */
+    fun canplaythroughsCaptured(init: Event.() -> Unit): Listener<Event, T> =
+        subscribe(CANPLAYTHROUGH, true) { init(); true }
+
+    /**
+     * occurs when the browser can play through the media without stopping for buffering
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
+     */
+    fun canplaythroughsCapturedIf(selector: Event.() -> Boolean): Listener<Event, T> =
+        subscribe(CANPLAYTHROUGH, true, selector = selector)
+
+    /**
+     * occurs when the content of a form element, the selection, or the checked state have changed
+     * (for `<input>`, `<select>`, and `<textarea>`)
+     */
+    val changesCaptured: Listener<Event, T> get() = subscribe(CHANGE, true)
+
+    /**
+     * occurs when the content of a form element, the selection, or the checked state have changed
+     * (for `<input>`, `<select>`, and `<textarea>`)
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
+     */
+    fun changesCaptured(init: Event.() -> Unit): Listener<Event, T> = subscribe(CHANGE, true) { init(); true }
+
+    /**
+     * occurs when the content of a form element, the selection, or the checked state have changed
+     * (for `<input>`, `<select>`, and `<textarea>`)
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
+     */
+    fun changesCapturedIf(selector: Event.() -> Boolean): Listener<Event, T> =
+        subscribe(CHANGE, true, selector = selector)
+
+    /**
+     * occurs when the user clicks on an element
+     */
+    val clicksCaptured: Listener<MouseEvent, T> get() = subscribe(CLICK, true)
+
+    /**
+     * occurs when the user clicks on an element
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [MouseEvent]s on its [Flow]
+     */
+    fun clicksCaptured(init: MouseEvent.() -> Unit): Listener<MouseEvent, T> = subscribe(CLICK, true) { init(); true }
+
+    /**
+     * occurs when the user clicks on an element
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [MouseEvent]s on its [Flow]
+     */
+    fun clicksCapturedIf(selector: MouseEvent.() -> Boolean): Listener<MouseEvent, T> =
+        subscribe(CLICK, true, selector = selector)
+
+    /**
+     * occurs when the user right-clicks on an element to open a context menu
+     */
+    val contextmenusCaptured: Listener<MouseEvent, T> get() = subscribe(CONTEXTMENU, true)
+
+    /**
+     * occurs when the user right-clicks on an element to open a context menu
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [MouseEvent]s on its [Flow]
+     */
+    fun contextmenusCaptured(init: MouseEvent.() -> Unit): Listener<MouseEvent, T> =
+        subscribe(CONTEXTMENU, true) { init(); true }
+
+    /**
+     * occurs when the user right-clicks on an element to open a context menu
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [MouseEvent]s on its [Flow]
+     */
+    fun contextmenusCapturedIf(selector: MouseEvent.() -> Boolean): Listener<MouseEvent, T> =
+        subscribe(CONTEXTMENU, true, selector = selector)
+
+    /**
+     * occurs when the user copies the content of an element
+     */
+    val copysCaptured: Listener<ClipboardEvent, T> get() = subscribe(COPY, true)
+
+    /**
+     * occurs when the user copies the content of an element
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [ClipboardEvent]s on its [Flow]
+     */
+    fun copysCaptured(init: ClipboardEvent.() -> Unit): Listener<ClipboardEvent, T> =
+        subscribe(COPY, true) { init(); true }
+
+    /**
+     * occurs when the user copies the content of an element
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [ClipboardEvent]s on its [Flow]
+     */
+    fun copysCapturedIf(selector: ClipboardEvent.() -> Boolean): Listener<ClipboardEvent, T> =
+        subscribe(COPY, true, selector = selector)
+
+    /**
+     * occurs when the user cuts the content of an element
+     */
+    val cutsCaptured: Listener<ClipboardEvent, T> get() = subscribe(CUT, true)
+
+    /**
+     * occurs when the user cuts the content of an element
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [ClipboardEvent]s on its [Flow]
+     */
+    fun cutsCaptured(init: ClipboardEvent.() -> Unit): Listener<ClipboardEvent, T> =
+        subscribe(CUT, true) { init(); true }
+
+    /**
+     * occurs when the user cuts the content of an element
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [ClipboardEvent]s on its [Flow]
+     */
+    fun cutsCapturedIf(selector: ClipboardEvent.() -> Boolean): Listener<ClipboardEvent, T> =
+        subscribe(CUT, true, selector = selector)
+
+    /**
+     * occurs when the user double-clicks on an element
+     */
+    val dblclicksCaptured: Listener<MouseEvent, T> get() = subscribe(DBLCLICK, true)
+
+    /**
+     * occurs when the user double-clicks on an element
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [MouseEvent]s on its [Flow]
+     */
+    fun dblclicksCaptured(init: MouseEvent.() -> Unit): Listener<MouseEvent, T> =
+        subscribe(DBLCLICK, true) { init(); true }
+
+    /**
+     * occurs when the user double-clicks on an element
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [MouseEvent]s on its [Flow]
+     */
+    fun dblclicksCapturedIf(selector: MouseEvent.() -> Boolean): Listener<MouseEvent, T> =
+        subscribe(DBLCLICK, true, selector = selector)
+
+    /**
+     * occurs when an element is being dragged
+     */
+    val dragsCaptured: Listener<DragEvent, T> get() = subscribe(DRAG, true)
+
+    /**
+     * occurs when an element is being dragged
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [DragEvent]s on its [Flow]
+     */
+    fun dragsCaptured(init: DragEvent.() -> Unit): Listener<DragEvent, T> = subscribe(DRAG, true) { init(); true }
+
+    /**
+     * occurs when an element is being dragged
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [DragEvent]s on its [Flow]
+     */
+    fun dragsCapturedIf(selector: DragEvent.() -> Boolean): Listener<DragEvent, T> =
+        subscribe(DRAG, true, selector = selector)
+
+    /**
+     * occurs when the user has finished dragging an element
+     */
+    val dragendsCaptured: Listener<DragEvent, T> get() = subscribe(DRAGEND, true)
+
+    /**
+     * occurs when the user has finished dragging an element
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [DragEvent]s on its [Flow]
+     */
+    fun dragendsCaptured(init: DragEvent.() -> Unit): Listener<DragEvent, T> = subscribe(DRAGEND, true) { init(); true }
+
+    /**
+     * occurs when the user has finished dragging an element
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [DragEvent]s on its [Flow]
+     */
+    fun dragendsCapturedIf(selector: DragEvent.() -> Boolean): Listener<DragEvent, T> =
+        subscribe(DRAGEND, true, selector = selector)
+
+    /**
+     * occurs when the dragged element enters the drop target
+     */
+    val dragentersCaptured: Listener<DragEvent, T> get() = subscribe(DRAGENTER, true)
+
+    /**
+     * occurs when the dragged element enters the drop target
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [DragEvent]s on its [Flow]
+     */
+    fun dragentersCaptured(init: DragEvent.() -> Unit): Listener<DragEvent, T> =
+        subscribe(DRAGENTER, true) { init(); true }
+
+    /**
+     * occurs when the dragged element enters the drop target
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [DragEvent]s on its [Flow]
+     */
+    fun dragentersCapturedIf(selector: DragEvent.() -> Boolean): Listener<DragEvent, T> =
+        subscribe(DRAGENTER, true, selector = selector)
+
+    /**
+     * occurs when the dragged element leaves the drop target
+     */
+    val dragleavesCaptured: Listener<DragEvent, T> get() = subscribe(DRAGLEAVE, true)
+
+    /**
+     * occurs when the dragged element leaves the drop target
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [DragEvent]s on its [Flow]
+     */
+    fun dragleavesCaptured(init: DragEvent.() -> Unit): Listener<DragEvent, T> =
+        subscribe(DRAGLEAVE, true) { init(); true }
+
+    /**
+     * occurs when the dragged element leaves the drop target
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [DragEvent]s on its [Flow]
+     */
+    fun dragleavesCapturedIf(selector: DragEvent.() -> Boolean): Listener<DragEvent, T> =
+        subscribe(DRAGLEAVE, true, selector = selector)
+
+    /**
+     * occurs when the dragged element is over the drop target
+     */
+    val dragoversCaptured: Listener<DragEvent, T> get() = subscribe(DRAGOVER, true)
+
+    /**
+     * occurs when the dragged element is over the drop target
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [DragEvent]s on its [Flow]
+     */
+    fun dragoversCaptured(init: DragEvent.() -> Unit): Listener<DragEvent, T> =
+        subscribe(DRAGOVER, true) { init(); true }
+
+    /**
+     * occurs when the dragged element is over the drop target
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [DragEvent]s on its [Flow]
+     */
+    fun dragoversCapturedIf(selector: DragEvent.() -> Boolean): Listener<DragEvent, T> =
+        subscribe(DRAGOVER, true, selector = selector)
+
+    /**
+     * occurs when the user starts to drag an element
+     */
+    val dragstartsCaptured: Listener<DragEvent, T> get() = subscribe(DRAGSTART, true)
+
+    /**
+     * occurs when the user starts to drag an element
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [DragEvent]s on its [Flow]
+     */
+    fun dragstartsCaptured(init: DragEvent.() -> Unit): Listener<DragEvent, T> =
+        subscribe(DRAGSTART, true) { init(); true }
+
+    /**
+     * occurs when the user starts to drag an element
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [DragEvent]s on its [Flow]
+     */
+    fun dragstartsCapturedIf(selector: DragEvent.() -> Boolean): Listener<DragEvent, T> =
+        subscribe(DRAGSTART, true, selector = selector)
+
+    /**
+     * occurs when the dragged element is dropped on the drop target
+     */
+    val dropsCaptured: Listener<DragEvent, T> get() = subscribe(DROP, true)
+
+    /**
+     * occurs when the dragged element is dropped on the drop target
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [DragEvent]s on its [Flow]
+     */
+    fun dropsCaptured(init: DragEvent.() -> Unit): Listener<DragEvent, T> = subscribe(DROP, true) { init(); true }
+
+    /**
+     * occurs when the dragged element is dropped on the drop target
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [DragEvent]s on its [Flow]
+     */
+    fun dropsCapturedIf(selector: DragEvent.() -> Boolean): Listener<DragEvent, T> =
+        subscribe(DROP, true, selector = selector)
+
+    /**
+     * occurs when the duration of the media is changed
+     */
+    val durationchangesCaptured: Listener<Event, T> get() = subscribe(DURATIONCHANGE, true)
+
+    /**
+     * occurs when the duration of the media is changed
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
+     */
+    fun durationchangesCaptured(init: Event.() -> Unit): Listener<Event, T> =
+        subscribe(DURATIONCHANGE, true) { init(); true }
+
+    /**
+     * occurs when the duration of the media is changed
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
+     */
+    fun durationchangesCapturedIf(selector: Event.() -> Boolean): Listener<Event, T> =
+        subscribe(DURATIONCHANGE, true, selector = selector)
+
+    /**
+     * occurs when the media has reach the end (useful for messages like "thanks for listening")
+     */
+    val endedsCaptured: Listener<Event, T> get() = subscribe(ENDED, true)
+
+    /**
+     * occurs when the media has reach the end (useful for messages like "thanks for listening")
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
+     */
+    fun endedsCaptured(init: Event.() -> Unit): Listener<Event, T> = subscribe(ENDED, true) { init(); true }
+
+    /**
+     * occurs when the media has reach the end (useful for messages like "thanks for listening")
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
+     */
+    fun endedsCapturedIf(selector: Event.() -> Boolean): Listener<Event, T> =
+        subscribe(ENDED, true, selector = selector)
+
+    /**
+     * occurs when an element gets focus
+     */
+    val focussCaptured: Listener<FocusEvent, T> get() = subscribe(FOCUS, true)
+
+    /**
+     * occurs when an element gets focus
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [FocusEvent]s on its [Flow]
+     */
+    fun focussCaptured(init: FocusEvent.() -> Unit): Listener<FocusEvent, T> = subscribe(FOCUS, true) { init(); true }
+
+    /**
+     * occurs when an element gets focus
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [FocusEvent]s on its [Flow]
+     */
+    fun focussCapturedIf(selector: FocusEvent.() -> Boolean): Listener<FocusEvent, T> =
+        subscribe(FOCUS, true, selector = selector)
+
+    /**
+     * occurs when an element is about to get focus
+     */
+    val focusinsCaptured: Listener<FocusEvent, T> get() = subscribe(FOCUSIN, true)
+
+    /**
+     * occurs when an element is about to get focus
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [FocusEvent]s on its [Flow]
+     */
+    fun focusinsCaptured(init: FocusEvent.() -> Unit): Listener<FocusEvent, T> =
+        subscribe(FOCUSIN, true) { init(); true }
+
+    /**
+     * occurs when an element is about to get focus
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [FocusEvent]s on its [Flow]
+     */
+    fun focusinsCapturedIf(selector: FocusEvent.() -> Boolean): Listener<FocusEvent, T> =
+        subscribe(FOCUSIN, true, selector = selector)
+
+    /**
+     * occurs when an element is about to lose focus
+     */
+    val focusoutsCaptured: Listener<FocusEvent, T> get() = subscribe(FOCUSOUT, true)
+
+    /**
+     * occurs when an element is about to lose focus
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [FocusEvent]s on its [Flow]
+     */
+    fun focusoutsCaptured(init: FocusEvent.() -> Unit): Listener<FocusEvent, T> =
+        subscribe(FOCUSOUT, true) { init(); true }
+
+    /**
+     * occurs when an element is about to lose focus
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [FocusEvent]s on its [Flow]
+     */
+    fun focusoutsCapturedIf(selector: FocusEvent.() -> Boolean): Listener<FocusEvent, T> =
+        subscribe(FOCUSOUT, true, selector = selector)
+
+    /**
+     * occurs when an element is displayed in fullscreen mode
+     */
+    val fullscreenchangesCaptured: Listener<Event, T> get() = subscribe(FULLSCREENCHANGE, true)
+
+    /**
+     * occurs when an element is displayed in fullscreen mode
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
+     */
+    fun fullscreenchangesCaptured(init: Event.() -> Unit): Listener<Event, T> =
+        subscribe(FULLSCREENCHANGE, true) { init(); true }
+
+    /**
+     * occurs when an element is displayed in fullscreen mode
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
+     */
+    fun fullscreenchangesCapturedIf(selector: Event.() -> Boolean): Listener<Event, T> =
+        subscribe(FULLSCREENCHANGE, true, selector = selector)
+
+    /**
+     * occurs when an element can not be displayed in fullscreen mode
+     */
+    val fullscreenerrorsCaptured: Listener<Event, T> get() = subscribe(FULLSCREENERROR, true)
+
+    /**
+     * occurs when an element can not be displayed in fullscreen mode
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
+     */
+    fun fullscreenerrorsCaptured(init: Event.() -> Unit): Listener<Event, T> =
+        subscribe(FULLSCREENERROR, true) { init(); true }
+
+    /**
+     * occurs when an element can not be displayed in fullscreen mode
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
+     */
+    fun fullscreenerrorsCapturedIf(selector: Event.() -> Boolean): Listener<Event, T> =
+        subscribe(FULLSCREENERROR, true, selector = selector)
+
+    /**
+     * occurs when there has been changes to the anchor part of a URL
+     */
+    val hashchangesCaptured: Listener<HashChangeEvent, T> get() = subscribe(HASHCHANGE, true)
+
+    /**
+     * occurs when there has been changes to the anchor part of a URL
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [HashChangeEvent]s on its [Flow]
+     */
+    fun hashchangesCaptured(init: HashChangeEvent.() -> Unit): Listener<HashChangeEvent, T> =
+        subscribe(HASHCHANGE, true) { init(); true }
+
+    /**
+     * occurs when there has been changes to the anchor part of a URL
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [HashChangeEvent]s on its [Flow]
+     */
+    fun hashchangesCapturedIf(selector: HashChangeEvent.() -> Boolean): Listener<HashChangeEvent, T> =
+        subscribe(HASHCHANGE, true, selector = selector)
+
+    /**
+     * occurs when an element gets user input has to use Event as type because Chrome and Safari offer Events instead
+     * of InputEvents when selecting from a datalist
+     */
+    val inputsCaptured: Listener<Event, T> get() = subscribe(INPUT, true)
+
+    /**
+     * occurs when an element gets user input has to use Event as type because Chrome and Safari offer Events instead
+     * of InputEvents when selecting from a datalist
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
+     */
+    fun inputsCaptured(init: Event.() -> Unit): Listener<Event, T> = subscribe(INPUT, true) { init(); true }
+
+    /**
+     * occurs when an element gets user input has to use Event as type because Chrome and Safari offer Events instead
+     * of InputEvents when selecting from a datalist
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
+     */
+    fun inputsCapturedIf(selector: Event.() -> Boolean): Listener<Event, T> =
+        subscribe(INPUT, true, selector = selector)
+
+    /**
+     * occurs when an element is invalid
+     */
+    val invalidsCaptured: Listener<Event, T> get() = subscribe(INVALID, true)
+
+    /**
+     * occurs when an element is invalid
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
+     */
+    fun invalidsCaptured(init: Event.() -> Unit): Listener<Event, T> = subscribe(INVALID, true) { init(); true }
+
+    /**
+     * occurs when an element is invalid
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
+     */
+    fun invalidsCapturedIf(selector: Event.() -> Boolean): Listener<Event, T> =
+        subscribe(INVALID, true, selector = selector)
+
+    /**
+     * occurs when the user is pressing a key
+     */
+    val keydownsCaptured: Listener<KeyboardEvent, T> get() = subscribe(KEYDOWN, true)
+
+    /**
+     * occurs when the user is pressing a key
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [KeyboardEvent]s on its [Flow]
+     */
+    fun keydownsCaptured(init: KeyboardEvent.() -> Unit): Listener<KeyboardEvent, T> =
+        subscribe(KEYDOWN, true) { init(); true }
+
+    /**
+     * occurs when the user is pressing a key
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [KeyboardEvent]s on its [Flow]
+     */
+    fun keydownsCapturedIf(selector: KeyboardEvent.() -> Boolean): Listener<KeyboardEvent, T> =
+        subscribe(KEYDOWN, true, selector = selector)
+
+    /**
+     * occurs when the user presses a key
+     */
+    val keypresssCaptured: Listener<KeyboardEvent, T> get() = subscribe(KEYPRESS, true)
+
+    /**
+     * occurs when the user presses a key
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [KeyboardEvent]s on its [Flow]
+     */
+    fun keypresssCaptured(init: KeyboardEvent.() -> Unit): Listener<KeyboardEvent, T> =
+        subscribe(KEYPRESS, true) { init(); true }
+
+    /**
+     * occurs when the user presses a key
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [KeyboardEvent]s on its [Flow]
+     */
+    fun keypresssCapturedIf(selector: KeyboardEvent.() -> Boolean): Listener<KeyboardEvent, T> =
+        subscribe(KEYPRESS, true, selector = selector)
+
+    /**
+     * occurs when the user releases a key
+     */
+    val keyupsCaptured: Listener<KeyboardEvent, T> get() = subscribe(KEYUP, true)
+
+    /**
+     * occurs when the user releases a key
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [KeyboardEvent]s on its [Flow]
+     */
+    fun keyupsCaptured(init: KeyboardEvent.() -> Unit): Listener<KeyboardEvent, T> =
+        subscribe(KEYUP, true) { init(); true }
+
+    /**
+     * occurs when the user releases a key
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [KeyboardEvent]s on its [Flow]
+     */
+    fun keyupsCapturedIf(selector: KeyboardEvent.() -> Boolean): Listener<KeyboardEvent, T> =
+        subscribe(KEYUP, true, selector = selector)
+
+    /**
+     * occurs when an object has loaded
+     */
+    val loadsCaptured: Listener<Event, T> get() = subscribe(LOAD, true)
+
+    /**
+     * occurs when an object has loaded
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
+     */
+    fun loadsCaptured(init: Event.() -> Unit): Listener<Event, T> = subscribe(LOAD, true) { init(); true }
+
+    /**
+     * occurs when an object has loaded
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
+     */
+    fun loadsCapturedIf(selector: Event.() -> Boolean): Listener<Event, T> = subscribe(LOAD, true, selector = selector)
+
+    /**
+     * occurs when media data is loaded
+     */
+    val loadeddatasCaptured: Listener<Event, T> get() = subscribe(LOADEDDATA, true)
+
+    /**
+     * occurs when media data is loaded
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
+     */
+    fun loadeddatasCaptured(init: Event.() -> Unit): Listener<Event, T> = subscribe(LOADEDDATA, true) { init(); true }
+
+    /**
+     * occurs when media data is loaded
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
+     */
+    fun loadeddatasCapturedIf(selector: Event.() -> Boolean): Listener<Event, T> =
+        subscribe(LOADEDDATA, true, selector = selector)
+
+    /**
+     * occurs when metadata (like dimensions and duration) are loaded
+     */
+    val loadedmetadatasCaptured: Listener<Event, T> get() = subscribe(LOADEDMETADATA, true)
+
+    /**
+     * occurs when metadata (like dimensions and duration) are loaded
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
+     */
+    fun loadedmetadatasCaptured(init: Event.() -> Unit): Listener<Event, T> =
+        subscribe(LOADEDMETADATA, true) { init(); true }
+
+    /**
+     * occurs when metadata (like dimensions and duration) are loaded
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
+     */
+    fun loadedmetadatasCapturedIf(selector: Event.() -> Boolean): Listener<Event, T> =
+        subscribe(LOADEDMETADATA, true, selector = selector)
+
+    /**
+     * occurs when the pointer is moved onto an element
+     */
+    val mouseentersCaptured: Listener<MouseEvent, T> get() = subscribe(MOUSEENTER, true)
+
+    /**
+     * occurs when the pointer is moved onto an element
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [MouseEvent]s on its [Flow]
      */
-    val unloads get() = subscribe<Event>("unload")
+    fun mouseentersCaptured(init: MouseEvent.() -> Unit): Listener<MouseEvent, T> =
+        subscribe(MOUSEENTER, true) { init(); true }
 
     /**
-     * occurs when the volume of the media has changed (includes setting the volume to "mute")
+     * occurs when the pointer is moved onto an element
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [MouseEvent]s on its [Flow]
      */
-    val volumechanges get() = subscribe<Event>("volumechange")
+    fun mouseentersCapturedIf(selector: MouseEvent.() -> Boolean): Listener<MouseEvent, T> =
+        subscribe(MOUSEENTER, true, selector = selector)
 
     /**
-     * occurs when the media has paused but is expected to resume (like when the media pauses to buffer more data)
+     * occurs when the pointer is moved out of an element
      */
-    val waitings get() = subscribe<Event>("waiting")
+    val mouseleavesCaptured: Listener<MouseEvent, T> get() = subscribe(MOUSELEAVE, true)
 
     /**
-     * occurs when the mouse wheel rolls up or down over an element
+     * occurs when the pointer is moved out of an element
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [MouseEvent]s on its [Flow]
+     */
+    fun mouseleavesCaptured(init: MouseEvent.() -> Unit): Listener<MouseEvent, T> =
+        subscribe(MOUSELEAVE, true) { init(); true }
+
+    /**
+     * occurs when the pointer is moved out of an element
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [MouseEvent]s on its [Flow]
      */
-    val wheels get() = subscribe<WheelEvent>("wheel")
+    fun mouseleavesCapturedIf(selector: MouseEvent.() -> Boolean): Listener<MouseEvent, T> =
+        subscribe(MOUSELEAVE, true, selector = selector)
 
+    /**
+     * occurs when the pointer is moving while it is over an element
+     */
+    val mousemovesCaptured: Listener<MouseEvent, T> get() = subscribe(MOUSEMOVE, true)
 
+    /**
+     * occurs when the pointer is moving while it is over an element
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [MouseEvent]s on its [Flow]
+     */
+    fun mousemovesCaptured(init: MouseEvent.() -> Unit): Listener<MouseEvent, T> =
+        subscribe(MOUSEMOVE, true) { init(); true }
 
     /**
-     * occurs when the loading of a media is aborted
+     * occurs when the pointer is moving while it is over an element
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [MouseEvent]s on its [Flow]
      */
-    val abortsCaptured get() = subscribe<Event>("abort", true)
+    fun mousemovesCapturedIf(selector: MouseEvent.() -> Boolean): Listener<MouseEvent, T> =
+        subscribe(MOUSEMOVE, true, selector = selector)
 
     /**
-     * occurs when a page has started printing, or if the print dialogue box has been closed
+     * occurs when the pointer is moved onto an element, or onto one of its children
      */
-    val afterprintsCaptured get() = subscribe<Event>("afterprint", true)
+    val mouseoversCaptured: Listener<MouseEvent, T> get() = subscribe(MOUSEOVER, true)
 
     /**
-     * occurs when a page is about to be printed
+     * occurs when the pointer is moved onto an element, or onto one of its children
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [MouseEvent]s on its [Flow]
+     */
+    fun mouseoversCaptured(init: MouseEvent.() -> Unit): Listener<MouseEvent, T> =
+        subscribe(MOUSEOVER, true) { init(); true }
+
+    /**
+     * occurs when the pointer is moved onto an element, or onto one of its children
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [MouseEvent]s on its [Flow]
+     */
+    fun mouseoversCapturedIf(selector: MouseEvent.() -> Boolean): Listener<MouseEvent, T> =
+        subscribe(MOUSEOVER, true, selector = selector)
+
+    /**
+     * occurs when a user moves the mouse pointer out of an element, or out of one of its children
+     */
+    val mouseoutsCaptured: Listener<MouseEvent, T> get() = subscribe(MOUSEOUT, true)
+
+    /**
+     * occurs when a user moves the mouse pointer out of an element, or out of one of its children
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [MouseEvent]s on its [Flow]
+     */
+    fun mouseoutsCaptured(init: MouseEvent.() -> Unit): Listener<MouseEvent, T> =
+        subscribe(MOUSEOUT, true) { init(); true }
+
+    /**
+     * occurs when a user moves the mouse pointer out of an element, or out of one of its children
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [MouseEvent]s on its [Flow]
+     */
+    fun mouseoutsCapturedIf(selector: MouseEvent.() -> Boolean): Listener<MouseEvent, T> =
+        subscribe(MOUSEOUT, true, selector = selector)
+
+    /**
+     * occurs when a user releases a mouse button over an element
+     */
+    val mouseupsCaptured: Listener<MouseEvent, T> get() = subscribe(MOUSEUP, true)
+
+    /**
+     * occurs when a user releases a mouse button over an element
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [MouseEvent]s on its [Flow]
+     */
+    fun mouseupsCaptured(init: MouseEvent.() -> Unit): Listener<MouseEvent, T> =
+        subscribe(MOUSEUP, true) { init(); true }
+
+    /**
+     * occurs when a user releases a mouse button over an element
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [MouseEvent]s on its [Flow]
+     */
+    fun mouseupsCapturedIf(selector: MouseEvent.() -> Boolean): Listener<MouseEvent, T> =
+        subscribe(MOUSEUP, true, selector = selector)
+
+    /**
+     * occurs when the browser starts to work offline
+     */
+    val offlinesCaptured: Listener<Event, T> get() = subscribe(OFFLINE, true)
+
+    /**
+     * occurs when the browser starts to work offline
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
+     */
+    fun offlinesCaptured(init: Event.() -> Unit): Listener<Event, T> = subscribe(OFFLINE, true) { init(); true }
+
+    /**
+     * occurs when the browser starts to work offline
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
+     */
+    fun offlinesCapturedIf(selector: Event.() -> Boolean): Listener<Event, T> =
+        subscribe(OFFLINE, true, selector = selector)
+
+    /**
+     * occurs when the browser starts to work online
+     */
+    val onlinesCaptured: Listener<Event, T> get() = subscribe(ONLINE, true)
+
+    /**
+     * occurs when the browser starts to work online
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
+     */
+    fun onlinesCaptured(init: Event.() -> Unit): Listener<Event, T> = subscribe(ONLINE, true) { init(); true }
+
+    /**
+     * occurs when the browser starts to work online
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
+     */
+    fun onlinesCapturedIf(selector: Event.() -> Boolean): Listener<Event, T> =
+        subscribe(ONLINE, true, selector = selector)
+
+    /**
+     * occurs when a connection with the event source is opened
+     */
+    val opensCaptured: Listener<Event, T> get() = subscribe(OPEN, true)
+
+    /**
+     * occurs when a connection with the event source is opened
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
+     */
+    fun opensCaptured(init: Event.() -> Unit): Listener<Event, T> = subscribe(OPEN, true) { init(); true }
+
+    /**
+     * occurs when a connection with the event source is opened
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
+     */
+    fun opensCapturedIf(selector: Event.() -> Boolean): Listener<Event, T> = subscribe(OPEN, true, selector = selector)
+
+    /**
+     * occurs when the user navigates away from a webpage
+     */
+    val pagehidesCaptured: Listener<PageTransitionEvent, T> get() = subscribe(PAGEHIDE, true)
+
+    /**
+     * occurs when the user navigates away from a webpage
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [PageTransitionEvent]s on its [Flow]
+     */
+    fun pagehidesCaptured(init: PageTransitionEvent.() -> Unit): Listener<PageTransitionEvent, T> =
+        subscribe(PAGEHIDE, true) { init(); true }
+
+    /**
+     * occurs when the user navigates away from a webpage
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [PageTransitionEvent]s on its [Flow]
+     */
+    fun pagehidesCapturedIf(selector: PageTransitionEvent.() -> Boolean): Listener<PageTransitionEvent, T> =
+        subscribe(PAGEHIDE, true, selector = selector)
+
+    /**
+     * occurs when the user navigates to a webpage
+     */
+    val pageshowsCaptured: Listener<PageTransitionEvent, T> get() = subscribe(PAGESHOW, true)
+
+    /**
+     * occurs when the user navigates to a webpage
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [PageTransitionEvent]s on its [Flow]
+     */
+    fun pageshowsCaptured(init: PageTransitionEvent.() -> Unit): Listener<PageTransitionEvent, T> =
+        subscribe(PAGESHOW, true) { init(); true }
+
+    /**
+     * occurs when the user navigates to a webpage
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [PageTransitionEvent]s on its [Flow]
+     */
+    fun pageshowsCapturedIf(selector: PageTransitionEvent.() -> Boolean): Listener<PageTransitionEvent, T> =
+        subscribe(PAGESHOW, true, selector = selector)
+
+    /**
+     * occurs when the user pastes some content in an element
+     */
+    val pastesCaptured: Listener<ClipboardEvent, T> get() = subscribe(PASTE, true)
+
+    /**
+     * occurs when the user pastes some content in an element
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [ClipboardEvent]s on its [Flow]
+     */
+    fun pastesCaptured(init: ClipboardEvent.() -> Unit): Listener<ClipboardEvent, T> =
+        subscribe(PASTE, true) { init(); true }
+
+    /**
+     * occurs when the user pastes some content in an element
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [ClipboardEvent]s on its [Flow]
+     */
+    fun pastesCapturedIf(selector: ClipboardEvent.() -> Boolean): Listener<ClipboardEvent, T> =
+        subscribe(PASTE, true, selector = selector)
+
+    /**
+     * occurs when the browser starts looking for the specified media
+     */
+    val loadstartsCaptured: Listener<ProgressEvent, T> get() = subscribe(LOADSTART, true)
+
+    /**
+     * occurs when the browser starts looking for the specified media
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [ProgressEvent]s on its [Flow]
+     */
+    fun loadstartsCaptured(init: ProgressEvent.() -> Unit): Listener<ProgressEvent, T> =
+        subscribe(LOADSTART, true) { init(); true }
+
+    /**
+     * occurs when the browser starts looking for the specified media
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [ProgressEvent]s on its [Flow]
+     */
+    fun loadstartsCapturedIf(selector: ProgressEvent.() -> Boolean): Listener<ProgressEvent, T> =
+        subscribe(LOADSTART, true, selector = selector)
+
+    /**
+     * occurs when a message is received through the event source
+     */
+    val messagesCaptured: Listener<Event, T> get() = subscribe(MESSAGE, true)
+
+    /**
+     * occurs when a message is received through the event source
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
+     */
+    fun messagesCaptured(init: Event.() -> Unit): Listener<Event, T> = subscribe(MESSAGE, true) { init(); true }
+
+    /**
+     * occurs when a message is received through the event source
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
+     */
+    fun messagesCapturedIf(selector: Event.() -> Boolean): Listener<Event, T> =
+        subscribe(MESSAGE, true, selector = selector)
+
+    /**
+     * occurs when the user presses a mouse button over an element
+     */
+    val mousedownsCaptured: Listener<MouseEvent, T> get() = subscribe(MOUSEDOWN, true)
+
+    /**
+     * occurs when the user presses a mouse button over an element
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [MouseEvent]s on its [Flow]
+     */
+    fun mousedownsCaptured(init: MouseEvent.() -> Unit): Listener<MouseEvent, T> =
+        subscribe(MOUSEDOWN, true) { init(); true }
+
+    /**
+     * occurs when the user presses a mouse button over an element
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [MouseEvent]s on its [Flow]
+     */
+    fun mousedownsCapturedIf(selector: MouseEvent.() -> Boolean): Listener<MouseEvent, T> =
+        subscribe(MOUSEDOWN, true, selector = selector)
+
+    /**
+     * occurs when the media is paused either by the user or programmatically
+     */
+    val pausesCaptured: Listener<Event, T> get() = subscribe(PAUSE, true)
+
+    /**
+     * occurs when the media is paused either by the user or programmatically
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
+     */
+    fun pausesCaptured(init: Event.() -> Unit): Listener<Event, T> = subscribe(PAUSE, true) { init(); true }
+
+    /**
+     * occurs when the media is paused either by the user or programmatically
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
+     */
+    fun pausesCapturedIf(selector: Event.() -> Boolean): Listener<Event, T> =
+        subscribe(PAUSE, true, selector = selector)
+
+    /**
+     * occurs when the media has been started or is no longer paused
+     */
+    val playsCaptured: Listener<Event, T> get() = subscribe(PLAY, true)
+
+    /**
+     * occurs when the media has been started or is no longer paused
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
+     */
+    fun playsCaptured(init: Event.() -> Unit): Listener<Event, T> = subscribe(PLAY, true) { init(); true }
+
+    /**
+     * occurs when the media has been started or is no longer paused
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
+     */
+    fun playsCapturedIf(selector: Event.() -> Boolean): Listener<Event, T> = subscribe(PLAY, true, selector = selector)
+
+    /**
+     * occurs when the media is playing after having been paused or stopped for buffering
+     */
+    val playingsCaptured: Listener<Event, T> get() = subscribe(PLAYING, true)
+
+    /**
+     * occurs when the media is playing after having been paused or stopped for buffering
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
      */
-    val beforeprintsCaptured get() = subscribe<Event>("beforeprint", true)
+    fun playingsCaptured(init: Event.() -> Unit): Listener<Event, T> = subscribe(PLAYING, true) { init(); true }
 
     /**
-     * occurs before the document is about to be unloaded
+     * occurs when the media is playing after having been paused or stopped for buffering
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
      */
-    val beforeunloadsCaptured get() = subscribe<Event>("beforeunload", true)
+    fun playingsCapturedIf(selector: Event.() -> Boolean): Listener<Event, T> =
+        subscribe(PLAYING, true, selector = selector)
 
     /**
-     * occurs when an element loses focus
+     * occurs when the window's history changes
      */
-    val blursCaptured get() = subscribe<FocusEvent>("blur", true)
+    val popstatesCaptured: Listener<PopStateEvent, T> get() = subscribe(POPSTATE, true)
 
     /**
-     * occurs when the browser can start playing the media (when it has buffered enough to begin)
+     * occurs when the window's history changes
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [PopStateEvent]s on its [Flow]
      */
-    val canplaysCaptured get() = subscribe<Event>("canplay", true)
+    fun popstatesCaptured(init: PopStateEvent.() -> Unit): Listener<PopStateEvent, T> =
+        subscribe(POPSTATE, true) { init(); true }
 
     /**
-     * occurs when the browser can play through the media without stopping for buffering
+     * occurs when the window's history changes
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [PopStateEvent]s on its [Flow]
      */
-    val canplaythroughsCaptured get() = subscribe<Event>("canplaythrough", true)
+    fun popstatesCapturedIf(selector: PopStateEvent.() -> Boolean): Listener<PopStateEvent, T> =
+        subscribe(POPSTATE, true, selector = selector)
 
     /**
-     * occurs when the content of a form element, the selection, or the checked state have changed
-     * (for `<input>`, `<select>`, and `<textarea>`)
+     * occurs when the browser is in the process of getting the media data (downloading the media)
      */
-    val changesCaptured get() = subscribe<Event>("change", true)
+    val progresssCaptured: Listener<Event, T> get() = subscribe(PROGRESS, true)
 
     /**
-     * occurs when the user clicks on an element
+     * occurs when the browser is in the process of getting the media data (downloading the media)
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
      */
-    val clicksCaptured get() = subscribe<MouseEvent>("click", true)
+    fun progresssCaptured(init: Event.() -> Unit): Listener<Event, T> = subscribe(PROGRESS, true) { init(); true }
 
     /**
-     * occurs when the user right-clicks on an element to open a context menu
+     * occurs when the browser is in the process of getting the media data (downloading the media)
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
      */
-    val contextmenusCaptured get() = subscribe<MouseEvent>("contextmenu", true)
+    fun progresssCapturedIf(selector: Event.() -> Boolean): Listener<Event, T> =
+        subscribe(PROGRESS, true, selector = selector)
 
     /**
-     * occurs when the user copies the content of an element
+     * occurs when the playing speed of the media is changed
      */
-    val copysCaptured get() = subscribe<ClipboardEvent>("copy", true)
+    val ratechangesCaptured: Listener<Event, T> get() = subscribe(RATECHANGE, true)
 
     /**
-     * occurs when the user cuts the content of an element
+     * occurs when the playing speed of the media is changed
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
      */
-    val cutsCaptured get() = subscribe<ClipboardEvent>("cut", true)
+    fun ratechangesCaptured(init: Event.() -> Unit): Listener<Event, T> = subscribe(RATECHANGE, true) { init(); true }
 
     /**
-     * occurs when the user double-clicks on an element
+     * occurs when the playing speed of the media is changed
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
      */
-    val dblclicksCaptured get() = subscribe<MouseEvent>("dblclick", true)
+    fun ratechangesCapturedIf(selector: Event.() -> Boolean): Listener<Event, T> =
+        subscribe(RATECHANGE, true, selector = selector)
 
     /**
-     * occurs when an element is being dragged
+     * occurs when the document view is resized
      */
-    val dragsCaptured get() = subscribe<DragEvent>("drag", true)
+    val resizesCaptured: Listener<Event, T> get() = subscribe(RESIZE, true)
 
     /**
-     * occurs when the user has finished dragging an element
+     * occurs when the document view is resized
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
      */
-    val dragendsCaptured get() = subscribe<DragEvent>("dragend", true)
+    fun resizesCaptured(init: Event.() -> Unit): Listener<Event, T> = subscribe(RESIZE, true) { init(); true }
 
     /**
-     * occurs when the dragged element enters the drop target
+     * occurs when the document view is resized
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
      */
-    val dragentersCaptured get() = subscribe<DragEvent>("dragenter", true)
+    fun resizesCapturedIf(selector: Event.() -> Boolean): Listener<Event, T> =
+        subscribe(RESIZE, true, selector = selector)
 
     /**
-     * occurs when the dragged element leaves the drop target
+     * occurs when a form is reset
      */
-    val dragleavesCaptured get() = subscribe<DragEvent>("dragleave", true)
+    val resetsCaptured: Listener<Event, T> get() = subscribe(RESET, true)
 
     /**
-     * occurs when the dragged element is over the drop target
+     * occurs when a form is reset
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
      */
-    val dragoversCaptured get() = subscribe<DragEvent>("dragover", true)
+    fun resetsCaptured(init: Event.() -> Unit): Listener<Event, T> = subscribe(RESET, true) { init(); true }
 
     /**
-     * occurs when the user starts to drag an element
+     * occurs when a form is reset
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
      */
-    val dragstartsCaptured get() = subscribe<DragEvent>("dragstart", true)
+    fun resetsCapturedIf(selector: Event.() -> Boolean): Listener<Event, T> =
+        subscribe(RESET, true, selector = selector)
 
     /**
-     * occurs when the dragged element is dropped on the drop target
+     * occurs when an element's scrollbar is being scrolled
      */
-    val dropsCaptured get() = subscribe<DragEvent>("drop", true)
+    val scrollsCaptured: Listener<Event, T> get() = subscribe(SCROLL, true)
 
     /**
-     * occurs when the duration of the media is changed
+     * occurs when an element's scrollbar is being scrolled
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
      */
-    val durationchangesCaptured get() = subscribe<Event>("durationchange", true)
+    fun scrollsCaptured(init: Event.() -> Unit): Listener<Event, T> = subscribe(SCROLL, true) { init(); true }
 
     /**
-     * occurs when the media has reach the end (useful for messages like "thanks for listening")
+     * occurs when an element's scrollbar is being scrolled
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
      */
-    val endedsCaptured get() = subscribe<Event>("ended", true)
+    fun scrollsCapturedIf(selector: Event.() -> Boolean): Listener<Event, T> =
+        subscribe(SCROLL, true, selector = selector)
 
     /**
-     * occurs when an element gets focus
+     * occurs when the user writes something in a search field (for <input="search">)
      */
-    val focussCaptured get() = subscribe<FocusEvent>("focus", true)
+    val searchsCaptured: Listener<Event, T> get() = subscribe(SEARCH, true)
 
     /**
-     * occurs when an element is about to get focus
+     * occurs when the user writes something in a search field (for <input="search">)
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
      */
-    val focusinsCaptured get() = subscribe<FocusEvent>("focusin", true)
+    fun searchsCaptured(init: Event.() -> Unit): Listener<Event, T> = subscribe(SEARCH, true) { init(); true }
 
     /**
-     * occurs when an element is about to lose focus
+     * occurs when the user writes something in a search field (for <input="search">)
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
      */
-    val focusoutsCaptured get() = subscribe<FocusEvent>("focusout", true)
+    fun searchsCapturedIf(selector: Event.() -> Boolean): Listener<Event, T> =
+        subscribe(SEARCH, true, selector = selector)
 
     /**
-     * occurs when an element is displayed in fullscreen mode
+     * occurs when the user is finished moving/skipping to a new position in the media
      */
-    val fullscreenchangesCaptured get() = subscribe<Event>("fullscreenchange", true)
+    val seekedsCaptured: Listener<Event, T> get() = subscribe(SEEKED, true)
 
     /**
-     * occurs when an element can not be displayed in fullscreen mode
+     * occurs when the user is finished moving/skipping to a new position in the media
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
      */
-    val fullscreenerrorsCaptured get() = subscribe<Event>("fullscreenerror", true)
+    fun seekedsCaptured(init: Event.() -> Unit): Listener<Event, T> = subscribe(SEEKED, true) { init(); true }
 
     /**
-     * occurs when there has been changes to the anchor part of a URL
+     * occurs when the user is finished moving/skipping to a new position in the media
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
      */
-    val hashchangesCaptured get() = subscribe<HashChangeEvent>("hashchange", true)
+    fun seekedsCapturedIf(selector: Event.() -> Boolean): Listener<Event, T> =
+        subscribe(SEEKED, true, selector = selector)
 
     /**
-     * occurs when an element gets user input has to use Event as type because Chrome and Safari offer Events instead
-     * of InputEvents when selecting from a datalist
+     * occurs when the user starts moving/skipping to a new position in the media
      */
-    val inputsCaptured get() = subscribe<Event>("input", true)
+    val seekingsCaptured: Listener<Event, T> get() = subscribe(SEEKING, true)
 
     /**
-     * occurs when an element is invalid
+     * occurs when the user starts moving/skipping to a new position in the media
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
      */
-    val invalidsCaptured get() = subscribe<Event>("invalid", true)
+    fun seekingsCaptured(init: Event.() -> Unit): Listener<Event, T> = subscribe(SEEKING, true) { init(); true }
 
     /**
-     * occurs when the user is pressing a key
+     * occurs when the user starts moving/skipping to a new position in the media
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
      */
-    val keydownsCaptured get() = subscribe<KeyboardEvent>("keydown", true)
+    fun seekingsCapturedIf(selector: Event.() -> Boolean): Listener<Event, T> =
+        subscribe(SEEKING, true, selector = selector)
 
     /**
-     * occurs when the user presses a key
+     * occurs after the user selects some text (for <input> and <textarea>)
      */
-    val keypresssCaptured get() = subscribe<KeyboardEvent>("keypress", true)
+    val selectsCaptured: Listener<Event, T> get() = subscribe(SELECT, true)
 
     /**
-     * occurs when the user releases a key
+     * occurs after the user selects some text (for <input> and <textarea>)
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
      */
-    val keyupsCaptured get() = subscribe<KeyboardEvent>("keyup", true)
+    fun selectsCaptured(init: Event.() -> Unit): Listener<Event, T> = subscribe(SELECT, true) { init(); true }
 
     /**
-     * occurs when an object has loaded
+     * occurs after the user selects some text (for <input> and <textarea>)
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
      */
-    val loadsCaptured get() = subscribe<Event>("load", true)
+    fun selectsCapturedIf(selector: Event.() -> Boolean): Listener<Event, T> =
+        subscribe(SELECT, true, selector = selector)
 
     /**
-     * occurs when media data is loaded
+     * occurs when a <menu> element is shown as a context menu
      */
-    val loadeddatasCaptured get() = subscribe<Event>("loadeddata", true)
+    val showsCaptured: Listener<Event, T> get() = subscribe(SHOW, true)
 
     /**
-     * occurs when metadata (like dimensions and duration) are loaded
+     * occurs when a <menu> element is shown as a context menu
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
      */
-    val loadedmetadatasCaptured get() = subscribe<Event>("loadedmetadata", true)
+    fun showsCaptured(init: Event.() -> Unit): Listener<Event, T> = subscribe(SHOW, true) { init(); true }
 
     /**
-     * occurs when the pointer is moved onto an element
+     * occurs when a <menu> element is shown as a context menu
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
      */
-    val mouseentersCaptured get() = subscribe<MouseEvent>("mouseenter", true)
+    fun showsCapturedIf(selector: Event.() -> Boolean): Listener<Event, T> = subscribe(SHOW, true, selector = selector)
 
     /**
-     * occurs when the pointer is moved out of an element
+     * occurs when the browser is trying to get media data, but data is not available
      */
-    val mouseleavesCaptured get() = subscribe<MouseEvent>("mouseleave", true)
+    val stalledsCaptured: Listener<Event, T> get() = subscribe(STALLED, true)
 
     /**
-     * occurs when the pointer is moving while it is over an element
+     * occurs when the browser is trying to get media data, but data is not available
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
      */
-    val mousemovesCaptured get() = subscribe<MouseEvent>("mousemove", true)
+    fun stalledsCaptured(init: Event.() -> Unit): Listener<Event, T> = subscribe(STALLED, true) { init(); true }
 
     /**
-     * occurs when the pointer is moved onto an element, or onto one of its children
+     * occurs when the browser is trying to get media data, but data is not available
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
      */
-    val mouseoversCaptured get() = subscribe<MouseEvent>("mouseover", true)
+    fun stalledsCapturedIf(selector: Event.() -> Boolean): Listener<Event, T> =
+        subscribe(STALLED, true, selector = selector)
 
     /**
-     * occurs when a user moves the mouse pointer out of an element, or out of one of its children
+     * occurs when a Web Storage area is updated
      */
-    val mouseoutsCaptured get() = subscribe<MouseEvent>("mouseout", true)
+    val storagesCaptured: Listener<StorageEvent, T> get() = subscribe(STORAGE, true)
 
     /**
-     * occurs when a user releases a mouse button over an element
+     * occurs when a Web Storage area is updated
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [StorageEvent]s on its [Flow]
      */
-    val mouseupsCaptured get() = subscribe<MouseEvent>("mouseup", true)
+    fun storagesCaptured(init: StorageEvent.() -> Unit): Listener<StorageEvent, T> =
+        subscribe(STORAGE, true) { init(); true }
 
     /**
-     * occurs when the browser starts to work offline
+     * occurs when a Web Storage area is updated
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [StorageEvent]s on its [Flow]
      */
-    val offlinesCaptured get() = subscribe<Event>("offline", true)
+    fun storagesCapturedIf(selector: StorageEvent.() -> Boolean): Listener<StorageEvent, T> =
+        subscribe(STORAGE, true, selector = selector)
 
     /**
-     * occurs when the browser starts to work online
+     * occurs when a form is submitted
      */
-    val onlinesCaptured get() = subscribe<Event>("online", true)
+    val submitsCaptured: Listener<Event, T> get() = subscribe(SUBMIT, true)
 
     /**
-     * occurs when a connection with the event source is opened
+     * occurs when a form is submitted
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
      */
-    val opensCaptured get() = subscribe<Event>("open", true)
+    fun submitsCaptured(init: Event.() -> Unit): Listener<Event, T> = subscribe(SUBMIT, true) { init(); true }
 
     /**
-     * occurs when the user navigates away from a webpage
+     * occurs when a form is submitted
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
      */
-    val pagehidesCaptured get() = subscribe<PageTransitionEvent>("pagehide", true)
+    fun submitsCapturedIf(selector: Event.() -> Boolean): Listener<Event, T> =
+        subscribe(SUBMIT, true, selector = selector)
 
     /**
-     * occurs when the user navigates to a webpage
+     * occurs when the browser is intentionally not getting media data
      */
-    val pageshowsCaptured get() = subscribe<PageTransitionEvent>("pageshow", true)
+    val suspendsCaptured: Listener<Event, T> get() = subscribe(SUSPEND, true)
 
     /**
-     * occurs when the user pastes some content in an element
+     * occurs when the browser is intentionally not getting media data
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
      */
-    val pastesCaptured get() = subscribe<ClipboardEvent>("paste", true)
+    fun suspendsCaptured(init: Event.() -> Unit): Listener<Event, T> = subscribe(SUSPEND, true) { init(); true }
 
     /**
-     * occurs when the browser starts looking for the specified media
+     * occurs when the browser is intentionally not getting media data
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
      */
-    val loadstartsCaptured get() = subscribe<ProgressEvent>("loadstart", true)
+    fun suspendsCapturedIf(selector: Event.() -> Boolean): Listener<Event, T> =
+        subscribe(SUSPEND, true, selector = selector)
 
     /**
-     * occurs when a message is received through the event source
+     * occurs when the playing position has changed (like when the user fast forwards to a different point in the media)
      */
-    val messagesCaptured get() = subscribe<Event>("message", true)
+    val timeupdatesCaptured: Listener<Event, T> get() = subscribe(TIMEUPDATE, true)
 
     /**
-     * occurs when the user presses a mouse button over an element
+     * occurs when the playing position has changed (like when the user fast forwards to a different point in the media)
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
      */
-    val mousedownsCaptured get() = subscribe<MouseEvent>("mousedown", true)
+    fun timeupdatesCaptured(init: Event.() -> Unit): Listener<Event, T> = subscribe(TIMEUPDATE, true) { init(); true }
 
     /**
-     * occurs when the media is paused either by the user or programmatically
+     * occurs when the playing position has changed (like when the user fast forwards to a different point in the media)
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
      */
-    val pausesCaptured get() = subscribe<Event>("pause", true)
+    fun timeupdatesCapturedIf(selector: Event.() -> Boolean): Listener<Event, T> =
+        subscribe(TIMEUPDATE, true, selector = selector)
 
     /**
-     * occurs when the media has been started or is no longer paused
+     * occurs when the user opens or closes the <details> element
      */
-    val playsCaptured get() = subscribe<Event>("play", true)
+    val togglesCaptured: Listener<Event, T> get() = subscribe(TOGGLE, true)
 
     /**
-     * occurs when the media is playing after having been paused or stopped for buffering
+     * occurs when the user opens or closes the <details> element
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
      */
-    val playingsCaptured get() = subscribe<Event>("playing", true)
+    fun togglesCaptured(init: Event.() -> Unit): Listener<Event, T> = subscribe(TOGGLE, true) { init(); true }
 
     /**
-     * occurs when the window's history changes
+     * occurs when the user opens or closes the <details> element
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
      */
-    val popstatesCaptured get() = subscribe<PopStateEvent>("popstate", true)
+    fun togglesCapturedIf(selector: Event.() -> Boolean): Listener<Event, T> =
+        subscribe(TOGGLE, true, selector = selector)
 
     /**
-     * occurs when the browser is in the process of getting the media data (downloading the media)
+     * occurs when the touch is interrupted
      */
-    val progresssCaptured get() = subscribe<Event>("progress", true)
+    val touchcancelsCaptured: Listener<TouchEvent, T> get() = subscribe(TOUCHCANCEL, true)
 
     /**
-     * occurs when the playing speed of the media is changed
+     * occurs when the touch is interrupted
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [TouchEvent]s on its [Flow]
      */
-    val ratechangesCaptured get() = subscribe<Event>("ratechange", true)
+    fun touchcancelsCaptured(init: TouchEvent.() -> Unit): Listener<TouchEvent, T> =
+        subscribe(TOUCHCANCEL, true) { init(); true }
 
     /**
-     * occurs when the document view is resized
+     * occurs when the touch is interrupted
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [TouchEvent]s on its [Flow]
      */
-    val resizesCaptured get() = subscribe<Event>("resize", true)
+    fun touchcancelsCapturedIf(selector: TouchEvent.() -> Boolean): Listener<TouchEvent, T> =
+        subscribe(TOUCHCANCEL, true, selector = selector)
 
     /**
-     * occurs when a form is reset
+     * occurs when a finger is removed from a touch screen
      */
-    val resetsCaptured get() = subscribe<Event>("reset", true)
+    val touchendsCaptured: Listener<TouchEvent, T> get() = subscribe(TOUCHEND, true)
 
     /**
-     * occurs when an element's scrollbar is being scrolled
+     * occurs when a finger is removed from a touch screen
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [TouchEvent]s on its [Flow]
      */
-    val scrollsCaptured get() = subscribe<Event>("scroll", true)
+    fun touchendsCaptured(init: TouchEvent.() -> Unit): Listener<TouchEvent, T> =
+        subscribe(TOUCHEND, true) { init(); true }
 
     /**
-     * occurs when the user writes something in a search field (for <input="search">)
+     * occurs when a finger is removed from a touch screen
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [TouchEvent]s on its [Flow]
      */
-    val searchsCaptured get() = subscribe<Event>("search", true)
+    fun touchendsCapturedIf(selector: TouchEvent.() -> Boolean): Listener<TouchEvent, T> =
+        subscribe(TOUCHEND, true, selector = selector)
 
     /**
-     * occurs when the user is finished moving/skipping to a new position in the media
+     * occurs when a finger is dragged across the screen
      */
-    val seekedsCaptured get() = subscribe<Event>("seeked", true)
+    val touchmovesCaptured: Listener<TouchEvent, T> get() = subscribe(TOUCHMOVE, true)
 
     /**
-     * occurs when the user starts moving/skipping to a new position in the media
+     * occurs when a finger is dragged across the screen
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [TouchEvent]s on its [Flow]
      */
-    val seekingsCaptured get() = subscribe<Event>("seeking", true)
+    fun touchmovesCaptured(init: TouchEvent.() -> Unit): Listener<TouchEvent, T> =
+        subscribe(TOUCHMOVE, true) { init(); true }
 
     /**
-     * occurs after the user selects some text (for <input> and <textarea>)
+     * occurs when a finger is dragged across the screen
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [TouchEvent]s on its [Flow]
      */
-    val selectsCaptured get() = subscribe<Event>("select", true)
+    fun touchmovesCapturedIf(selector: TouchEvent.() -> Boolean): Listener<TouchEvent, T> =
+        subscribe(TOUCHMOVE, true, selector = selector)
 
     /**
-     * occurs when a <menu> element is shown as a context menu
+     * occurs when a finger is placed on a touch screen
      */
-    val showsCaptured get() = subscribe<Event>("show", true)
+    val touchstartsCaptured: Listener<TouchEvent, T> get() = subscribe(TOUCHSTART, true)
 
     /**
-     * occurs when the browser is trying to get media data, but data is not available
+     * occurs when a finger is placed on a touch screen
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [TouchEvent]s on its [Flow]
      */
-    val stalledsCaptured get() = subscribe<Event>("stalled", true)
+    fun touchstartsCaptured(init: TouchEvent.() -> Unit): Listener<TouchEvent, T> =
+        subscribe(TOUCHSTART, true) { init(); true }
 
     /**
-     * occurs when a Web Storage area is updated
+     * occurs when a finger is placed on a touch screen
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [TouchEvent]s on its [Flow]
      */
-    val storagesCaptured get() = subscribe<StorageEvent>("storage", true)
+    fun touchstartsCapturedIf(selector: TouchEvent.() -> Boolean): Listener<TouchEvent, T> =
+        subscribe(TOUCHSTART, true, selector = selector)
 
     /**
-     * occurs when a form is submitted
+     * occurs once a page has unloaded (for <body>)
      */
-    val submitsCaptured get() = subscribe<Event>("submit", true)
+    val unloadsCaptured: Listener<Event, T> get() = subscribe(UNLOAD, true)
 
     /**
-     * occurs when the browser is intentionally not getting media data
+     * occurs once a page has unloaded (for <body>)
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
      */
-    val suspendsCaptured get() = subscribe<Event>("suspend", true)
+    fun unloadsCaptured(init: Event.() -> Unit): Listener<Event, T> = subscribe(UNLOAD, true) { init(); true }
 
     /**
-     * occurs when the playing position has changed (like when the user fast forwards to a different point in the media)
+     * occurs once a page has unloaded (for <body>)
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
      */
-    val timeupdatesCaptured get() = subscribe<Event>("timeupdate", true)
+    fun unloadsCapturedIf(selector: Event.() -> Boolean): Listener<Event, T> =
+        subscribe(UNLOAD, true, selector = selector)
 
     /**
-     * occurs when the user opens or closes the <details> element
+     * occurs when the volume of the media has changed (includes setting the volume to "mute")
      */
-    val togglesCaptured get() = subscribe<Event>("toggle", true)
+    val volumechangesCaptured: Listener<Event, T> get() = subscribe(VOLUMECHANGE, true)
 
     /**
-     * occurs when the touch is interrupted
+     * occurs when the volume of the media has changed (includes setting the volume to "mute")
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
      */
-    val touchcancelsCaptured get() = subscribe<TouchEvent>("touchcancel", true)
+    fun volumechangesCaptured(init: Event.() -> Unit): Listener<Event, T> =
+        subscribe(VOLUMECHANGE, true) { init(); true }
 
     /**
-     * occurs when a finger is removed from a touch screen
+     * occurs when the volume of the media has changed (includes setting the volume to "mute")
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
      */
-    val touchendsCaptured get() = subscribe<TouchEvent>("touchend", true)
+    fun volumechangesCapturedIf(selector: Event.() -> Boolean): Listener<Event, T> =
+        subscribe(VOLUMECHANGE, true, selector = selector)
 
     /**
-     * occurs when a finger is dragged across the screen
+     * occurs when the media has paused but is expected to resume (like when the media pauses to buffer more data)
      */
-    val touchmovesCaptured get() = subscribe<TouchEvent>("touchmove", true)
+    val waitingsCaptured: Listener<Event, T> get() = subscribe(WAITING, true)
 
     /**
-     * occurs when a finger is placed on a touch screen
+     * occurs when the media has paused but is expected to resume (like when the media pauses to buffer more data)
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
      */
-    val touchstartsCaptured get() = subscribe<TouchEvent>("touchstart", true)
+    fun waitingsCaptured(init: Event.() -> Unit): Listener<Event, T> = subscribe(WAITING, true) { init(); true }
 
     /**
-     * occurs once a page has unloaded (for <body>)
+     * occurs when the media has paused but is expected to resume (like when the media pauses to buffer more data)
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [Event]s on its [Flow]
      */
-    val unloadsCaptured get() = subscribe<Event>("unload", true)
+    fun waitingsCapturedIf(selector: Event.() -> Boolean): Listener<Event, T> =
+        subscribe(WAITING, true, selector = selector)
 
     /**
-     * occurs when the volume of the media has changed (includes setting the volume to "mute")
+     * occurs when the mouse wheel rolls up or down over an element
      */
-    val volumechangesCaptured get() = subscribe<Event>("volumechange", true)
+    val wheelsCaptured: Listener<WheelEvent, T> get() = subscribe(WHEEL, true)
 
     /**
-     * occurs when the media has paused but is expected to resume (like when the media pauses to buffer more data)
+     * occurs when the mouse wheel rolls up or down over an element
+     *
+     * @param init expression to manipulate the event dispatching like calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [WheelEvent]s on its [Flow]
      */
-    val waitingsCaptured get() = subscribe<Event>("waiting", true)
+    fun wheelsCaptured(init: WheelEvent.() -> Unit): Listener<WheelEvent, T> = subscribe(WHEEL, true) { init(); true }
 
     /**
      * occurs when the mouse wheel rolls up or down over an element
+     *
+     * @param selector expression to evaluate, which specific event should be emitted to the [Flow]. It is also
+     * possible and encouraged to manipulate the event dispatching by calling `stopPropagation` or similar DOM-API.
+     *
+     * @return a [Listener] that emits [WheelEvent]s on its [Flow]
      */
-    val wheelsCaptured get() = subscribe<WheelEvent>("wheel", true)
+    fun wheelsCapturedIf(selector: WheelEvent.() -> Boolean): Listener<WheelEvent, T> =
+        subscribe(WHEEL, true, selector = selector)
 }
 
 /**
@@ -832,8 +4086,12 @@ object Window : WithEvents<Window> {
 
     private val scope = MainScope()
 
-    override fun <X : Event> subscribe(eventName: String, capture: Boolean, init: Event.() -> Unit): Listener<X, Window> =
-        Listener(window.subscribe<X, Window>(eventName, capture, init).shareIn(scope, SharingStarted.Lazily))
+    override fun <X : Event> subscribe(
+        eventName: String,
+        capture: Boolean,
+        selector: X.() -> Boolean
+    ): Listener<X, Window> =
+        Listener(window.subscribe<X, Window>(eventName, capture, selector).shareIn(scope, SharingStarted.Lazily))
 
     override val aborts by lazy { super.aborts }
     override val afterprints by lazy { super.afterprints }
diff --git a/core/src/jsMain/kotlin/dev/fritz2/core/listener.kt b/core/src/jsMain/kotlin/dev/fritz2/core/listener.kt
index 8e9d2943c..457d0911d 100644
--- a/core/src/jsMain/kotlin/dev/fritz2/core/listener.kt
+++ b/core/src/jsMain/kotlin/dev/fritz2/core/listener.kt
@@ -1,10 +1,10 @@
 @file:Suppress("unused")
+
 package dev.fritz2.core
 
 import kotlinx.coroutines.channels.awaitClose
 import kotlinx.coroutines.flow.Flow
 import kotlinx.coroutines.flow.callbackFlow
-import kotlinx.coroutines.flow.filter
 import kotlinx.coroutines.flow.map
 import org.w3c.dom.*
 import org.w3c.dom.events.Event
@@ -12,89 +12,45 @@ import org.w3c.dom.events.EventTarget
 import org.w3c.files.FileList
 
 /**
- * Creates a [Listener] for the given [Event] type and [name].
+ * Creates a [Listener] for the given [Event] type and [eventName].
+ *
+ * @param eventName the [DOM-API name](https://developer.mozilla.org/en-US/docs/Web/API/Element#events) of an event.
+ * Can be a custom name.
+ * @param capture if `true`, activates capturing mode, else remains in `bubble` mode (default)
+ * @param selector optional lambda expression to select specific events with option to manipulate it
+ * (e.g. `preventDefault` or `stopPropagation`).
+ *
+ * @return a [Listener]-object, which is more or less a [Flow] of the specific `Event`-type.
  */
-fun <X : Event, T : EventTarget> T.subscribe(
-    name: String,
+fun <E : Event, T : EventTarget> T.subscribe(
+    eventName: String,
     capture: Boolean = false,
-    init: Event.() -> Unit = {}
-): Listener<X, T> =
-    Listener(callbackFlow {
-        val listener: (Event) -> Unit = {
-            try {
-                it.init()
-                trySend(it.unsafeCast<X>())
-            } catch (e: Exception) {
-                console.error("Unexpected event type while listening for `$name` event", e)
+    selector: E.() -> Boolean = { true }
+): Listener<E, T> =
+    Listener(
+        callbackFlow {
+            val listener: (E) -> Unit = {
+                try {
+                    if (it.selector()) trySend(it.unsafeCast<E>())
+                } catch (e: Exception) {
+                    console.error("Unexpected event type while listening for `$eventName` event", e)
+                }
             }
-        }
-        this@subscribe.addEventListener(name, listener, capture)
+            this@subscribe.addEventListener(eventName, listener.unsafeCast<Event.() -> Unit>(), capture)
 
-        awaitClose { this@subscribe.removeEventListener(name, listener, capture) }
-    }.filter { it.asDynamic().fritz2StopPropagation == undefined })
+            awaitClose { this@subscribe.removeEventListener(eventName, listener.unsafeCast<Event.() -> Unit>(), capture) }
+        }
+    )
 
 /**
  * Encapsulates the [Flow] of the [Event].
+ *
+ * Acts as a marker class in order to keep the type of the element, so we can offer dedicated methods to extract
+ * values from some specific events.
+ *
+ * @see [values]
  */
-class Listener<X: Event, out T: EventTarget>(private val events: Flow<X>): Flow<X> by events {
-
-    constructor(listener: Listener<X, T>) : this(listener.events)
-
-    /**
-     * Calls [Event.preventDefault] on the [Event]-flow.
-     */
-    fun preventDefault(): Listener<X, T> = Listener(this.events.map { it.preventDefault(); it })
-
-    /**
-     * Calls [Event.stopImmediatePropagation] on the [Event]-flow.
-     */
-    fun stopImmediatePropagation(): Listener<X, T> = Listener(this.events.map {
-        it.stopImmediatePropagation()
-        it.asDynamic().fritz2StopPropagation = true
-        it
-    })
-
-    /**
-     * Calls [Event.stopPropagation] on the [Event]-flow.
-     */
-    fun stopPropagation(): Listener<X, T> = Listener(this.events.map {
-        it.stopPropagation()
-        it.asDynamic().fritz2StopPropagation = true
-        it
-    })
-
-    /**
-     * Calls [Event.composedPath] on the [Event]-flow.
-     */
-    fun composedPath(): Flow<Array<EventTarget>> = this.events.map { it.composedPath() }
-
-}
-
-/**
- * Calls [Event.preventDefault] on the [Event]-flow.
- */
-fun <E: Event> Flow<E>.preventDefault(): Flow<E> = this.map { it.preventDefault(); it }
-/**
- * Calls [Event.stopImmediatePropagation] on the [Event]-flow.
- */
-fun <E: Event> Flow<E>.stopImmediatePropagation(): Flow<E> = this.map {
-    it.stopImmediatePropagation()
-    it.asDynamic().fritz2StopPropagation = true
-    it
-}
-/**
- * Calls [Event.stopPropagation] on the [Event]-flow.
- */
-fun <E: Event> Flow<E>.stopPropagation(): Flow<E> = this.map {
-    it.stopPropagation()
-    it.asDynamic().fritz2StopPropagation = true
-    it
-}
-/**
- * Calls [Event.composedPath] on the [Event]-flow.
- */
-fun <E: Event> Flow<E>.composedPath(): Flow<Array<EventTarget>> = this.map { it.composedPath() }
-
+value class Listener<X : Event, out T : EventTarget>(private val events: Flow<X>) : Flow<X> by events
 
 /**
  * Extracts the [HTMLInputElement.value] from the [Event.target].
@@ -103,7 +59,7 @@ fun Listener<*, HTMLInputElement>.values(): Flow<String> =
     this.map { it.target.unsafeCast<HTMLInputElement>().value }
 
 /**
- * Extracts the [HTMLInputElement.value] from the [Event.target].
+ * Extracts the [HTMLSelectElement.value] from the [Event.target].
  */
 fun Listener<*, HTMLSelectElement>.values(): Flow<String> =
     this.map { it.target.unsafeCast<HTMLSelectElement>().value }
@@ -115,7 +71,7 @@ fun Listener<*, HTMLFieldSetElement>.values(): Flow<String> =
     this.map { it.target.unsafeCast<HTMLInputElement>().value }
 
 /**
- * Extracts the [HTMLInputElement.value] from the [Event.target].
+ * Extracts the [HTMLTextAreaElement.value] from the [Event.target].
  */
 fun Listener<*, HTMLTextAreaElement>.values(): Flow<String> =
     this.map { it.target.unsafeCast<HTMLTextAreaElement>().value }
diff --git a/core/src/jsMain/kotlin/dev/fritz2/core/tags.kt b/core/src/jsMain/kotlin/dev/fritz2/core/tags.kt
index 6bca7be60..28581dfa1 100644
--- a/core/src/jsMain/kotlin/dev/fritz2/core/tags.kt
+++ b/core/src/jsMain/kotlin/dev/fritz2/core/tags.kt
@@ -238,13 +238,8 @@ interface Tag<out E : Element> : RenderContext, WithDomNode<E>, WithEvents<E> {
         }
     }
 
-    /**
-     * Creates an [Listener] for the given event [eventName].
-     *
-     * @param eventName of the [Event] to listen for
-     */
-    override fun <X : Event> subscribe(eventName: String, capture: Boolean, init: Event.() -> Unit): Listener<X, E> =
-        Listener(domNode.subscribe(eventName, capture, init))
+    override fun <X : Event> subscribe(eventName: String, capture: Boolean, selector: X.() -> Boolean): Listener<X, E> =
+        Listener(domNode.subscribe(eventName, capture, selector))
 
     /**
      * Adds text-content of a [Flow] at this position
diff --git a/core/src/jsTest/kotlin/dev/fritz2/core/events.kt b/core/src/jsTest/kotlin/dev/fritz2/core/events.kt
index cfcb89528..3b9c12bbf 100644
--- a/core/src/jsTest/kotlin/dev/fritz2/core/events.kt
+++ b/core/src/jsTest/kotlin/dev/fritz2/core/events.kt
@@ -28,7 +28,7 @@ class EventsTest {
             section {
                 input(id = inputId) {
                     value(store.data)
-                    changes.preventDefault().values() handledBy store.update
+                    changes { preventDefault() }.values() handledBy store.update
                     inputs.values() handledBy store.update
                 }
             }
@@ -69,10 +69,10 @@ class EventsTest {
         render {
             section {
                 div(id = resultId) {
-                    store.data.renderText()
+                    store.data.renderText(into = this)
                 }
                 button(id = buttonId) {
-                    clicks.preventDefault() handledBy store.addADot
+                    clicks { preventDefault() } handledBy store.addADot
                 }
             }
         }
@@ -317,7 +317,7 @@ class EventsTest {
 
         val pathSize = storeOf(0)
         val setSize = pathSize.handle<Int> { _, size ->
-            console.log("Store: $size\n");
+            console.log("Store: $size\n")
             size
         }
 
@@ -356,7 +356,6 @@ class EventsTest {
         assertEquals(1, wrapperDiv.getAttribute("path-size")?.toInt())
     }
 
-    @Ignore
     @Test
     fun testWindowListenerForStopImmediatePropagation() = runTest {
 
@@ -369,7 +368,7 @@ class EventsTest {
         val windowStore = object : RootStore<String>("", job = Job()) {}
 
         render {
-            Window.clicks.stopImmediatePropagation().map {
+            Window.clicks { stopImmediatePropagation() }.map {
                 windowEventText
             } handledBy windowStore.update
 
@@ -428,32 +427,25 @@ class EventsTest {
 
     @Test
     fun testEventCapturedStopPropagation() = runTest {
-
-        val outerId = Id.next()
         val innerId = Id.next()
-
-        val store = storeOf("")
-        val concat = store.handle<String> { self, input -> self + input }
+        var result = ""
 
         render {
-            div(id = outerId) {
-                attr("data-value", store.data)
-                clicksCaptured.stopPropagation().map { "o" } handledBy concat
+            div {
+                clicksCaptured { stopPropagation() } handledBy { result += "outer" }
+                clicks handledBy { result += "outer" }
 
                 div(id = innerId) {
-                    clicks.stopPropagation().map { "i" } handledBy concat
+                    clicks handledBy { result += "inner" }
                 }
             }
         }
 
         delay(100)
-        val outerDiv = document.getElementById(outerId).unsafeCast<HTMLDivElement>()
-        assertEquals("", outerDiv.getAttribute("data-value"))
-
         val innerDiv = document.getElementById(innerId).unsafeCast<HTMLDivElement>()
         innerDiv.click()
         delay(100)
-        assertEquals("o", outerDiv.getAttribute("data-value"))
+        assertEquals("outer", result)
     }
 
     @Test
@@ -488,31 +480,56 @@ class EventsTest {
 
     @Test
     fun testEventBubbledStopPropagation() = runTest {
-
-        val outerId = Id.next()
         val innerId = Id.next()
-
-        val store = storeOf("")
-        val concat = store.handle<String> { self, input -> self + input }
+        var result = ""
 
         render {
-            div(id = outerId) {
-                attr("data-value", store.data)
-                clicks.stopPropagation().map { "o" } handledBy concat
+            div {
+                +"outer div"
 
-                div(id = innerId) {
-                    clicks.stopPropagation().map { "i" } handledBy concat
+                clicks handledBy { result += "outer" }
+
+                button(id = innerId) {
+                    +"Button"
+                    type("button")
+
+                    clicks { stopPropagation() } handledBy { result += "in" }
+                    clicks handledBy { result += "side" }
                 }
             }
         }
 
         delay(100)
-        val outerDiv = document.getElementById(outerId).unsafeCast<HTMLDivElement>()
-        assertEquals("", outerDiv.getAttribute("data-value"))
-
         val innerDiv = document.getElementById(innerId).unsafeCast<HTMLDivElement>()
         innerDiv.click()
         delay(100)
-        assertEquals("i", outerDiv.getAttribute("data-value"))
+        assertEquals("inside", result)
+    }
+
+    @Test
+    fun testEventFactoryWithFilteringSelectorDropsUnwantedEvents() = runTest {
+        val tagId = Id.next()
+        var result = ""
+
+        val keysToProcess = "fritz2".map { shortcutOf(it.toString()) }.toSet()
+        val keyPool: List<String> = (('a'..'z') + ('0'..'9')).map(Char::toString)
+            // swap `i` with`r` to get the right sequence of keys pressed for our framework name ;-)
+            .map { if(it == "i") "r" else if(it == "r") "i" else it}
+
+        render {
+            div(id = tagId) {
+                keydownsIf { shortcutOf(this) in keysToProcess } handledBy { result += it.key }
+            }
+        }
+
+        delay(100)
+        val innerDiv = document.getElementById(tagId).unsafeCast<HTMLDivElement>()
+
+        keyPool.forEach { key ->
+            innerDiv.dispatchEvent(KeyboardEvent("keydown", KeyboardEventInit(key = key)))
+            delay(50)
+        }
+
+        assertEquals("fritz2", result)
     }
 }
\ No newline at end of file
diff --git a/headless/src/jsMain/kotlin/dev/fritz2/headless/components/checkboxGroup.kt b/headless/src/jsMain/kotlin/dev/fritz2/headless/components/checkboxGroup.kt
index b9e39c726..7bf05db41 100644
--- a/headless/src/jsMain/kotlin/dev/fritz2/headless/components/checkboxGroup.kt
+++ b/headless/src/jsMain/kotlin/dev/fritz2/headless/components/checkboxGroup.kt
@@ -2,7 +2,6 @@ package dev.fritz2.headless.components
 
 import dev.fritz2.core.*
 import dev.fritz2.headless.foundation.*
-import kotlinx.coroutines.flow.filter
 import kotlinx.coroutines.flow.first
 import kotlinx.coroutines.flow.map
 import org.w3c.dom.*
@@ -166,11 +165,15 @@ class CheckboxGroup<C : HTMLElement, T>(tag: Tag<C>, private val explicitId: Str
                 if (withKeyboardNavigation) {
                     value.handler?.invoke(
                         this,
-                        keydowns.filter { shortcutOf(it) == Keys.Space }
-                            .stopImmediatePropagation().preventDefault()
-                            .map {
-                                val value = value.data.first()
-                                if (value.contains(option)) value - option else value + option
+                        keydownsIf {
+                            if (shortcutOf(this) == Keys.Space) {
+                                preventDefault()
+                                stopImmediatePropagation()
+                                true
+                            } else false
+                        }.map {
+                            val value = value.data.first()
+                            if (value.contains(option)) value - option else value + option
                         })
                 }
             }.also { toggle = it }
diff --git a/headless/src/jsMain/kotlin/dev/fritz2/headless/components/disclosure.kt b/headless/src/jsMain/kotlin/dev/fritz2/headless/components/disclosure.kt
index 77cc3d771..9cbd7ee22 100644
--- a/headless/src/jsMain/kotlin/dev/fritz2/headless/components/disclosure.kt
+++ b/headless/src/jsMain/kotlin/dev/fritz2/headless/components/disclosure.kt
@@ -12,7 +12,7 @@ import org.w3c.dom.HTMLElement
 /**
  * This class provides the building blocks to implement a disclosure.
  *
- * Use [disclosure] functions to create an instance, set up the needed [Hook]s or [Property]s and refine the
+ * Use [disclosure] functions to create an instance, set up the needed `Hook`s or `Property`s, and refine the
  * component by using the further factory methods offered by this class.
  *
  * For more information refer to the [official documentation](https://www.fritz2.dev/headless/disclosure)
@@ -49,7 +49,7 @@ class Disclosure<C : HTMLElement>(tag: Tag<C>, id: String?) : Tag<C> by tag, Ope
             content()
             attr(Aria.expanded, opened.asString())
             attr("tabindex", "0")
-            activations.preventDefault().stopPropagation() handledBy toggle
+            activations { preventDefault(); stopPropagation() } handledBy toggle
         }.also { button = it }
     }
 
diff --git a/headless/src/jsMain/kotlin/dev/fritz2/headless/components/listbox.kt b/headless/src/jsMain/kotlin/dev/fritz2/headless/components/listbox.kt
index 3f3962003..da37b2652 100644
--- a/headless/src/jsMain/kotlin/dev/fritz2/headless/components/listbox.kt
+++ b/headless/src/jsMain/kotlin/dev/fritz2/headless/components/listbox.kt
@@ -76,7 +76,7 @@ class Listbox<T, C : HTMLElement>(tag: Tag<C>, id: String?) : Tag<C> by tag, Ope
             if (!openState.isSet) openState(storeOf(false))
             content()
             attr(Aria.expanded, opened.asString())
-            activations.preventDefault().stopPropagation() handledBy toggle
+            activations { preventDefault(); stopPropagation() } handledBy toggle
         }.also { button = it }
     }
 
diff --git a/headless/src/jsMain/kotlin/dev/fritz2/headless/components/menu.kt b/headless/src/jsMain/kotlin/dev/fritz2/headless/components/menu.kt
index 2d8167614..0aa07003f 100644
--- a/headless/src/jsMain/kotlin/dev/fritz2/headless/components/menu.kt
+++ b/headless/src/jsMain/kotlin/dev/fritz2/headless/components/menu.kt
@@ -71,7 +71,7 @@ class Menu<C : HTMLElement>(tag: Tag<C>, id: String?) : Tag<C> by tag, OpenClose
             if (!openState.isSet) openState(storeOf(false))
             content()
             attr(Aria.expanded, opened.asString())
-            activations.preventDefault().stopPropagation() handledBy toggle
+            activations { preventDefault(); stopPropagation() } handledBy toggle
         }.also { button = it }
     }
 
@@ -101,7 +101,7 @@ class Menu<C : HTMLElement>(tag: Tag<C>, id: String?) : Tag<C> by tag, OpenClose
         "$componentId-items",
         scope,
         this@Menu.opened,
-        reference = button ?: button {  },
+        reference = button ?: button { },
         ariaHasPopup = Aria.HasPopup.menu
     ) {
 
diff --git a/headless/src/jsMain/kotlin/dev/fritz2/headless/components/popOver.kt b/headless/src/jsMain/kotlin/dev/fritz2/headless/components/popOver.kt
index 4c8e7a979..b184806b7 100644
--- a/headless/src/jsMain/kotlin/dev/fritz2/headless/components/popOver.kt
+++ b/headless/src/jsMain/kotlin/dev/fritz2/headless/components/popOver.kt
@@ -43,7 +43,7 @@ class PopOver<C : HTMLElement>(tag: Tag<C>, id: String?) : Tag<C> by tag, OpenCl
             if (!openState.isSet) openState(storeOf(false))
             content()
             attr(Aria.expanded, opened.asString())
-            activations handledBy toggle
+            activations() handledBy toggle
         }.also { button = it }
     }
 
diff --git a/headless/src/jsMain/kotlin/dev/fritz2/headless/components/switch.kt b/headless/src/jsMain/kotlin/dev/fritz2/headless/components/switch.kt
index 6855f9525..13a7be9b3 100644
--- a/headless/src/jsMain/kotlin/dev/fritz2/headless/components/switch.kt
+++ b/headless/src/jsMain/kotlin/dev/fritz2/headless/components/switch.kt
@@ -38,10 +38,13 @@ abstract class AbstractSwitch<C : HTMLElement>(
         value.handler?.invoke(this, clicks.map { !value.data.first() })
         value.handler?.invoke(
             this,
-            keydowns.filter { shortcutOf(it) == Keys.Space }
-                .stopImmediatePropagation()
-                .preventDefault()
-                .map { !value.data.first() }
+            keydownsIf {
+                if (shortcutOf(this) == Keys.Space) {
+                    stopImmediatePropagation()
+                    preventDefault()
+                    true
+                } else false
+            }.map { !value.data.first() }
         )
     }
 
@@ -170,7 +173,7 @@ class SwitchWithLabel<C : HTMLElement>(tag: Tag<C>, id: String?) :
     ): Tag<CL> {
         addComponentStructureInfo("switchLabel", this@switchLabel.scope, this)
         return tag(this, classes, "$componentId-label", scope, content).apply {
-            value.handler?.invoke(this, clicks.preventDefault().map { !value.data.first() })
+            value.handler?.invoke(this, clicks { preventDefault() }.map { !value.data.first() })
         }.also { label = it }
     }
 
diff --git a/headless/src/jsMain/kotlin/dev/fritz2/headless/components/tabGroup.kt b/headless/src/jsMain/kotlin/dev/fritz2/headless/components/tabGroup.kt
index 07df4e57e..c84f20ed8 100644
--- a/headless/src/jsMain/kotlin/dev/fritz2/headless/components/tabGroup.kt
+++ b/headless/src/jsMain/kotlin/dev/fritz2/headless/components/tabGroup.kt
@@ -138,16 +138,22 @@ class TabGroup<C : HTMLElement>(tag: Tag<C>, id: String?) : Tag<C> by tag {
                 }
             }.handledBy(this, withActiveUpdates(::nextByKeys))
 
-            keydowns.filter { setOf(Keys.Home, Keys.PageUp).contains(shortcutOf(it)) }
-                .stopImmediatePropagation()
-                .preventDefault()
-                .map { }
+            keydownsIf {
+                if (setOf(Keys.Home, Keys.PageUp).contains(shortcutOf(this))) {
+                    stopImmediatePropagation()
+                    preventDefault()
+                    true
+                } else false
+            }.map { }
                 .handledBy(this, withActiveUpdates(::firstByKey))
 
-            keydowns.filter { setOf(Keys.End, Keys.PageDown).contains(shortcutOf(it)) }
-                .stopImmediatePropagation()
-                .preventDefault()
-                .map { }
+            keydownsIf {
+                if (setOf(Keys.End, Keys.PageDown).contains(shortcutOf(this))) {
+                    stopImmediatePropagation()
+                    preventDefault()
+                    true
+                } else false
+            }.map { }
                 .handledBy(this, withActiveUpdates(::lastByKey))
         }
 
diff --git a/headless/src/jsMain/kotlin/dev/fritz2/headless/components/toast.kt b/headless/src/jsMain/kotlin/dev/fritz2/headless/components/toast.kt
index 06052ed31..2c9435af8 100644
--- a/headless/src/jsMain/kotlin/dev/fritz2/headless/components/toast.kt
+++ b/headless/src/jsMain/kotlin/dev/fritz2/headless/components/toast.kt
@@ -25,10 +25,10 @@ private object ToastStore : RootStore<List<ToastSlice>>(emptyList(), job = Job()
 
     init {
         // Close the most recent toast if escape is pressed:
-        Window.keydowns
-            .map { it to current }
-            .filter { (event, toasts) -> shortcutOf(event.key) == Keys.Escape && toasts.isNotEmpty() }
-            .map { (_, toasts) -> toasts.last().id } handledBy remove
+        Window.keydownsIf { shortcutOf(this) == Keys.Escape }
+            .map { current }
+            .filter { toasts -> toasts.isNotEmpty() }
+            .map { toasts -> toasts.last().id } handledBy remove
     }
 }
 
diff --git a/headless/src/jsMain/kotlin/dev/fritz2/headless/foundation/OpenClose.kt b/headless/src/jsMain/kotlin/dev/fritz2/headless/foundation/OpenClose.kt
index 3676381ca..aa48c563a 100644
--- a/headless/src/jsMain/kotlin/dev/fritz2/headless/foundation/OpenClose.kt
+++ b/headless/src/jsMain/kotlin/dev/fritz2/headless/foundation/OpenClose.kt
@@ -15,7 +15,7 @@ import org.w3c.dom.events.Event
  * Typical examples of [OpenClose] based components are modal dialogs or all popup-components, that appear and
  * disappear based upon user interaction.
  */
-abstract class OpenClose: WithJob {
+abstract class OpenClose : WithJob {
 
     val openState = DatabindingProperty<Boolean>()
 
@@ -42,13 +42,22 @@ abstract class OpenClose: WithJob {
     /**
      * Combines all events relevant for toggling an element that implements the [OpenClose] behavior. By default, these
      * events are clicking the left mouse button or pressing the Enter or Space keys.
+     *
+     * @param init pass an optional lambda to execute event handling manipulations, like calling
+     * `stopPropagation` or alike
      */
-    internal val Tag<*>.activations: Flow<Event> get() {
+    internal fun Tag<*>.activations(init: Event.() -> Unit = {}): Flow<Event> =
         // If the wrapped element is a button, click events are already triggered by the Enter and Space keys.
-        return if (domNode is HTMLButtonElement) {
-            clicks
+        if (domNode is HTMLButtonElement) {
+            clicks { init() }
         } else {
-            merge(clicks, keydowns.filter { shortcutOf(it) in setOf(Keys.Space, Keys.Enter) })
+            merge(
+                clicks { init() },
+                keydownsIf {
+                    (shortcutOf(this) in setOf(Keys.Space, Keys.Enter)).also {
+                        if(it) init()
+                    }
+                })
         }
-    }
+
 }
diff --git a/www/src/pages/docs/30_Render HTML.md b/www/src/pages/docs/30_Render HTML.md
index 402ce778c..bd05c8779 100644
--- a/www/src/pages/docs/30_Render HTML.md	
+++ b/www/src/pages/docs/30_Render HTML.md	
@@ -1188,8 +1188,8 @@ render {
 
 ### Rendering on Stand-Alone Flows
 
-Coming soon
+Documentation coming soon
 
 ### Custom Tags / RenderContexts
 
-Coming soon 
+Documentation coming soon
diff --git a/www/src/pages/docs/45_EventHandling.md b/www/src/pages/docs/45_EventHandling.md
new file mode 100644
index 000000000..47863ebdc
--- /dev/null
+++ b/www/src/pages/docs/45_EventHandling.md
@@ -0,0 +1,452 @@
+---
+title: Event Handling
+description: "Dealing with events in fritz2"
+layout: layouts/docs.njk
+permalink: /docs/events/
+eleventyNavigation:
+  key: events
+  parent: documentation
+  title: Event Handling
+  order: 45
+---
+
+## Overview
+
+In fritz2, all HTML-Events are either encapsulated within a `Tag`-scope or within the special `Window`-object, which both
+offer access to all global events. A complete list can be found in the
+[events.kt](/blob/master/core/src/jsMain/kotlin/dev/fritz2/core/events.kt) file.
+
+The most important aspect to understand is that an event in fritz2 is just a type derived by `Flow`. You can
+use all events as the source of an action which should be handled by a handler-function.
+
+Take the `click`-event as a simple example:
+
+```kotlin
+render { 
+    button {
+        +"Click me!"
+        clicks handledBy { alert("Button was clicked!") }
+    //  ^^^^^^
+    //  this is just a `Flow` that can be handled     
+    }
+}
+```
+
+As a naming convention, all HTML events will be suffixed with an `s` in order to emphasize them being a flow 
+transporting all values that are emitted by the DOM API.
+
+Since events can carry important data and information, events in fritz2 are more or less `Flow`s that emit `Event`-objects.
+Their type is called `Listener`, but that is really just a name. Think of a `Listener` as a "flow of events".
+Such a `Listener` will therefore provide those data as the value of its own flow:
+```kotlin
+div {
+    val storedName = storeOf("")
+    input {
+        type("text")
+        changes.map { it.target.unsafeCast<HTMLInputElement>().value } handledBy storedName.update
+        //            ^^
+        //            grab the value of type `Event` and access its fields
+        //            there are different sub-types of `Event` like `PointerEvent`, `KeyboardEvent` or `InputEvent`
+        //            in this case
+    }
+    storedName.data.renderText()
+}
+```
+
+Depending on the `Event`-type, you can access its special fields. For common use cases like getting the value of the
+input-element, there are special convenience functions to make event handling more pleasant:
+```kotlin
+div {
+    val storedName = storeOf("")
+    input {
+        type("text")
+        changes.values() handledBy storedName.update
+        //      ^^^^^^^^
+        //      extracts the value of the `InputEvent`
+    }
+    storedName.data.renderText()
+}
+```
+
+## Essentials
+
+### Controlling the Event-Flow
+
+Besides using some UI-event as source of action to modify application state, there are two types of dedicated event
+functions that enable further operations to control the event-flow within the DOM:
+- Stopping the propagation and preventing the default behaviour.
+- Filtering the event and in certain cases preventing that values are emitted
+
+#### Stop Propagation
+
+In order to stop an event from bubbling up the tree (or down by `capture`), the DOM-API exposes these two methods
+upon the `Event`-objects:
+- [stopPropagation](https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation)
+- [stopImmediatePropagation](https://developer.mozilla.org/en-US/docs/Web/API/Event/stopImmediatePropagation)
+
+In order to apply those methods before the `Event` is emitted on the `Flow`, fritz2 offers two variants of factory
+functions to create the event-flow:
+- one is named exactly like the `property` itself: `clicks(init: MouseEvent.() -> Unit)`
+- the other adds an `If`-suffix like this: `clicksIf(selector: MouseEvent.() -> Boolean)`
+
+Those two factories enable a user to control the further processing (in addition to the custom written `Flow`-`Handler`-binding).
+
+Look at the example below:
+```kotlin
+div {
+    +"Parent"
+    button {
+        +"default propagation"
+        type("button")
+        // first event handling
+        clicks handledBy { console.log("default propagation clicked!") }
+        // second event handling
+        clicks handledBy { window.alert("Button was clicked!") }
+    }
+    // `clicks` "bubbles" per default -> event will reach the parent DOM-node, so we can react to it:
+    clicks handledBy { console.log("click reached Parent!") }
+}
+```
+
+When the button is clicked, a `click` event is emitted and appears on the `clicks`-Listener `Flow`.
+There are two event-handlers defined inside the `button`-element. The first just logs to the console, the second
+opens an alert-window.
+
+Inside the parent-`div`-element, we establish another event handling which also reacts to a `click`-event.
+
+The user can now click on the button. The expected result is:
+- a log message in the console: `default propagation clicked!`
+- an alert window opens with the text message `Button was clicked!`
+- and after closing it, there is another log message `click reached Parent!`, as `click` bubbles per default.
+
+Now let uns investigate how the behaviour changes if we use the `clicks()`-method with the `init`-parameter on
+the first event-handling in order to call `stopPropagation` of the `Event`-object:
+
+```kotlin
+div {
+    +"Parent"
+    button {
+        +"stopPropagation"
+        // We use the `clicks(init: MouseEvent.() -> Unit)` variant here:
+        clicks { stopPropagation() } handledBy { console.log("stopPropagation clicked!") }
+        //       ^^^^^^^^^^^^^^^^^
+        //       we want the event processing to stop bubbling to its parent.
+        //       as the receiver type is `MouseEvent`, which derives from `Event`, we can call
+        //       its method directly
+        clicks handledBy { window.alert("Button was clicked!") }
+    }
+    // no value will appear on this `clicks`-Listener anymore!
+    clicks handledBy { console.log("click reached Parent!") }
+}
+```
+
+The user can now click on the button. The expected result is:
+- a log message in the console: `stopPropagation clicked!`
+- an alert window opens with the text message `Button was clicked!`
+
+The log message of the parent-`div` does no longer appear!
+
+This is the desired effect of the `Event.stopPropagation()`-call: All event handling within the DOM-Element itself will
+be executed, but the bubbling stops after that.
+
+It is not important on which event-processing code the call is made. We could easily call the `stopPropagation` within
+the alert-handling without getting a different behaviour.
+
+```kotlin
+clicks handledBy { console.log("stopPropagation clicked!") }
+clicks { stopPropagation() } handledBy { window.alert("Button was clicked!") }
+//       ^^^^^^^^^^^^^^^^^
+//       the sequence of the call is not important!
+```
+
+Now let us investigate the `stopImmediatePropagation`-method and how it differs from the none immediate variant:
+
+```kotlin
+div {
+    +"Parent"
+    button {
+        +"stopImmediatePropagation"
+        clicks { stopImmediatePropagation() } handledBy { console.log("stopImmediatePropagation clicked!") }
+        //       ^^^^^^^^^^^^^^^^^^^^^^^^^^
+        //       we want the event processing to stop bubbling to its parent *and* all following handlers
+        
+        // this listener follows the `stopImmediatePropagation` -> no value will appear on its `clicks`-Listener 
+        // anymore
+        clicks handledBy { window.alert("Button was clicked!") }
+    }
+    // no value will appear on this `clicks`-Listener anymore!
+    clicks handledBy { console.log("click reaches Parent!") }
+}
+```
+
+The user can now click on the button. The expected result is:
+- a log message in the console: `stopPropagation clicked!` - nothing more!
+
+The difference becomes obvious now: All listeners following the `stopImmediatePropagation` call will not get any of the 
+emitted values. Additionally, the bubbling also is stopped, so no handlers of any parent-elements will be called.
+
+So this time, the sequential order is important! If we switch the sequence, the alert will appear again, but
+other events will not:
+
+```kotlin
+// this handler will be called -> stopping is not applied yet
+clicks handledBy { window.alert("Button was clicked!") }
+
+clicks { stopImmediatePropagation() } handledBy { console.log("stopImmediatePropagation clicked!") }
+
+// this listener follows the `stopImmediatePropagation` -> no value will appear on its `clicks`-Listener anymore!
+clicks handledBy { console.log("This will not be logged!") }
+```
+
+::: info
+The same behaviour applies to *event capturing* - it then works the other way round, so the event values won't appear
+on handlers within child-elements any longer.
+:::
+
+#### Prevent Default Behaviour
+
+Just like the propagation stopping, the `preventDefault()`-method can be easily called on an `Event` by using the
+dedicated factory-functions with an `init`-parameter:
+
+```kotlin
+clicks { preventDefault() } handledBy { ... }
+```
+
+#### Filtering events
+
+Sometimes it is useful to filter certain events based on the  individual event's values. Good examples are all kinds of
+`KeyboardEvent`s, like `keydowns` driving the behaviour of a component, such as reacting specifically to keys like
+`Enter`, `Escape` or alike only.
+
+For those cases, specialized event-factories marked with an `If` suffix are provided.
+`keydownsIf(selector: KeyboardEvent.() -> Boolean)` is one of them.
+
+As you can see, they require a `selector`, so the underlying mechanism will emit the `Event` only if the selector
+resolves to `true`, but drop it otherwise.
+
+```kotlin
+keydownsIf { shortcutOf(this) == Keys.Space } handledBy { ... }
+//           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+//           Boolean expression: If "Space" is pressed, resolve to `true` -> emit the event, so it can be handled. 
+//           (This syntax is explained in a following section about "Keyboard-Events and Shortcut-API")
+```
+
+Often you need to combine this with `Event`-modifying calls like `preventDefault` or `stopPropagation`. This can be
+easily done here, too:
+
+```kotlin
+keydownsIf {
+    if (shortcutOf(this) == Keys.Space) {
+        // if "Space" was pressed manipulate the event processing
+        stopImmediatePropagation() 
+        preventDefault()
+        true 
+    } else false
+} handledBy { ... }
+```
+
+### Global Event-Handling With the Window-Object
+
+In order to bind events to a handler reacting on the top outermost level, fritz2 offers the `Window`-object.
+
+It offers all events that regular DOM-elements expose as well, without the need to be called within a specific node;
+those events can be called from everywhere inside the initial `render`-function.
+
+This can be useful to react to certain actions on a global level, like specific keys a user might press.
+
+For example, imagine an app which prohibits vertical scrolling by hitting the "Space" key.
+This can be realized with the following code snippet:
+```kotlin
+render {
+    Window.keydowns {
+        if (shortcutOf(this) == Keys.Space) {
+            preventDefault()
+        }
+    } handledBy { }
+}
+```
+
+### Keyboard-Events and Shortcut-API
+
+fritz2 offers a handy shortcut API that allows easy combination of shortcuts with modifier shortcuts, constructing
+those from a KeyboardEvent, and also prevents meaningless combinations of different shortcuts:
+
+```kotlin
+// Constructing a shortcut by hand
+Shortcut("K") 
+// -> Shortcut(key = "K", ctrl = false, alt = false, shift = false, meta = false)
+
+// Or use factory function:
+shortcutOf("K")
+
+// Set modifier states, need to use constructor:
+Shortcut("K", ctrl = true) // Shortcut(key= "K", ctrl = true, alt = false, shift = false, meta = false)
+
+// Constructing a shortcut from a KeyboardEvent
+div {
+    keydowns.map { shortcutOf(it) } handledBy { /* use shortcut-object for further processing */ }
+    //                        ^^
+    //                        use KeyboardEvent to construct a Shortcut-object with all potential
+    //                        modifier key states reflected
+}
+
+// Using predefined shortcuts from Keys object
+Keys.Enter // named-key for the enter keystroke, a `Shortcut`
+Keys.Alt // `ModifierShortcut` -> needs to be combined with a "real" shortcut in order to use it for further processing
+// The same but more cumbersome and prone to typos
+Shortcut("Enter")
+// Not the same (!)
+Shortcut("Alt") // -> Shortcut(key= "Alt", ..., alt = false)
+Keys.Alt // -> ModifierKey-object with alt = true property!
+
+// Constructing a shortcut with some modifier shortcuts
+Shortcut("K") + Keys.Control
+// Same result, but much more readable the other way round:
+Keys.Control + "K"
+
+// Defining some common combination:
+val searchKey = Keys.Control + Keys.Shift + "F"
+//              ^^^^^^^^^^^^
+//              You can start with a modifier shortcut.
+//              Appending a String to a ModifierKey will finally lead to a `Shortcut`.
+
+val tabbing = setOf(Keys.Tab, Keys.Shift + Keys.Tab)
+
+// API prevents accidental usage: WON'T COMPILE because real shortcuts can't be combined
+Shortcut("F") + Shortcut("P") 
+
+// Shortcut is a data class → equality is total:
+Keys.Control + Keys.Shift + "K" == Shortcut("K", shift = true, ctrl= true, alt = false, meta = false)
+// But
+Keys.Control + Keys.Shift + "K" != Shortcut("K", shift = false, ctrl= true, alt = false, meta = false)
+//             ^^^^^^^^^^                        ^^^^^^^^^^^^^
+//                 +-----------------------------------+
+
+// Case sensitive, too. Further impact is explained in next section.
+shortcutOf("k") != shortcutOf("K")
+```
+
+Be aware of the fact that the key-property is taken from the event as it is. This is important for all upper case keys:
+The browser will always send an event with shift-property set to true, so in order to match it, you must construct
+the matching shortcut with the Shift-Modifier:
+
+```kotlin
+// Goal: Match upper case "K" (or to be more precise: "Shift + K")
+
+// Failing attempt
+keydowns.events.filter { shortcutOf(it) == shortcutOf("K") } handledBy { /* ... */ }
+//                       ^^^^^^^^^^^^^^    ^^^^^^^^^^^^^^^
+//                       |                 Shortcut(key = "K", shift = false, ...)
+//                       |                                     ^^^^^^^^^^^^
+//                       |                                 +-> will never match the event based shortcut!
+//                       |                                 |   the modifier for shift needs to be added!
+//                       Shortcut("K", shift = true, ...)--+
+//                       upper case "K" is (almost) always send with enabled shift modifier.
+
+// Working example
+keydowns.events.filter { shortcutOf(it) == Keys.Shift + "K" } handledBy { /* ... */ }
+```
+
+Since most of the time you will be using the keys within the handling of a `KeyboardEvent`, there are some
+common patterns relying on the standard Flow functions like `filter`, `map`, or `mapNotNull` to apply:
+
+```kotlin
+// Pattern #1: Only execute on specific shortcut:
+keydowns.events.filter { shortcutOf(it) == Keys.Shift + "K"}.map { /* further processing if needed */ } handledBy { /* ... */ }
+
+// Variant of #1: Only execute the same for a set of shortcuts:
+keydowns.events.filter { shortcutOf(it) in setOf(Keys.Enter, Keys.Space) }.map { /* further processing if needed */ } handledBy { /* ... */ }
+
+// Pattern #2: Handle a group of shortcuts with similar tasks (navigation for example)
+keydowns.events.mapNotNull{ event -> // better name "it" in order to reuse it
+    when (shortcutOf(event)) {
+        Keys.ArrowDown -> // create / modify something to be handled
+        Keys.ArrowUp -> // 
+        Keys.Home -> // 
+        Keys.End -> // 
+        else -> null // all other key presses should be ignored, so return null to stop flow processing
+    }.also { if(it != null) event.preventDefault() // page itself should not scroll up or down! }
+    //          ^^^^^^^^^^
+    //          Only if a shortcut was matched
+} handledBy { /* ... */ }
+```
+
+## Advanced Topics
+
+### Event Capturing
+
+Event capturing is less commonly used within UI-Code. Nevertheless, fritz2 supports it via dedicated
+event-factory-variants suffixed with the `Captured`-suffix.
+
+Internally, they set the `capture`-flag within the `addEventListener`-function of a DOM-element.
+
+Look at the following example:
+```kotlin
+render {
+    div {
+        clicksCaptured { stopPropagation() } handledBy { console.log("outer") }
+//      ^^^^^^^^^^^^^^   ^^^^^^^^^^^^^^^^^
+//      |                stop event handling at this level above the child
+//      |
+//      bind to event in `capture` mode        
+
+        div(id = innerId) {
+            clicks handledBy { console.log("inner") }
+//          ^^^^^^
+//          will never reach this DOM level because of the captured event of the parent element.
+        }
+    }
+}
+```
+
+::: info
+For all regular events, a sibling function with the `Captured`-suffix is provided as well.
+:::
+
+### Custom events
+
+You can easily create a custom event in fritz2 by using the appropriate DOM-API types and functions, combined with
+the core function `subscribe` for lifting the dispatched DOM-Event into a fritz2 `Listener` (`Flow`) for further
+processing.
+
+Have a look at its signature:
+```kotlin
+fun <E : Event, T : EventTarget> T.subscribe(
+    name: String,
+    capture: Boolean = false,
+    selector: E.() -> Boolean = { true }
+): Listener<E, T>
+```
+As a minimum, you must provide the event's name, but you can tune the handling with the other parameters.
+You should have learned about those in the [essentials](#essentials)-section.
+
+Have a look at a simple example, demonstrating the usage of `subscribe`:
+```kotlin
+// just a simple data class for simulating a specific payload
+data class Framework(val name: String, val version: String)
+
+// Create an event
+val myEvent = CustomEvent(
+    "fritz2",
+    CustomEventInit(detail = Framework("fritz2", "1-0-RC18"))
+)
+
+div {
+    subscribe<CustomEvent>(myEvent.type) handledBy {
+//  ^^^^^^^^^ ^^^^^^^^^^^  ^^^^^^^^^^^^
+//  |             |        at least provide the name
+//  |          Specify the type
+//  create a listener
+        console.log("My custom event occurred with data: ${it.detail as Framework}")
+    }
+
+    button {
+        +"Dispatch Event"
+        clicks handledBy { this@div.domNode.dispatchEvent(myEvent) }
+        //  ^^^^^^                              ^^^^^^^^^^^^^
+        //  use another event to trigger        call DOM-API to dispatch the event
+        //  the custom one - could also be
+        //  based upon any other `Flow`-source`
+    }
+}
+```
\ No newline at end of file