Javascript onclick event to area

Question

I am trying to add onclick event through javascript to my map element that was created through javascript too , I am not going to paste whole code here but will make a short version . so this what I have done so far:

 var mapimg = createElement("img"); // create and set up img element for map 
mapimg.src "some path ";
map.img.width = some with;
map.img.height = some height;
map.usemap = "#Map"; // img element done
var map = createElement("map"); // set map element and attributes for him 
map.name = "Map";
map.id = "Map";
area(1-10) = createElement("area"); // creating a 10 areas 
area.id = some;
area.shape = some;
area.coords = some; // area allement have same attributes but with different values 
// ones i done with are append them to map and then append mapimg and map to body 

//  now trying to add on click event 

map.addEventListener("onClick",function(){
            var id = map.getElementById(this);
            var img = "images/map/reg" + id + ".jpg";
            mapimg.src = img;
        });

map are working but onclick event are not working i have writed jquery version that works just fine with a html elements

$(document).ready(function() {
            $('area').click(function() {
                var title = $(this).attr('title');
                var image = "images/map/reg" + title + ".jpg";
                $('.mapimg').attr('src', image);
                $('#loginsubmitbutton2').show();
                $('input[name="village"]').attr('value', title);
            })

        });

this is a full script

Answer 1

Having multiple elements with an event listener for each one of them is inefficient. jQuery makes it easy by using $(document) as event.target (i.e. the element clicked, hovered, etc.). In plain JavaScript it's possible as well by adding the event listener on the ancestor of the multiple elements.

1. addEventListener() to an element that contains the group of elements.
2. event.preventDefault() if event.targets (i.e. the group of elements you want to click) default behavior is undesired (e.g. if e.target is an <a>nchor and you don't want it to jump to somewhere like it normally does).
3. Set a conditional that will verify what is in the eventPhase* is an event.target and not the event.currentTarget*.
4. After that important step, you do all of your intended tasks of your functions at this point.

5. After your functions have completed their tasks, use event.stopPropagation() to stop the event from bubbling* so that no other events are triggered on anything else.

   * TD;LR for details on event methods and properties read: eventPhase, currentTarget, and Comparison of Event Targets

   Also, read this article about this particular technique.

The following Snippet demonstrates how you use one event listener on a <map> and assign each <area> as a unique event.target. To test it, simply click a planet, and the result will be the coordinates of the event.target and msg that the click event was triggered. Click anywhere that's not covered by a planet, and you get no result, that's the event.stopPropagation() working.

SNIPPET

var map = document.querySelector('map');

map.addEventListener("click", eventHandler, false);

function eventHandler(e) {
  e.preventDefault();
  if (e.target != e.currentTarget) {
    var clicked = e.target.coords;
    console.log('click event triggered at ' + clicked);
  }
  e.stopPropagation();
}

<img src="https://s-media-cache-ak0.pinimg.com/736x/80/f3/06/80f3061369194bef1e2025d9a382d1a2.jpg" usemap='#iMap'>
<map id="iMap" name="iMap">
  <area shape="circle" alt="" title="" coords="66,179,10" href="" target="" />
  <area shape="circle" alt="" title="" coords="198,141,13" href="" target="" />
  <area shape="circle" alt="" title="" coords="152,244,17" href="" target="" />
  <area shape="circle" alt="" title="" coords="107,124,17" href="" target="" />
  <area shape="circle" alt="" title="" coords="353,203,83" href="" target="" />
  <area shape="circle" alt="" title="" coords="438,235,29" href="" target="" />
  <area shape="circle" alt="" title="" coords="482,135,25" href="" target="" />
  <area shape="circle" alt="" title="" coords="499,271,6" href="" target="" />
  <area shape="circle" alt="" title="" coords="262,243,99" href="" target="" />
  <!-- Created by Online Image Map Editor (http://www.maschek.hu/imagemap/index) -->
</map>

Answer 2

It should not be onclick it should be just click when using addEventListener

    map.addEventListener("click",function(){
        var id = map.getElementById(this);
        var img = "images/map/reg" + id + ".jpg";
        mapimg.src = img;
    });

OR if you want to use onclick

    map.onclick = function(){
        var id = map.getElementById(this);
        var img = "images/map/reg" + id + ".jpg";
        mapimg.src = img;
    };

How to add event listener to repeating elements inside a parent without looping through all of them

If you want to add event to multiple repeated elements inside a parent element, rather than looping through all the elements and wasting memory a good solution is to use the concept of event propagation as explained in the code below: (since I understand map is the parent of area)

map.addEventListener("click", myFunction());
//we attach an event listener to the parent

function myFunction(e){
    //e.currentTarget : to which event listener is attached
    //e.target: the element which was clicked
    if(e.target !== e.currentTarget){
       //we only need to hear events from the area (children of map), so we ignore any other events that are called when the parent is clicked by this if statement
        var id = e.target.Id;

        alert(id);
        //your code here

    }
    e.stopPropagation(); //we stop the propagation of event to the DOM once its purpose is solved 

}

This solution is independent of the number of area elements you have. You will avoid using any for loop and wasting memory.

Answer 3

Use click instead of onclick,you can simply use id instead of getElementById

map.addEventListener("click",function(){
            var id = this.id;
            var img = "images/map/reg" + id + ".jpg";
            mapimg.src = img;
        });