Extra Utilities using Elements

npm install elements-util
24 downloads in the last month


Utilities for elements

Build Status


An event wrapper to get better and easier information about the passed event.

// generic event wrapper
var event = require('elements-util/lib/event')
// for mouse events
var mouse = require('elements-util/lib/event/mouse')
// for keyboard events
var key = require('elements-util/lib/event/key')

var $ = require('elements/lib/events')

$(element).on('click', function(e){
    e = event(e)
    // the event type (for example click)
    var type = e.type()
    // the actually clicked element
    var target = e.target()
    // stop event bubbling, so the event isn't fired on parent elements
    // stop the default behavior of the event (e.g. following a link)

    var m = mouse(e) // wrap with the mouse wrapper
    m.target() // methods from event are inherited
    // aditional methods
    // position of the mouse, relative to the full window
    m.page() // {x: 140, y: 345}
    // position of the mouse, relative to the viewport
    m.client() // {x: 140, y: 145}

$(element).on('keydown', function(e){
    var k = key(e)
    // keyCode of the pressed key
    var keyCode = k.keyCode()
    // name of the key, for example 'a', 'esc', 'enter'
    var key = k.key()

// a way to define new/custom keyCode / keyname pairs
    '38': 'up'


Behavior is a way to initiate certain UI components for elements on the page by a given selector. The callback is only called once of each element.

var Behavior = require('elements-util')
var ready = require('elements/lib/domready')
// create a new behavior
var behavior = Behavior()
// define a new slider behavior, which initiates a slider class.
behavior.add('.slider', function(element){
    new Slider(element)
// behavior for external links
behavior.add('a[href^=http://]', function(a){
    a[0].style.color = 'red'
// once each behavior is defined, we call .update to initiate them all.
// usually this happens in a domready() call


For determining the size and position of an element.

var $ = require('elements-util/lib/dimensions')

var pos = $(element).position()
// this returns an object with the following properties:
// x, left, y, top, right, bottom, width and height.
console.log(pos.x) // 314


Empty all the content of an element

var $ = require('elements-util/lib/empty')
$(element).empty() // element is empty, doesn't have any childNodes anymore.
npm loves you