Trigger onmouseover event programmatically in JavaScript

Active3 hr before
Viewed126 times

8 Answers


Is there a way to programmatically trigger the onmouseover event in plain JavaScript? or "extract" the method from the onmouseover event to call it directly?, Interesting general solution to a problem ,Use jQuery's trigger function.,You can also add parameters to it if you need to. See the jQuery documentation on .trigger.

const mouseoverEvent = new Event('mouseover');

load more v

   .mouseenter(function() {
      n += 1;
      $(this).find("span").text("mouse enter x " + n);
   .mouseleave(function() {
      $(this).find("span").text("mouse leave");
load more v

Description: Bind an event handler to the "mouseover" JavaScript event, or trigger that event on an element., version added: 1.0.mouseover( handler ) handler Type: Function( Event eventObject ) A function to execute each time the event is triggered. ,This method is a shortcut for .on( "mouseover", handler ) in the first two variations, and .trigger( "mouseover" ) in the third.,Now when the mouse pointer moves over the Outer <div>, the message is appended to <div id="log">. We can also trigger the event when another element is clicked:

<div id="outer"> Outer <div id="inner"> Inner </div>
<div id="other"> Trigger the handler</div>
<div id="log"></div>
load more v

No autoresizing to fit the code,Presenting code answers on Stack Overflow,Log in if you'd like to delete this fiddle in the future., Console in the editor (beta)

/echo simulates Async calls:
JSON: /echo/json/
HTML: /echo/html/
XML: /echo/xml/

load more v

The mouseover event is fired at an Element when a pointing device (such as a mouse or trackpad) is used to move the cursor onto the element or one of its child elements.,The following example illustrates the difference between mouseover and mouseenter events.,Element: mouseover event,© 2005-2021 Mozilla and individual contributors. Content is available under these licenses.

<ul id="test">
   <li>item 1</li>
   <li>item 2</li>
   <li>item 3</li>
load more v

Many user interactions trigger more than one event. E.g. when the user moves the mouse over a button and "clicks" the mouse, she actually triggers a sequence of events (mouseover, mousedown, focus, mouseup, click).,To help emulate this, the Trigger helper has a couple of additional functions that emit event sequences:,The dispatched events are real DOM events, which will trigger both native and jQuery handlers. jQuery's .trigger Archive is simpler, but will only trigger event handlers that were bound by jQuery's .on., Your development team has a full backlog of feature requests, chores and refactoring coupled with deadlines? We are familiar with that. With our "DevOps as a Service" offering, we support developer teams with infrastructure and operations expertise.

The attached Coffeescript helper will let you create mouse events:

Copy$element = $('div')
load more v

When you use only mouse events to trigger an action, a keyboard-only user cannot trigger the event. The solution often involves one or two steps.,tabindex=”-1″: This makes the element focusable, but it can only receive focus programmatically through JavaScript. The user cannot simply press the tab key and focus on this element.,Oftentimes it is easier to put all of the code in a third function rather than storing it in an event listener so that both the mouse and keyboard event can just call the same function. That way you only have to maintain your code in a single location.,Second, provide the same functionality via the corresponding keyboard events. The following table lists mouse events and their equivalent keyboard events.

Oftentimes it is easier to put all of the code in a third function rather than storing it in an event listener so that both the mouse and keyboard event can just call the same function. That way you only have to maintain your code in a single location.

onMouseover = "doSomething();"
onfocus = "doSomething();"

function doSomething() {
   alert('Hello World!');

That’s good for performance, because there may be many intermediate elements. We don’t really want to process in and out of each one.,If the mouse moves very fast from #FROM to #TO elements as painted above, then intermediate <div> elements (or some of them) may be skipped. The mouseout event may trigger on #FROM and then immediately mouseover on #TO.,Events mouseover/mouseout, relatedTarget,The mousemove event triggers when the mouse moves. But that doesn’t mean that every pixel leads to an event.

container.onmouseover = container.onmouseout = handler;

function handler(event) {

   function str(el) {
      if (!el) return "null"
      return el.className || el.tagName;

   log.value += event.type + ':  ' +
      'target=' + str( +
      ',  relatedTarget=' + str(event.relatedTarget) + "\n";
   log.scrollTop = log.scrollHeight;

   if (event.type == 'mouseover') { = 'pink'
   if (event.type == 'mouseout') { = ''
load more v

Other "trigger-event" queries related to "Trigger onmouseover event programmatically in JavaScript"