make real events happen in-browser, with pure DOM and optional $
JavaScript HTML
Latest commit e3cba7b Mar 13, 2016 @tmcw Merge pull request #20 from FuZhenn/master
Add touch events in README.md
Permalink
Failed to load latest commit information.
jquery
test trivial updates of tests Feb 25, 2016
.eslintrc.js
CHANGELOG.md Changelog touch support Feb 25, 2016
LICENSE
README.md Update README.md Mar 13, 2016
bower.json Remove old component.json file, update package and bower Sep 3, 2015
happen.js Modernize Feb 25, 2016
package.json

README.md

Circle CI

happen wraps the createEvent DOM API to make real event mocking in-browser palatable.

Installation

Raw:

wget https://raw.github.com/tmcw/happen/master/happen.js

With component

component install tmcw/happen

With Browserify

npm install happen

var happen = require('happen');

With bower

bower install tmcw/happen

Native API

once()

happen.once(element, options) fires an event once. The element must be a DOM element. options must have a type for event type, then can have options:

Keyboard Events

  • keyCode
  • charCode
  • shiftKey
  • metaKey
  • ctrlKey
  • altKey

Mouse Events

  • detail
  • screenX
  • screenY
  • clientX
  • clientY
  • ctrlKey
  • altKey
  • shiftKey
  • metaKey
  • button

Touch Events

  • touchstart
  • touchmove
  • touchend
var element = document.getElementById('map');

// click shortcut
happen.click(element);

// dblclick shortcut
happen.dblclick(element);

// custom options
happen.dblclick(element, { shift: true });

// any other event type under MouseEvents
happen.once(element, {
    type: 'mousewheel',
    detail: -100
});

// The once api takes
happen.once(
    // element
    element, {
        // event type (e.type)
        type: 'mousewheel',
        // any other options
        detail: -100
    });

// touch events
happen.once(element, {
        type : 'touchstart',
        touches : [{
                pageX : 800,
                pageY : 800
            },
            {
                pageX : 400,
                pageY : 400
            }]
    });

jQuery Plugin

// Shortcut - 'click' is shorthand for { type: 'click' }
$('.foo').happen('click');

// Longhand - specify any sort of properties
$('.foo').happen({ type: 'keyup', keyCode: 50 });

// Works on any jQuery selection
$('.foo, .bar').happen('dblclick');

Shortcuts:

  • happen.click
  • happen.dblclick
  • happen.mousedown
  • happen.mouseup
  • happen.mousemove
  • happen.keydown
  • happen.keyup
  • happen.keypress

Use it with a testing framework, like Jasmine or Mocha.

(IE tests failing due to Chai)

See Also