How to Simulate a Click With JavaScript

How to simulate a click with JavaScript?

[Edit 2022] The answer was really outdated. Modernized it. The original answer is at the bottom.

Use element.dispatchEvent with a freshly created Event of the desired type.

Here's an example using event delegation.

Fork this stackblitz project to play around with it.

// Note: {bubbles: true} because of the event delegation ...
document.addEventListener(`click`, handle);
document.addEventListener(`virtualhover`, handle);

// the actual 'trigger' function
const trigger = (el, etype, custom) => {
  const evt = custom ?? new Event( etype, { bubbles: true } );
  el.dispatchEvent( evt );
};

// a custom event ;)
const vHover = new CustomEvent(`virtualhover`, 
  { bubbles: true, detail: `red` });

setTimeout( _ => 
  trigger( document.querySelector(`#testMe`), `click` ), 1000 );

function handle(evt) {
  if (evt.target.id === `clickTrigger`) {
    trigger(document.querySelector(`#testMe`), `click`);  
  }
  
  if (evt.type === `virtualhover`) {
    evt.target.style.color = evt.detail;
    return setTimeout( _ => evt.target.style.color = ``, 1000 );
  }
  
  if (evt.target.id === `testMe`) {
    document.querySelector(`#testMeResult`)
      .insertAdjacentHTML(`beforeend`, `<p>One of us clicked #testMe. 
        It was <i>${evt.isTrusted ? `<b>you</b>` : `me`}</i>.</p>`);
    trigger(
      document.querySelector(`#testMeResult p:last-child`), 
      `virtualhover`, 
      vHover );  
  }
}

body {
  font: 1.2rem/1.5rem verdana, arial;
  margin: 2rem;
}

#testMe {
  cursor: pointer;
}

p {
  margin: 0.2rem 0;
}

<div id="testMe">
  Test me can be clicked
</div>

<p><button id='clickTrigger'>Click #testMe</button></p>

<div id="testMeResult"></div>

Simulate click with javascript with no element ID

You can use querySelector and select the button with its attributes

var button = document.querySelector('[data-events="click:onAddNote"]');
button.onclick = ()=>console.log('Clicked');
button.click()

<button 
   type="button" 
   class="blue" 
   data-events="click:onAddNote" 
   data-events-target="cpoe-LabResultDetailView"
>
   Add Note
</button>

Simulating Button click in javascript

Since you are using jQuery you can use this onClick handler which calls click:

$("#datepicker").click()

This is the same as $("#datepicker").trigger("click").

For a jQuery-free version check out this answer on SO.

How to simulate a hold click on a button class

You can create events and of cause also MouseEvents yourself.

In modern browsers you can just do this by calling the constructor of the needed event type, ore by calling document.createEvent('<EventName>')
https://developer.mozilla.org/en-US/docs/Web/API/Event

You can then trigger this event on any element you like using dispatchEvent()
https://developer.mozilla.org/de/docs/Web/API/EventTarget/dispatchEvent

document.getElementById("button").addEventListener('mousedown', mouseDown);
document.getElementById("button").addEventListener('mouseup', mouseUp);

function mouseDown() {
  document.getElementById("button").innerHTML = "The mouse button is held down.";
}

function mouseUp() {
  document.getElementById("button").innerHTML = "You released the mouse button.";
}

// bind click event on simulate button
document.querySelector('.simulate').addEventListener('click', () => {
  console.log('start');
  simulateMouseEvent(document.getElementById("button"), 'mousedown')
  setTimeout(() => {
    console.log('end');
    simulateMouseEvent(document.getElementById("button"), 'mouseup')
  }, 5000)
})

// capsulate the event trigger stuff
// see: http://youmightnotneedjquery.com/
function simulateMouseEvent(el, eventName){
  let event;
  if (window.MouseEvent && typeof window.MouseEvent === 'function') {
    event = new MouseEvent(eventName);
  } else {
    event = document.createEvent('MouseEvent');
    event.initMouseEvent(eventName);
  }

  el.dispatchEvent(event);
}

<!DOCTYPE html>
<html>
<body>

  <p>
    <button class="button" id="button">You released the mouse button.</button>
  </p>

  <p>
    <button class="simulate">simulate</button>
  </p>

</body>
</html>

How to Simulate a Click With JavaScript