JAVASCRIPT
Event management
All samples are using Ink.requireModules
, please read how to use it at Ink.requireModules section
Function name | Description |
---|---|
.clone(destElement, srcElement, [eventType]) | Clones events from one object to another |
.element(ev) | Gets the event's target element. |
.findElement(ev, elmTagName, [force]) | Find closest ancestor element by tag name related to the event target. |
.fire(destElement, eventType) | Triggers events. |
.getCharFromKeyboardEvent(event, [changeCasing]) | Gets character from an event. |
.isLeftClick(ev) | Checks if an event is a left click. |
.isMiddleClick(ev) | Checks if an event is a middle click. |
.isRightClick(ev) | Checks if an event is a right click. |
.observe(element, eventName, callBack, [useCapture]) | Attaches an event to element |
.observeDelegated(element, eventName, selector, callback) | Observes an event on an element and its descendants matching the selector. |
.observeMulti(elements, eventName, callBack, [useCapture]) | Attaches an event to a selector or array of elements. |
.observeOnce(element, eventName, callBack, [useCapture]) | Like observe, but listen to the event only once. |
.off(element, eventType, [handler]) | Removes event handlers. |
.on(element, eventType, [selector], [handler]) | Lets you attach event listeners to both elements and objects. |
.one(element, eventType, [selector], [handler]) | Alias for on but will only be executed once. |
.pointer(ev) | Gets the pointer's coordinates from the event object. |
.pointerX(ev) | Gets the pointer's X coordinate. |
.pointerY(ev) | Gets the pointer's Y coordinate. |
.relatedTarget(ev) | Gets the event's related target element. |
.stop(event) | Stops event propagation and bubbling. |
.stopDefault(event) | Stops event default behaviour. |
.stopObserving(element, eventName, callBack, [useCapture]) | Removes an event attached to an element. |
.stopPropagation(event) | Stops event propagation. |
.throttle(func, [wait], [options]) | Creates a throttled version of a function. |
Clones events from one object to another
bean.clone() is a method for cloning events from one DOM element or object to another.
https://github.com/fat/bean#clone
destElement
An HTML DOM element or any JavaScript Object to copy events tosrcElement
An HTML DOM element or any JavaScript Object to copy events fromeventType
An Event (or multiple events, space separated) to cloneClone events from an element to other
Code
<div id="container">
<button id="b_1">Button 1</button>
<button id="b_2">Button 2</button>
</div>
<script>
Ink.requireModules(['Ink.Dom.Event_1'], function(InkEvent) {
var button1Elm = Ink.i('b_1');
var button2Elm = Ink.i('b_2');
var clickHandler = function(event) {
alert('Hello World');
};
InkEvent.on(button1Elm, 'click' clickHandler);
InkEvent.clone(button2Elm, button1Elm); // clone events from button b_1 to b_2
InkEvent.clone(button2Elm, button1Elm, 'click'); // clone click event from button b_1 to b_2
});
</script>
Gets the event's target element.
ev
Event objectGets the event's element target (Find the element clicked)
Code
<div id="container">
<div id="level_1">
Text with an <strong><span>span</span></strong> element
</div>
</div>
<script>
Ink.requireModules(['Ink.Dom.Event_1'], function(InkEvent) {
var container = Ink.i('container');
InkEvent.observe(container, 'click', function(event) { // add event to container element
var target = InkEvent.element(event);
Ink.log(target);
// <span> - if click occurs in span element
// <div id="level_1"> - if click occurs over the the text
// <div id="container"> - if click occurs outside level_1 element
});
});
</script>
Find closest ancestor element by tag name related to the event target.
Navigate up the DOM tree, looking for a tag with the name elmTagName
.
If such tag is not found, document
is returned.
ev
Event objectelmTagName
Tag name to findforce
falseFlag to skip returning `document` and to return `false` instead.Finds closest ancestor element by tag where the event occurs
Code
<div id="container">
<ul>
<li>Text with a <a href="#"><strong>strong link</strong></a></li>
</ul>
</div>
<script>
Ink.requireModules(['Ink.Dom.Event_1'], function(InkEvent) {
var container = Ink.i('container');
InkEvent.observe(container, 'click', function(event) {
InkEvent.stopDefault(event); // prevents default
var ulElm = InkEvent.findElement(event, 'ul');
Ink.log(ulElm); // <ul>
InkEvent.findElement(event, 'p'); // returns document
});
</script>
Triggers events.
https://github.com/fat/bean#fire
destElement
An HTML DOM element or any JavaScript Object fire the event oneventType
An Event (or multiple events, space separated) to fireargs...
Additional arguments to pass to the callback function when triggeredFires an event in an element
Code
<button id="b_1">Button 1</button>
<button id="b_2">Button 2</button>
<script>
Ink.requireModules(['Ink.Dom.Event_1'], function(InkEvent) {
var b1 = Ink.i('b_1');
var b2 = Ink.i('b_2');
InkEvent.observe(b1, 'click', function(event) {
alert('Button 1 clicked');
});
InkEvent.observe(b2, 'click', function(event) {
InkEvent.fire(b1, 'click');
});
});
</script>
Gets character from an event.
event
Keyboard eventchangeCasing
If true uppercases, if false lowercases, otherwise keeps casingCode
<input type="text" id="input">
<script>
Ink.requireModules(['Ink.Dom.Event_1'], function(InkEvent) {
var box = Ink.i('input');
InkEvent.observe(box, 'keydown', function(event) {
var char = InkEvent.getCharFromKeyboardEvent(event);
Ink.log(char);
});
});
</script>
Checks if an event is a left click.
ev
Event objectCheck if left click has been used
Code
<button id="b_1">Button</button>
<script>
Ink.requireModules(['Ink.Dom.Event_1'], function(InkEvent) {
var b1 = Ink.i('b_1');
InkEvent.observe(b1, 'mousedown', function(event) {
var isLeftClick = InkEvent.isLeftClick(event);
if(isLeftClick) {
alert('Is left click');
} else {
alert('Is not left click');
}
});
});
</script>
Checks if an event is a middle click.
ev
Event objectCheck if middle click has been used
Code
<button id="b_1">Button</button>
<script>
Ink.requireModules(['Ink.Dom.Event_1'], function(InkEvent) {
var b1 = Ink.i('b_1');
InkEvent.observe(b1, 'mousedown', function(event) {
var isMiddleClick = InkEvent.isMiddleClick(event);
if(isMiddleClick) {
alert('Is middle click');
} else {
alert('Is not middle click');
}
});
});
</script>
Checks if an event is a right click.
ev
Event objectCheck if right click has been used
Code
<button id="b_1">Button</button>
<script>
Ink.requireModules(['Ink.Dom.Event_1'], function(InkEvent) {
var b1 = Ink.i('b_1');
InkEvent.observe(b1, 'mousedown', function(event) {
var isRightClick = InkEvent.isRightClick(event);
if(isRightClick) {
alert('Is right click');
} else {
alert('Is not right click');
}
});
});
</script>
Attaches an event to element
element
Element id or elementeventName
Event namecallBack
Receives the event object as a parameter. If you're manually firing custom events, check it's eventName property to make sure you're handling the right event.useCapture
Flag to change event listening from bubbling to capture.Code
<button id="b_1">Button</button>
<script>
Ink.requireModules(['Ink.Dom.Event_1'], function(InkEvent) {
var b1 = Ink.i('b_1');
InkEvent.observe(b1, 'click', function(event) {
Ink.log('Element clicked');
});
InkEvent.observe(b1, 'mousedown', function(event) {
Ink.log('Mouse down');
});
InkEvent.observe(b1, 'mouseup', function(event) {
Ink.log('Mouse up');
});
});
</script>
Observes an event on an element and its descendants matching the selector.
Requires Ink.Dom.Selector if you need to use a selector.
element
Element to observe.eventName
Event name to observe.selector
Child element selector. When null, finds any element.callback
Callback to be called when the event is firedOnly li > a
fires event. Clicking button
does nothing.
Code
<div id="container">
<ul>
<li><a href="#a">A</a></li>
<li><a href="#b">B</a></li>
<li><a href="#c">C</a></li>
</ul>
<button>button</button>
</div>
<script>
Ink.requireModules(['Ink.Dom.Event_1'], function(InkEvent) {
var container = Ink.i('container');
InkEvent.observeDelegated(container, 'click', 'a', function(event) {
InkEvent.stopDefault(event);
var target = InkEvent.element(event);
Ink.log(target);
});
});
</script>
Attaches an event to a selector or array of elements.
elements
Array of elements which are going to be observed. A selector is acceptable too.eventName
Event namecallBack
Receives the event object as a parameter. If you're manually firing custom events, check it's eventName property to make sure you're handling the right event.useCapture
Flag change event listening from bubbling to capture.Code
<div>
<ul>
<li><a href="#a" class="clickable">A</a></li>
<li><a href="#b" class="clickable">B</a></li>
<li><a href="#c" class="clickable">C</a></li>
</ul>
<div class="clickable"></div>
</div>
<script>
Ink.requireModules(['Ink.Dom.Event_1'], function(InkEvent) {
var aClickable = Ink.ss('.clickable');
InkEvent.observeMulti(aClickable, 'click', function(event) {
InkEvent.stopDefault(event);
var target = InkEvent.element(event);
Ink.log(target);
});
});
</script>
Like observe, but listen to the event only once.
element
Element id or elementeventName
Event namecallBack
Receives the event object as a parameter. If you're manually firing custom events, check it's eventName property to make sure you're handling the right event.useCapture
Flag to change event listening from bubbling to capture.Code
<div>
<button id="b_1">Click once</button>
</div>
<script>
Ink.requireModules(['Ink.Dom.Event_1'], function(InkEvent) {
var button = Ink.i('b_1');
InkEvent.observeOnce(button, 'click', function(event) {
alert('Hello World');
});
});
</script>
Removes event handlers.
bean.off() is how you get rid of handlers once you no longer want them active. It's also a good idea to call off on elements before you remove them from your DOM; this gives Bean a chance to clean up some things and prevents memory leaks.
https://github.com/fat/bean#off
element
An HTML DOM element or any JavaScript ObjecteventType
An Event (or multiple events, space separated) to removehandler
The specific callback function to removeWorks like .observe() but can be used to add more event types
Code
<button id="b_1">Button 1</button>
<button id="b_2">Remove Button 1 events</button>
<script>
Ink.requireModules(['Ink.Dom.Event_1'], function(InkEvent) {
var b1 = Ink.i('b_1');
var b2 = Ink.i('b_2');
var showLog = function(event) {
Ink.log('Mouse down/Touch start');
};
var removeEvent = function() {
InkEvent.off(b1, 'mousedown touchstart', showLog);
};
InkEvent.on(b1, 'mousedown touchstart', showLog);
InkEvent.on(b2, 'mousedown touchstart', removeEvent);
});
</script>
Lets you attach event listeners to both elements and objects.
https://github.com/fat/bean#on
element
An HTML DOM element or any JavaScript ObjecteventType
An Event (or multiple events, space separated) to listen toselector
A CSS DOM Element selector string to bind the listener to child elements matching the selectorhandler
The callback functionargs...
Additional arguments to pass to the callback function when triggeredWorks like .observe() but can be used to add more event types
Code
<button id="b_1">Button</button>
<script>
Ink.requireModules(['Ink.Dom.Event_1'], function(InkEvent) {
var b1 = Ink.i('b_1');
InkEvent.on(b1, 'mousedown touchstart', function(event) {
Ink.log('Mouse down/Touch start');
});
});
</script>
Alias for on
but will only be executed once.
bean.one() is an alias for bean.on() except that the handler will only be executed once and then removed for the event type(s).
https://github.com/fat/bean#one
element
An HTML DOM element or any JavaScript ObjecteventType
An Event (or multiple events, space separated) to listen toselector
A CSS DOM Element selector string to bind the listener to child elements matching the selectorhandler
The callback functionargs...
Additional arguments to pass to the callback function when triggeredCode
<div>
<button id="b_1">Click once</button>
</div>
<script>
Ink.requireModules(['Ink.Dom.Event_1'], function(InkEvent) {
var button = Ink.i('b_1');
InkEvent.one(button, 'click touchend', function(event) {
alert('Hello World');
});
});
</script>
Gets the pointer's coordinates from the event object.
ev
Event objectCode
<div id="to_drag" style="width:100px; heigh:100px;">
Mouse down to get mouse position.
</div>
<script>
Ink.requireModules(['Ink.Dom.Event_1'], function(InkEvent) {
var elm = Ink.i('to_drag');
InkEvent.observe(elm, 'mousedown', function(event) {
var mousePosition = InkEvent.pointer(event);
Ink.log(mousePosition);
/*
* {x: 100, y: 50}
*/
});
});
</script>
Gets the pointer's X coordinate.
ev
Event objectGets the pointer's Y coordinate.
ev
Event objectStops event propagation and bubbling.
event
Event handleCode
<div id="container">
<a href="https://ink.sapo.pt/" id="link">Click to Ink</a>
</div>
<script>
Ink.requireModules(['Ink.Dom.Event_1'], function(InkEvent) {
var container = Ink.i('container');
var link = Ink.i('link');
InkEvent.observe(container, 'click', function(event) {
Ink.log('Container has been clicked');
});
InkEvent.observe(link, 'click', function(event) {
InkEvent.stop(event); // stops propagation and prevent defaults
Ink.log('Link has been clicked');
});
// Clicking "link" will show:
// "Link has been clicked"
// Otherwise
// "Link has been clicked" "Contaner has been clicked" and goes to ink.sapo.pt
});
</script>
Stops event default behaviour.
event
Event handleCode
<div id="container">
<a href="https://ink.sapo.pt/" id="link">Click to Ink</a>
</div>
<script>
Ink.requireModules(['Ink.Dom.Event_1'], function(InkEvent) {
var container = Ink.i('container');
var link = Ink.i('link');
InkEvent.observe(container, 'click', function(event) {
Ink.log('Container has been clicked');
});
InkEvent.observe(link, 'click', function(event) {
InkEvent.stopDefault(event);
Ink.log('Link has been clicked');
});
// Clicking "link" will show:
// "Link has been clicked" "Contaner has been clicked"
});
</script>
Removes an event attached to an element.
element
Element id or elementeventName
Event namecallBack
Callback functionuseCapture
Set to true if the event was being observed with useCapture set to true as well.Works like .observe() but can be used to add more event types
Code
<button id="b_1">Button 1</button>
<button id="b_2">Remove Button 1 event</button>
<script>
Ink.requireModules(['Ink.Dom.Event_1'], function(InkEvent) {
var b1 = Ink.i('b_1');
var b2 = Ink.i('b_2');
var showLog = function(event) {
Ink.log('Mouse click');
};
var removeEvent = function() {
InkEvent.stopObserving(b1, 'click', showLog);
};
InkEvent.observe(b1, 'click', showLog);
InkEvent.observe(b2, 'click', removeEvent);
});
</script>
Stops event propagation.
event
Event handleCode
<div id="container">
<a href="https://ink.sapo.pt/" id="link">Click to Ink</a>
</div>
<script>
Ink.requireModules(['Ink.Dom.Event_1'], function(InkEvent) {
var container = Ink.i('container');
var link = Ink.i('link');
InkEvent.observe(container, 'click', function(event) {
Ink.log('Container has been clicked');
});
InkEvent.observe(link, 'click', function(event) {
InkEvent.stop(event); // stops propagation and prevent defaults
Ink.log('Link has been clicked');
});
// Clicking "link" will show:
// "Link has been clicked"
// and goes to ink.sapo.pt
});
</script>
Creates a throttled version of a function.
Returns a function which calls func
, waiting at least wait
milliseconds between calls. This is useful for events such as scroll
or resize
, which can be triggered too many times per second, slowing down the browser with needless function calls.
note: This does not delay the first function call to the function.
func
Function to call. Arguments and context are both passed.wait
0Milliseconds to wait between calls.options
{}Options object, containing:options.preventDefault
falseWhether to call preventDefault() on events received here. Use this to throttle mousemove events which you also want to preventDefault() because throttle will not call your function all the time so you don't get a chance to preventDefault() all the events, altough you might need to.options.bind
The throttled function is bound to this context. Otherwise, it will use whatever `this` it gets. Just a shorthand of also calling Ink.bind(context, func) on the function after throttling it.Code
Ink.requireModules(['Ink.Dom.Event_1', 'Ink.Dom.Element_1'], function(InkEvent, InkElement) {
// Create a function that only runs each 1000 milliseconds
var runOnScroll = InkEvent.throttle(function(){
Ink.log(InkElement.scrollHeight() +' - '+ (new Date()).getSeconds());
}, 1000);
InkEvent.observe(window, 'scroll', runOnScroll);
// 1 - 29
// 35 - 30
// 63 - 31
// 122 - 32
// 172 - 33
// ...
});