event Module

User Guide & Examples

Defined in: event/js/synthetic.js:207

The event utility provides functions to add and remove event listeners, event cleansing. It also tries to automatically remove listeners it registers during the unload event.

This module provides the following classes:

This module is a rollup of the following modules:

event-base
DOM event listener abstraction layer
event-delegate
Adds event delegation support to the library.
event-focus
Adds bubbling and delegation support to DOM events focus and blur.

event-hover

Adds support for a "hover" event. The event provides a convenience wrapper for subscribing separately to mouseenter and mouseleave. The signature for subscribing to the event is

node.on("hover", overFn, outFn);
node.delegate("hover", overFn, outFn, ".filterSelector");
Y.on("hover", overFn, outFn, ".targetSelector");
Y.delegate("hover", overFn, outFn, "#container", ".filterSelector");

Additionally, for compatibility with a more typical subscription signature, the following are also supported:

Y.on("hover", overFn, ".targetSelector", outFn);
Y.delegate("hover", overFn, "#container", outFn, ".filterSelector");

event-key
Functionality to listen for one or more specific key combinations.
event-mouseenter
Adds subscription and delegation support for mouseenter and mouseleave events. Unlike mouseover and mouseout, these events aren't fired from child elements of a subscribed node.

This avoids receiving three mouseover notifications from a setup like
```
div#container > p > a[href]
```
where
```
Y.one('#container').on('mouseover', callback)
```
When the mouse moves over the link, one mouseover event is fired from #container, then when the mouse moves over the p, another mouseover event is fired and bubbles to #container, causing a second notification, and finally when the mouse moves over the link, a third mouseover event is fired and bubbles to #container for a third notification.

By contrast, using mouseenter instead of mouseover, the callback would be executed only once when the mouse moves over #container.
event-mousewheel
Adds mousewheel event support
event-outside
Outside events are synthetic DOM events that fire when a corresponding native or synthetic DOM event occurs outside a bound element. The following outside events are pre-defined by this module:
- blur
- change
- click
- dblclick
- focus
- keydown
- keypress
- keyup
- mousedown
- mousemove
- mouseout
- mouseover
- mouseup
- select
- submit
Define new outside events with Y.Event.defineOutside(eventType);. By default, the created synthetic event name will be the name of the event with "outside" appended (e.g. "click" becomes "clickoutside"). If you want a different name for the created Event, pass it as a second argument like so: Y.Event.defineOutside(eventType, "yonderclick"). This module was contributed by Brett Stimmerman, promoted from his gallery-outside-events module at http://yuilibrary.com/gallery/show/outside-events
event-resize
Adds a window resize event that has its behavior normalized to fire at the end of the resize rather than constantly during the resize.
event-synthetic
Define new DOM events that can be subscribed to from Nodes.
event-tap
The tap module provides a gesture events, "tap", which normalizes user interactions across touch and mouse or pointer based input devices. This can be used by application developers to build input device agnostic components which behave the same in response to either touch or mouse based interaction. 'tap' is like a touchscreen 'click', only it requires much less finger-down time since it listens to touch events, but reverts to mouse events if touch is not supported.
event-touch
Adds touch event facade normalization properties (touches, changedTouches, targetTouches etc.) to the DOM event facade. Adds touch events to the DOM events whitelist.

APIs

event Module