Skip to content

macacajs/dom-event-simulate

Repository files navigation

dom-event-simulate

NPM version Package quality CI Test coverage node version npm download

simulate user interaction with DOM events.

Contributors


xudafeng


paradite


yihuineng


elaine1234


cyjake


snapre

This project follows the git-contributor spec, auto updated at Sun Apr 24 2022 00:26:12 GMT+0800.

Installment

$ npm i dom-event-simulate --save-dev

CDN

https://unpkg.com/dom-event-simulate@latest/lib/dom-event-simulate.js

Usage

const { domEvent } = require('dom-event-simulate');
// input @
domEvent(element, 'keydown', {
  keyCode: 50,
  key: '@',
});
// start a drag
domEvent(dom, 'mousedown', {
  clientX: point.x,
  clientY: point.y,
});
domEvent(dom, 'mousemove', {
  clientX: point.x + 10,
  clientY: point.y + 10,
});
domEvent(dom, 'mouseup', {
  clientX: point.x + 10,
  clientY: point.y + 10,
});
var element = document.querySelector('#input');

element.addEventListener('change', function(e) {
  console.log(e.target.files);
}, false);

domEvent(element, 'change', {
  data: {
    target: {
      files: [
        {
          file: 'file1.png',
        },
        {
          file: 'file2.jpg',
        }
      ],
    },
  }
});

Use with macaca-wd

see: https://macacajs.github.io/macaca-wd/#domEvent

Support Events

type name args
mouseEvents click
mouseEvents dblclick
mouseEvents mouseover
mouseEvents mouseout
mouseEvents mouseenter
mouseEvents mouseleave
mouseEvents mousedown
mouseEvents mouseup
mouseEvents mousemove
mouseEvents dragstart
mouseEvents dragenter
mouseEvents dragover
mouseEvents dragleave
mouseEvents drag
mouseEvents drop
mouseEvents dragend
mouseEvents wheel
keyboardEvent keydown
keyboardEvent keyup
keyboardEvent keypress
UIEvents submit
UIEvents blur
UIEvents change
UIEvents focus
UIEvents resize
UIEvents scroll
UIEvents select
bubbleEvents scroll
bubbleEvents resize
bubbleEvents reset
bubbleEvents change
bubbleEvents select
bubbleEvents error
bubbleEvents abort
TouchEvent touchstart
TouchEvent touchmove
TouchEvent touchend
TouchEvent touchcancel
GestureEvent gesturestart
GestureEvent gesturechange
GestureEvent gestureend

Helper Methods

const { helper: eventHelper } = require('dom-event-simulate');

// Type content to input element.
eventHelper.elementInput

// Type content to a contentEditable element.
eventHelper.formInput

License

The MIT License (MIT)