How do I declare event object with onclick event using Javascript (not html)?

Question

Here is my code:

function testimage() {
  var image;

  image = new Image();

  with (image) {
    id = "page1";
    border = 0;
    name = "IllustGIF";
    useMap = "#MAP1";
    src = "sample.gif" + "?d=" + new Date();

    // The event argument here is invalid; it's to show what is the desired result.
    onclick = function() { RecordMouseClick(event, this.id); };
  }

  // attached to body tag
  document.getElementById("body_ID").appendChild(image);
}

function RecordMouseClick(event, id) {
  alert("id: " + id + ", and event object should contain mouse x- and y- coordinates clicked");
}

I need to define the onclick event in JavaScript, not HTML. Now in HTML, it's easy -- just pass event as an argument to the function and, voila, event object in JavaScript But doing it all from scratch, all in JavaScript, without HTML, is challenging for me. When the reference function is called, it's supposed to record the element id and the mouse click x- and y- coordinates from the onclick event.

How can I pass an event to the onclick, such that the event object is valid at run-time?

Thank you.

canon · Accepted Answer · 2011-10-07 15:56:02Z

5

Here's a sample fiddle.

image.onclick = function(e) { 
    e = e || window.event;
    RecordMouseClick(e, image.id); 
};

edited Oct 7, 2011 at 15:56

answered Oct 7, 2011 at 15:33

canon

41.9k10 gold badges77 silver badges102 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user717236 Over a year ago

Thank you very much for your help. I appreciate the link and the solution.

canon Over a year ago

Thanks. I've updated the fiddle to address firefox's clientX versus x for click event coordinates.

js-coder · Accepted Answer · 2011-10-07 15:33:05Z

2

document.getElementById('id-of-the-html-element').onclick = function(){
// your code
};

or

function doSth(){
// your code
}

document.getElementById('id-of-the-html-element').onclick = doSth;

Read more about it over here: https://developer.mozilla.org/en/DOM/event

answered Oct 7, 2011 at 15:33

js-coder

8,35410 gold badges44 silver badges59 bronze badges

Comments

Chad · Accepted Answer · 2011-10-07 15:31:21Z

1

Try addEventListener().

image.addEventListener('click', 
    function(e) { 
        RecordMouseClick(e, this.id); 
    }, false);

answered Oct 7, 2011 at 15:31

Chad

19.6k4 gold badges54 silver badges75 bronze badges

Collectives™ on Stack Overflow

How do I declare event object with onclick event using Javascript (not html)?

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related