Attaching event to an object not yet added to DOM

Question

I have an img object that has NOT yet been appended to the document tree. Is it possible to assign an onclick event (using attachEvent or addEventListener) to that object? Or do I have to append it to the DOM first and only then would I be able to attach the event?

var image = document.createElement("img");
image.src = "image1.png";

// Will any of the following work?
image.attachEvent("onclick", displayImage); // IE
image.addEventListener("click", displayImage, false); // non-IE

document.getElementById("imageDiv").appendChild(image);

function displayImage() {
   ...
}

Please, only include pure JavaScript (no JQuery). Thank you!

What happened when you tried it because I'm sure that would answer your question. — Andy, Dec 09 '15 at 02:51
Your code seems totally accurate, did something broke when you tested it? — fixmycode, Dec 09 '15 at 02:53

score 0 · Answer 1 · edited May 23 '17 at 11:59

0

As far as I see you are searching for a native implementation of the jquery live()/on() functionality. You should take a look at Implementing jQuery's "live" binder with native Javascript.

edited May 23 '17 at 11:59

Community

1
1

answered Apr 17 '16 at 02:10

ju_

569
1
4
17

score -1 · Answer 2 · answered Dec 09 '15 at 03:19

what i found：

add a judge before use it.
getElementById's param needs a "#".

var image = document.createElement("img");
image.src = "image1.png";
if(image.attachEvent){
image.attachEvent("onclick", displayImage);} // IE

image.addEventListener("click", displayImage, false); // non-IE

document.getElementById("#imageDiv").appendChild(image);

function displayImage() {
  ...
}

Attaching event to an object not yet added to DOM

2 Answers2