Extra Utilities using Elements

npm install elements-util
12 downloads in the last week
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