diff --git a/src/html/listener.rs b/src/html/listener.rs
deleted file mode 100644
index 99d51de5c13..00000000000
--- a/src/html/listener.rs
+++ /dev/null
@@ -1,170 +0,0 @@
-use crate::callback::Callback;
-use crate::virtual_dom::Listener;
-use stdweb::web::html_element::SelectElement;
-#[allow(unused_imports)]
-use stdweb::web::{EventListenerHandle, FileList, INode};
-#[allow(unused_imports)]
-use stdweb::{_js_impl, js};
-
-macro_rules! impl_action {
-    ($($action:ident($event:ident : $type:ident) -> $ret:ty => $convert:expr)*) => {$(
-        /// An abstract implementation of a listener.
-        pub mod $action {
-            use stdweb::web::{IEventTarget, Element};
-            use stdweb::web::event::{IEvent, $type};
-            use super::*;
-
-            /// A wrapper for a callback which attaches event listeners to elements.
-            #[derive(Clone, Debug)]
-            pub struct Wrapper {
-                callback: Callback<Event>,
-            }
-
-            impl Wrapper {
-                /// Create a wrapper for an event-typed callback
-                pub fn new(callback: Callback<Event>) -> Self {
-                    Wrapper { callback }
-                }
-            }
-
-            /// And event type which keeps the returned type.
-            pub type Event = $ret;
-
-            impl Listener for Wrapper {
-                fn kind(&self) -> &'static str {
-                    stringify!($action)
-                }
-
-                fn attach(&self, element: &Element) -> EventListenerHandle {
-                    let this = element.clone();
-                    let callback = self.callback.clone();
-                    let listener = move |event: $type| {
-                        event.stop_propagation();
-                        callback.emit($convert(&this, event));
-                    };
-                    element.add_event_listener(listener)
-                }
-            }
-        }
-    )*};
-}
-
-// Inspired by: http://package.elm-lang.org/packages/elm-lang/html/2.0.0/Html-Events
-impl_action! {
-    onclick(event: ClickEvent) -> ClickEvent => |_, event| { event }
-    ondoubleclick(event: DoubleClickEvent) -> DoubleClickEvent => |_, event| { event }
-    onkeypress(event: KeyPressEvent) -> KeyPressEvent => |_, event| { event }
-    onkeydown(event: KeyDownEvent) -> KeyDownEvent => |_, event| { event }
-    onkeyup(event: KeyUpEvent) -> KeyUpEvent => |_, event| { event }
-    onmousemove(event: MouseMoveEvent) -> MouseMoveEvent => |_, event| { event }
-    onmousedown(event: MouseDownEvent) -> MouseDownEvent => |_, event| { event }
-    onmouseup(event: MouseUpEvent) -> MouseUpEvent => |_, event| { event }
-    onmouseover(event: MouseOverEvent) -> MouseOverEvent => |_, event| { event }
-    onmouseout(event: MouseOutEvent) -> MouseOutEvent => |_, event| { event }
-    onmouseenter(event: MouseEnterEvent) -> MouseEnterEvent => |_, event| { event }
-    onmouseleave(event: MouseLeaveEvent) -> MouseLeaveEvent => |_, event| { event }
-    onmousewheel(event: MouseWheelEvent) -> MouseWheelEvent => |_, event| { event }
-    ongotpointercapture(event: GotPointerCaptureEvent) -> GotPointerCaptureEvent => |_, event| { event }
-    onlostpointercapture(event: LostPointerCaptureEvent) -> LostPointerCaptureEvent => |_, event| { event }
-    onpointercancel(event: PointerCancelEvent) -> PointerCancelEvent => |_, event| { event }
-    onpointerdown(event: PointerDownEvent) -> PointerDownEvent => |_, event| { event }
-    onpointerenter(event: PointerEnterEvent) -> PointerEnterEvent => |_, event| { event }
-    onpointerleave(event: PointerLeaveEvent) -> PointerLeaveEvent => |_, event| { event }
-    onpointermove(event: PointerMoveEvent) -> PointerMoveEvent => |_, event| { event }
-    onpointerout(event: PointerOutEvent) -> PointerOutEvent => |_, event| { event }
-    onpointerover(event: PointerOverEvent) -> PointerOverEvent => |_, event| { event }
-    onpointerup(event: PointerUpEvent) -> PointerUpEvent => |_, event| { event }
-    onscroll(event: ScrollEvent) -> ScrollEvent => |_, event| { event }
-    onblur(event: BlurEvent) -> BlurEvent => |_, event| { event }
-    onfocus(event: FocusEvent) -> FocusEvent => |_, event| { event }
-    onsubmit(event: SubmitEvent) -> SubmitEvent => |_, event| { event }
-    ondragstart(event: DragStartEvent) -> DragStartEvent => |_, event| { event }
-    ondrag(event: DragEvent) -> DragEvent => |_, event| { event }
-    ondragend(event: DragEndEvent) -> DragEndEvent => |_, event| { event }
-    ondragenter(event: DragEnterEvent) -> DragEnterEvent => |_, event| { event }
-    ondragleave(event: DragLeaveEvent) -> DragLeaveEvent => |_, event| { event }
-    ondragover(event: DragOverEvent) -> DragOverEvent => |_, event| { event }
-    ondragexit(event: DragExitEvent) -> DragExitEvent => |_, event| { event }
-    ondrop(event: DragDropEvent) -> DragDropEvent => |_, event| { event }
-    oncontextmenu(event: ContextMenuEvent) -> ContextMenuEvent => |_, event| { event }
-    oninput(event: InputEvent) -> InputData => |this: &Element, _| {
-        use stdweb::web::html_element::{InputElement, TextAreaElement};
-        use stdweb::unstable::TryInto;
-        // Normally only InputElement or TextAreaElement can have an oninput event listener. In
-        // practice though any element with `contenteditable=true` may generate such events,
-        // therefore here we fall back to just returning the text content of the node.
-        // See https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event.
-        let v1 = this.clone().try_into().map(|input: InputElement| input.raw_value()).ok();
-        let v2 = this.clone().try_into().map(|input: TextAreaElement| input.value()).ok();
-        let v3 = this.text_content();
-        let value = v1.or(v2).or(v3)
-            .expect("only an InputElement or TextAreaElement or an element with contenteditable=true can have an oninput event listener");
-        InputData { value }
-    }
-    onchange(event: ChangeEvent) -> ChangeData => |this: &Element, _| {
-        use stdweb::web::{FileList, IElement};
-        use stdweb::web::html_element::{InputElement, TextAreaElement, SelectElement};
-        use stdweb::unstable::TryInto;
-        match this.node_name().as_ref() {
-            "INPUT" => {
-                let input: InputElement = this.clone().try_into().unwrap();
-                let is_file = input.get_attribute("type").map(|value| {
-                        value.eq_ignore_ascii_case("file")
-                    })
-                    .unwrap_or(false);
-                if is_file {
-                    let files: FileList = js!( return @{input}.files; )
-                        .try_into()
-                        .unwrap();
-                    ChangeData::Files(files)
-                } else {
-                    ChangeData::Value(input.raw_value())
-                }
-            }
-            "TEXTAREA" => {
-                let tae: TextAreaElement = this.clone().try_into().unwrap();
-                ChangeData::Value(tae.value())
-            }
-            "SELECT" => {
-                let se: SelectElement = this.clone().try_into().unwrap();
-                ChangeData::Select(se)
-            }
-            _ => {
-                panic!("only an InputElement, TextAreaElement or SelectElement can have an onchange event listener");
-            }
-        }
-    }
-    touchcancel(event: TouchCancel) -> TouchCancel => |_, event| { event }
-    touchend(event: TouchEnd) -> TouchEnd => |_, event| { event }
-    touchenter(event: TouchEnter) -> TouchEnter => |_, event| { event }
-    touchmove(event: TouchMove) -> TouchMove => |_, event| { event }
-    touchstart(event: TouchStart) -> TouchStart => |_, event| { event }
-}
-
-/// A type representing data from `oninput` event.
-#[derive(Debug)]
-pub struct InputData {
-    /// Inserted characters. Contains value from
-    /// [InputEvent](https://developer.mozilla.org/en-US/docs/Web/API/InputEvent/data).
-    pub value: String,
-}
-
-// There is no '.../Web/API/ChangeEvent/data' (for onchange) similar to
-// https://developer.mozilla.org/en-US/docs/Web/API/InputEvent/data (for oninput).
-// ChangeData actually contains the value of the InputElement/TextAreaElement
-// after `change` event occured or contains the SelectElement (see more at the
-// variant ChangeData::Select)
-
-/// A type representing change of value(s) of an element after committed by user
-/// ([onchange event](https://developer.mozilla.org/en-US/docs/Web/Events/change)).
-#[derive(Debug)]
-pub enum ChangeData {
-    /// Value of the element in cases of `<input>`, `<textarea>`
-    Value(String),
-    /// SelectElement in case of `<select>` element. You can use one of methods of SelectElement
-    /// to collect your required data such as: `value`, `selected_index`, `selected_indices` or
-    /// `selected_values`. You can also iterate throught `selected_options` yourself.
-    Select(SelectElement),
-    /// Files
-    Files(FileList),
-}
diff --git a/src/html/listener/listener_stdweb.rs b/src/html/listener/listener_stdweb.rs
new file mode 100644
index 00000000000..a31c4fe396d
--- /dev/null
+++ b/src/html/listener/listener_stdweb.rs
@@ -0,0 +1,46 @@
+// Inspired by: http://package.elm-lang.org/packages/elm-lang/html/2.0.0/Html-Events
+impl_action! {
+    onclick(event: ClickEvent) -> ClickEvent => |_, event| { event }
+    ondoubleclick(event: DoubleClickEvent) -> DoubleClickEvent => |_, event| { event }
+    onkeypress(event: KeyPressEvent) -> KeyPressEvent => |_, event| { event }
+    onkeydown(event: KeyDownEvent) -> KeyDownEvent => |_, event| { event }
+    onkeyup(event: KeyUpEvent) -> KeyUpEvent => |_, event| { event }
+    onmousemove(event: MouseMoveEvent) -> MouseMoveEvent => |_, event| { event }
+    onmousedown(event: MouseDownEvent) -> MouseDownEvent => |_, event| { event }
+    onmouseup(event: MouseUpEvent) -> MouseUpEvent => |_, event| { event }
+    onmouseover(event: MouseOverEvent) -> MouseOverEvent => |_, event| { event }
+    onmouseout(event: MouseOutEvent) -> MouseOutEvent => |_, event| { event }
+    onmouseenter(event: MouseEnterEvent) -> MouseEnterEvent => |_, event| { event }
+    onmouseleave(event: MouseLeaveEvent) -> MouseLeaveEvent => |_, event| { event }
+    onmousewheel(event: MouseWheelEvent) -> MouseWheelEvent => |_, event| { event }
+    ongotpointercapture(event: GotPointerCaptureEvent) -> GotPointerCaptureEvent => |_, event| { event }
+    onlostpointercapture(event: LostPointerCaptureEvent) -> LostPointerCaptureEvent => |_, event| { event }
+    onpointercancel(event: PointerCancelEvent) -> PointerCancelEvent => |_, event| { event }
+    onpointerdown(event: PointerDownEvent) -> PointerDownEvent => |_, event| { event }
+    onpointerenter(event: PointerEnterEvent) -> PointerEnterEvent => |_, event| { event }
+    onpointerleave(event: PointerLeaveEvent) -> PointerLeaveEvent => |_, event| { event }
+    onpointermove(event: PointerMoveEvent) -> PointerMoveEvent => |_, event| { event }
+    onpointerout(event: PointerOutEvent) -> PointerOutEvent => |_, event| { event }
+    onpointerover(event: PointerOverEvent) -> PointerOverEvent => |_, event| { event }
+    onpointerup(event: PointerUpEvent) -> PointerUpEvent => |_, event| { event }
+    onscroll(event: ScrollEvent) -> ScrollEvent => |_, event| { event }
+    onblur(event: BlurEvent) -> BlurEvent => |_, event| { event }
+    onfocus(event: FocusEvent) -> FocusEvent => |_, event| { event }
+    onsubmit(event: SubmitEvent) -> SubmitEvent => |_, event| { event }
+    ondragstart(event: DragStartEvent) -> DragStartEvent => |_, event| { event }
+    ondrag(event: DragEvent) -> DragEvent => |_, event| { event }
+    ondragend(event: DragEndEvent) -> DragEndEvent => |_, event| { event }
+    ondragenter(event: DragEnterEvent) -> DragEnterEvent => |_, event| { event }
+    ondragleave(event: DragLeaveEvent) -> DragLeaveEvent => |_, event| { event }
+    ondragover(event: DragOverEvent) -> DragOverEvent => |_, event| { event }
+    ondragexit(event: DragExitEvent) -> DragExitEvent => |_, event| { event }
+    ondrop(event: DragDropEvent) -> DragDropEvent => |_, event| { event }
+    oncontextmenu(event: ContextMenuEvent) -> ContextMenuEvent => |_, event| { event }
+    oninput(event: InputEvent) -> InputData => |this: &Element, _| { oninput_handler(this) }
+    onchange(event: ChangeEvent) -> ChangeData => |this: &Element, _| { onchange_handler(this) }
+    touchcancel(event: TouchCancel) -> TouchCancel => |_, event| { event }
+    touchend(event: TouchEnd) -> TouchEnd => |_, event| { event }
+    touchenter(event: TouchEnter) -> TouchEnter => |_, event| { event }
+    touchmove(event: TouchMove) -> TouchMove => |_, event| { event }
+    touchstart(event: TouchStart) -> TouchStart => |_, event| { event }
+}
diff --git a/src/html/listener/listener_web_sys.rs b/src/html/listener/listener_web_sys.rs
new file mode 100644
index 00000000000..96723003d38
--- /dev/null
+++ b/src/html/listener/listener_web_sys.rs
@@ -0,0 +1,46 @@
+// Inspired by: http://package.elm-lang.org/packages/elm-lang/html/2.0.0/Html-Events
+impl_action! {
+    onclick(name: "click", event: MouseEvent) -> web_sys::MouseEvent => |_, event| { event }
+    ondoubleclick(name: "dblclick", event: MouseEvent) -> web_sys::MouseEvent => |_, event| { event }
+    onkeypress(name: "keypress", event: KeyboardEvent) -> web_sys::KeyboardEvent => |_, event| { event }
+    onkeydown(name: "keydown", event: KeyboardEvent) -> web_sys::KeyboardEvent => |_, event| { event }
+    onkeyup(name: "keyup", event: KeyboardEvent) -> web_sys::KeyboardEvent => |_, event| { event }
+    onmousemove(name: "mousemove", event: MouseEvent) -> web_sys::MouseEvent => |_, event| { event }
+    onmousedown(name: "mousedown", event: MouseEvent) -> web_sys::MouseEvent => |_, event| { event }
+    onmouseup(name: "mouseup", event: MouseEvent) -> web_sys::MouseEvent => |_, event| { event }
+    onmouseover(name: "mouseover", event: MouseEvent) -> web_sys::MouseEvent => |_, event| { event }
+    onmouseout(name: "mouseout", event: MouseEvent) -> web_sys::MouseEvent => |_, event| { event }
+    onmouseenter(name: "mouseenter", event: MouseEvent) -> web_sys::MouseEvent => |_, event| { event }
+    onmouseleave(name: "mouseleave", event: MouseEvent) -> web_sys::MouseEvent => |_, event| { event }
+    onmousewheel(name: "wheel", event: WheelEvent) -> web_sys::WheelEvent => |_, event| { event }
+    ongotpointercapture(name: "gotpointercapture", event: PointerEvent) -> web_sys::PointerEvent => |_, event| { event }
+    onlostpointercapture(name: "lostpointercapture", event: PointerEvent) -> web_sys::PointerEvent => |_, event| { event }
+    onpointercancel(name: "pointercancel", event: PointerEvent) -> web_sys::PointerEvent => |_, event| { event }
+    onpointerdown(name: "pointerdown", event: PointerEvent) -> web_sys::PointerEvent => |_, event| { event }
+    onpointerenter(name: "pointerenter", event: PointerEvent) -> web_sys::PointerEvent => |_, event| { event }
+    onpointerleave(name: "pointerleave", event: PointerEvent) -> web_sys::PointerEvent => |_, event| { event }
+    onpointermove(name: "pointermove", event: PointerEvent) -> web_sys::PointerEvent => |_, event| { event }
+    onpointerout(name: "pointerout", event: PointerEvent) -> web_sys::PointerEvent => |_, event| { event }
+    onpointerover(name: "pointerover", event: PointerEvent) -> web_sys::PointerEvent => |_, event| { event }
+    onpointerup(name: "pointerup", event: PointerEvent) -> web_sys::PointerEvent => |_, event| { event }
+    onscroll(name: "scroll", event: UiEvent) -> web_sys::UiEvent => |_, event| { event }
+    onblur(name: "blur", event: FocusEvent) -> web_sys::FocusEvent => |_, event| { event }
+    onfocus(name: "focus", event: FocusEvent) -> web_sys::FocusEvent => |_, event| { event }
+    onsubmit(name: "submit", event: Event) -> web_sys::Event => |_, event| { event }
+    ondragstart(name: "dragstart", event: DragEvent) -> web_sys::DragEvent => |_, event| { event }
+    ondrag(name: "drag", event: DragEvent) -> web_sys::DragEvent => |_, event| { event }
+    ondragend(name: "dragend", event: DragEvent) -> web_sys::DragEvent => |_, event| { event }
+    ondragenter(name: "dragenter", event: DragEvent) -> web_sys::DragEvent => |_, event| { event }
+    ondragleave(name: "dragleave", event: DragEvent) -> web_sys::DragEvent => |_, event| { event }
+    ondragover(name: "dragover", event: DragEvent) -> web_sys::DragEvent => |_, event| { event }
+    ondragexit(name: "dragexit", event: DragEvent) -> web_sys::DragEvent => |_, event| { event }
+    ondrop(name: "drop", event: DragEvent) -> web_sys::DragEvent => |_, event| { event }
+    oncontextmenu(name: "contextmenu", event: MouseEvent) -> web_sys::MouseEvent => |_, event| { event }
+    oninput(name: "input", event: Event) -> InputData => |this: &Element, _| { oninput_handler(this) }
+    onchange(name: "change", event: Event) -> ChangeData => |this: &Element, _| { onchange_handler(this) }
+    touchcancel(name: "touchcancel", event: TouchEvent) -> web_sys::TouchEvent => |_, event| { event }
+    touchend(name: "touchend", event: TouchEvent) -> web_sys::TouchEvent => |_, event| { event }
+    touchenter(name: "touchenter", event: TouchEvent) -> web_sys::TouchEvent => |_, event| { event }
+    touchmove(name: "touchmove", event: TouchEvent) -> web_sys::TouchEvent => |_, event| { event }
+    touchstart(name: "touchstart", event: TouchEvent) -> web_sys::TouchEvent => |_, event| { event }
+}
diff --git a/src/html/listener/macros.rs b/src/html/listener/macros.rs
new file mode 100644
index 00000000000..467db502dd0
--- /dev/null
+++ b/src/html/listener/macros.rs
@@ -0,0 +1,68 @@
+#[macro_use]
+macro_rules! impl_action {
+    ($($action:ident(event: $type:ident) -> $ret:ty => $convert:expr)*) => {$(
+        impl_action!($action(name: "", event: $type) -> $ret => $convert);
+    )*};
+    ($($action:ident(name: $name:literal, event: $type:ident) -> $ret:ty => $convert:expr)*) => {$(
+        /// An abstract implementation of a listener.
+        pub mod $action {
+            use crate::callback::Callback;
+            #[allow(unused_imports)]
+            use crate::html::listener::*;
+            use crate::virtual_dom::Listener;
+            #[cfg(feature = "std_web")]
+            use stdweb::web::{
+                event::{$type, IEvent},
+                Element, IEventTarget,
+            };
+            #[cfg(feature = "web_sys")]
+            use ::{
+                gloo::events::EventListener,
+                wasm_bindgen::JsValue,
+                web_sys::{$type as WebSysType, Element, EventTarget},
+            };
+
+            /// A wrapper for a callback which attaches event listeners to elements.
+            #[derive(Clone, Debug)]
+            pub struct Wrapper {
+                callback: Callback<Event>,
+            }
+
+            impl Wrapper {
+                /// Create a wrapper for an event-typed callback
+                pub fn new(callback: Callback<Event>) -> Self {
+                    Wrapper { callback }
+                }
+            }
+
+            /// And event type which keeps the returned type.
+            pub type Event = $ret;
+
+            impl Listener for Wrapper {
+                fn kind(&self) -> &'static str {
+                    stringify!($action)
+                }
+
+                fn attach(&self, element: &Element) -> EventListener {
+                    let this = element.clone();
+                    let callback = self.callback.clone();
+                    let listener = move |
+                        #[cfg(feature = "std_web")] event: $type,
+                        #[cfg(feature = "web_sys")] event: &web_sys::Event
+                    | {
+                        event.stop_propagation();
+                        #[cfg(feature = "web_sys")]
+                        let event: WebSysType = JsValue::from(event).into();
+                        callback.emit($convert(&this, event));
+                    };
+                    #[cfg(feature = "std_web")]
+                    {
+                        EventListener(Some(element.add_event_listener(listener)))
+                    }
+                    #[cfg(feature = "web_sys")]
+                    EventListener::new(&EventTarget::from(element.clone()), $name, listener)
+                }
+            }
+        }
+    )*};
+}
diff --git a/src/html/listener/mod.rs b/src/html/listener/mod.rs
new file mode 100644
index 00000000000..439bb7bf84c
--- /dev/null
+++ b/src/html/listener/mod.rs
@@ -0,0 +1,141 @@
+#[macro_use]
+mod macros;
+#[cfg(feature = "std_web")]
+mod listener_stdweb;
+#[cfg(feature = "web_sys")]
+mod listener_web_sys;
+
+#[cfg(feature = "std_web")]
+pub use listener_stdweb::*;
+#[cfg(feature = "web_sys")]
+pub use listener_web_sys::*;
+#[cfg(feature = "std_web")]
+use stdweb::{
+    js,
+    unstable::TryInto,
+    web::{
+        html_element::{InputElement, SelectElement, TextAreaElement},
+        Element, EventListenerHandle, FileList, IElement, INode,
+    },
+};
+#[cfg(feature = "web_sys")]
+use ::{
+    wasm_bindgen::JsCast,
+    web_sys::{
+        Element, FileList, HtmlInputElement as InputElement, HtmlSelectElement as SelectElement,
+        HtmlTextAreaElement as TextAreaElement,
+    },
+};
+
+/// A type representing data from `oninput` event.
+#[derive(Debug)]
+pub struct InputData {
+    /// Inserted characters. Contains value from
+    /// [InputEvent](https://developer.mozilla.org/en-US/docs/Web/API/InputEvent/data).
+    pub value: String,
+}
+
+// There is no '.../Web/API/ChangeEvent/data' (for onchange) similar to
+// https://developer.mozilla.org/en-US/docs/Web/API/InputEvent/data (for oninput).
+// ChangeData actually contains the value of the InputElement/TextAreaElement
+// after `change` event occured or contains the SelectElement (see more at the
+// variant ChangeData::Select)
+
+/// A type representing change of value(s) of an element after committed by user
+/// ([onchange event](https://developer.mozilla.org/en-US/docs/Web/Events/change)).
+#[derive(Debug)]
+pub enum ChangeData {
+    /// Value of the element in cases of `<input>`, `<textarea>`
+    Value(String),
+    /// SelectElement in case of `<select>` element. You can use one of methods of SelectElement
+    /// to collect your required data such as: `value`, `selected_index`, `selected_indices` or
+    /// `selected_values`. You can also iterate throught `selected_options` yourself.
+    Select(SelectElement),
+    /// Files
+    Files(FileList),
+}
+
+fn oninput_handler(this: &Element) -> InputData {
+    // Normally only InputElement or TextAreaElement can have an oninput event listener. In
+    // practice though any element with `contenteditable=true` may generate such events,
+    // therefore here we fall back to just returning the text content of the node.
+    // See https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event.
+    #[cfg(feature = "std_web")]
+    let (v1, v2) = (
+        this.clone()
+            .try_into()
+            .map(|input: InputElement| input.raw_value())
+            .ok(),
+        this.clone()
+            .try_into()
+            .map(|input: TextAreaElement| input.value())
+            .ok(),
+    );
+    #[cfg(feature = "web_sys")]
+    let (v1, v2) = (
+        this.dyn_ref().map(|input: &InputElement| input.value()),
+        this.dyn_ref().map(|input: &TextAreaElement| input.value()),
+    );
+    let v3 = this.text_content();
+    let value = v1.or(v2).or(v3)
+        .expect("only an InputElement or TextAreaElement or an element with contenteditable=true can have an oninput event listener");
+    InputData { value }
+}
+
+fn onchange_handler(this: &Element) -> ChangeData {
+    match this.node_name().as_ref() {
+        "INPUT" => {
+            #[cfg(feature = "std_web")]
+            let input: InputElement = this.clone().try_into().unwrap();
+            #[cfg(feature = "web_sys")]
+            let input: &InputElement = this.dyn_ref().unwrap();
+            let is_file = input
+                .get_attribute("type")
+                .map(|value| value.eq_ignore_ascii_case("file"))
+                .unwrap_or(false);
+            if is_file {
+                #[cfg(feature = "std_web")]
+                let files: FileList = js!( return @{input}.files; ).try_into().unwrap();
+                #[cfg(feature = "web_sys")]
+                let files: FileList = input.files().unwrap();
+                ChangeData::Files(files)
+            } else {
+                #[cfg(feature = "std_web")]
+                return ChangeData::Value(input.raw_value());
+                #[cfg(feature = "web_sys")]
+                ChangeData::Value(input.value())
+            }
+        }
+        "TEXTAREA" => {
+            #[cfg(feature = "std_web")]
+            let tae: TextAreaElement = this.clone().try_into().unwrap();
+            #[cfg(feature = "web_sys")]
+            let tae: &TextAreaElement = this.dyn_ref().unwrap();
+            ChangeData::Value(tae.value())
+        }
+        "SELECT" => {
+            #[cfg(feature = "std_web")]
+            let se: SelectElement = this.clone().try_into().unwrap();
+            #[cfg(feature = "web_sys")]
+            let se = this.dyn_ref::<SelectElement>().unwrap().clone();
+            ChangeData::Select(se)
+        }
+        _ => {
+            panic!("only an InputElement, TextAreaElement or SelectElement can have an onchange event listener");
+        }
+    }
+}
+
+/// Handler to an event listener, only use is to cancel the event.
+#[cfg(feature = "std_web")]
+#[derive(Debug)]
+pub struct EventListener(Option<EventListenerHandle>);
+
+#[cfg(feature = "std_web")]
+impl Drop for EventListener {
+    fn drop(&mut self) {
+        if let Some(event) = self.0.take() {
+            event.remove()
+        }
+    }
+}