Click on an element that triggers the click on another

Question

I have 5 images on my Slide

    <li><img src="images/slide3.jpg" alt=""></li>
    <li><img src="images/slide2.jpg" alt=""></li>
    <li><img src="images/slide5.jpg" alt=""></li>
    <li><img src="images/slide1.jpg" alt=""></li>
    <li><img src="images/slide4.jpg" alt=""></li>

By clicking them directly on them, the Jquery of the account run the rotation.

But my intention is to put a menu at the bottom with the title of the Slide items so that the user, if he does not understand that it is to click on the image, click directly on the menu titles.

What pure JS solution could I use to solve this problem? (I’m a beginner and know almost nothing of DOM manipulation).

Answer 1

The Javascript solution can be obtained as follows:

function fireEvent(element,event) {
   if (document.createEvent) {
       // dispatch for firefox + others
       var evt = document.createEvent("HTMLEvents");
       evt.initEvent(event, true, true ); // event type,bubbling,cancelable
       return element.dispatchEvent(evt);
   } else {
       // dispatch for IE
       var evt = document.createEventObject();
       return element.fireEvent('on'+event,evt);
   }
}

This function accepts two parameters, the target element and the event to be triggered in that target element.

Also in the Jsfiddle.

Example

Below follows an example of use where we have a alert() in the first element, with the second element making use of the function shown above so that when it receives a click, the click event of the first element is triggered:

function fireEvent(element,event) {
   if (document.createEvent) {
       // dispatch for firefox + others
       var evt = document.createEvent("HTMLEvents");
       evt.initEvent(event, true, true ); // event type,bubbling,cancelable
       return element.dispatchEvent(evt);
   } else {
       // dispatch for IE
       var evt = document.createEventObject();
       return element.fireEvent('on'+event,evt);
   }
}

<div id="meuElemento" onclick="alert('bubu');">
  Se clicares aqui dá um alert()
</div>

<div onclick="fireEvent(document.getElementById('meuElemento'), 'click');">
  Se clicares aqui, vai despoletar o clique no elemento que tem o alert()
</div>

Documentation

Documentation on the method dispatchEvent() and on the method fireEvent() of Internet Explorer:

• Method fireEvent

  Fires specified event in object.

• Method dispatchEvent

  Triggers an event in the specified target element by invoking the affected eventlisteners in the appropriate order. Normal event processing rules (including capture and optional bubble phase) apply to manually triggered events with dispatchEvent().

Note:
To deepen, the documentation on Document Object Model Events where it refers to interface EventTarget, introduced at DOM level 2, where the purpose of this interface is explained as well as its operation in greater detail.

---

^{Function code originally published in the post Firing Javascript Events (like onchange) of the jehiah.cz website, which was published by @jehiah on 2008-01-23, and was subsequently optimized in this answer published by @Chris Macdonald.}