.clone(destElement, srcElement, [eventType]) method

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

Accepts

• destElement

  An HTML DOM element or any JavaScript Object to copy events to

• srcElement

  An HTML DOM element or any JavaScript Object to copy events from

• eventType

  An Event (or multiple events, space separated) to clone

Clone 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>

.element(ev) method

Gets the event's target element.

Accepts

• ev

  Event object

Gets 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>

.findElement(ev, elmTagName, [force]) method

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.

Accepts

• ev

  Event object

• elmTagName

  Tag name to find

• force

  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>

.fire(destElement, eventType) method

Triggers events.
https://github.com/fat/bean#fire

Accepts

• destElement

  An HTML DOM element or any JavaScript Object fire the event on

• eventType

  An Event (or multiple events, space separated) to fire

• args...

  Additional arguments to pass to the callback function when triggered

Fires 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>

.getCharFromKeyboardEvent(event, [changeCasing]) method

Gets character from an event.

Accepts

• event

  Keyboard event

• changeCasing

  If true uppercases, if false lowercases, otherwise keeps casing

Code

<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>

.isLeftClick(ev) method

Checks if an event is a left click.

Accepts

• ev

  Event object

Check 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>

.isMiddleClick(ev) method

Checks if an event is a middle click.

Accepts

• ev

  Event object

Check 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>

.isRightClick(ev) method

Checks if an event is a right click.

Accepts

• ev

  Event object

Check 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>

.observe(element, eventName, callBack, [useCapture]) method

Attaches an event to element

Accepts

• element

  Element id or element

• eventName

  Event name

• callBack

  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>

.observeDelegated(element, eventName, selector, callback) method

Observes an event on an element and its descendants matching the selector.

Requires Ink.Dom.Selector if you need to use a selector.

Accepts

• 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 fired

Only 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>

.observeMulti(elements, eventName, callBack, [useCapture]) method

Attaches an event to a selector or array of elements.

Accepts

• elements

  Array of elements which are going to be observed. A selector is acceptable too.

• eventName

  Event name

• callBack

  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>

.observeOnce(element, eventName, callBack, [useCapture]) method

Like observe, but listen to the event only once.

Accepts

• element

  Element id or element

• eventName

  Event name

• callBack

  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>

.off(element, eventType, [handler]) method

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

Accepts

• element

  An HTML DOM element or any JavaScript Object

• eventType

  An Event (or multiple events, space separated) to remove

• handler

  The specific callback function to remove

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 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>

.on(element, eventType, [selector], [handler]) method

Lets you attach event listeners to both elements and objects.
https://github.com/fat/bean#on

Accepts

• element

  An HTML DOM element or any JavaScript Object

• eventType

  An Event (or multiple events, space separated) to listen to

• selector

  A CSS DOM Element selector string to bind the listener to child elements matching the selector

• handler

  The callback function

• args...

  Additional arguments to pass to the callback function when triggered

Works 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>

.one(element, eventType, [selector], [handler]) method

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

Accepts

• element

  An HTML DOM element or any JavaScript Object

• eventType

  An Event (or multiple events, space separated) to listen to

• selector

  A CSS DOM Element selector string to bind the listener to child elements matching the selector

• handler

  The callback function

• args...

  Additional arguments to pass to the callback function when triggered

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.one(button, 'click touchend',  function(event) {
            alert('Hello World');
        });    
});
</script>

.pointer(ev) method

Gets the pointer's coordinates from the event object.

Accepts

• ev

  Event object

Code

<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>

.pointerX(ev) method

Gets the pointer's X coordinate.

Accepts

• ev

  Event object

.pointerY(ev) method

Gets the pointer's Y coordinate.

Accepts

• ev

  Event object

.relatedTarget(ev) method

Gets the event's related target element.

Accepts

• ev

  event object

Gets the event's related target (Find the element leaved before enter in an element)

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, 'mouseover', function(event) { // add event to container element 
            var relatedTarget = InkEvent.relatedTarget(event); 
            Ink.log(relatedTarget); 
            // mouseover element <div id="level_1"> 
            // relatedTarget will be <div id="container">
      }); 
});
</script>

.stop(event) method

Stops event propagation and bubbling.

Accepts

• event

  Event handle

Code

<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>

.stopDefault(event) method

Stops event default behaviour.

Accepts

• event

  Event handle

Code

<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>

.stopObserving(element, eventName, callBack, [useCapture]) method

Removes an event attached to an element.

Accepts

• element

  Element id or element

• eventName

  Event name

• callBack

  Callback function

• useCapture

  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>

.stopPropagation(event) method

Stops event propagation.

Accepts

• event

  Event handle

Code

<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>

.throttle(func, [wait], [options]) method

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.

Accepts

• 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 
    // ...
});