JSFiddle - React, Tailwind, and code Playground

HTML

<p class='target'>Mousemove target</p>
<input class='set-x' type='text' value='100'></input>
<input class='set-y' type='text' value='200'></input>
<button class='trigger'>trigger mousemove</button>
<div class='console'>
    <p class='x'>pageX: <span class='x-value'></span></p>
    <p class='y'>pageY: <span class='y-value'></span></p>
</div>

CSS

p.target {
    border: 1px solid black;
    width: 400px;
    height: 100px;
    text-align: center;
    line-height: 100px;
}

JavaScript

var target = $('p.target');

target.mousemove(function(e) {
    $('.x-value').text(e.pageX);
    $('.y-value').text(e.pageY);
});

$('.trigger').click(function() {
    var e = $.Event('mousemove');
    e.pageX = parseInt($('.set-x').val());
    e.pageY = parseInt($('.set-y').val());
    target.trigger(e);
});