Please tell me how and where we will define "addEventListener"

Question

<script type="text/javascript">
  function doSomething() {
    alert('Image clicked');
  }

var myImage = document.getElementById('my_image_id');
myImage.addEventListener('click', doSomething, false);

</script>

HTML------------------------------------

<body>
  <img src="xxx.png" width="100px" height="100px" id="="my_image_id"/>
</body>

I'm getting an error myImage is null or not an object.

Syntax error `id="="`. Also make sure you add the script **after** the markup. — elclanrs, Sep 05 '13 at 06:24
possible duplicate of [Why does jQuery or a DOM method such as \`getElementById\` not find the element?](http://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) — Felix Kling, Sep 05 '13 at 06:32

score 2 · Answer 1 · answered Sep 05 '13 at 06:25

2

You should put your code after your markup, or wrap your code with a function and execute function when document is ready.

The reason you get the error is that, when document.getElementById('my_image_id'); called, there is no element with given id that time. I hope you got the idea.

answered Sep 05 '13 at 06:25

Kemal Dağ

2,687
19
26

ok got it, hope i can add multiple addeventlistners and removeevent listners can u give me an example? – Sujesh Sep 05 '13 at 06:38
1

@Sujesh: Just call `addEventListener` multiple times. – Felix Kling Sep 05 '13 at 06:45
@FelixKling, just like that. Thanks. – Kemal Dağ Sep 05 '13 at 06:48

score 2 · Accepted Answer · answered Sep 05 '13 at 06:32

Put it inside window.onload to wait for the DOM fully loaded before attaching your event listener. Also notice that addEventListener does not work across all browsers. To make it work across all browsers, try:

window.onload = function()
{
  var myImage = document.getElementById('my_image_id');
  if (myImage.addEventListener){
    myImage.addEventListener('click', doSomething, false);
  } else if (myImage.attachEvent){
       myImage.attachEvent('onclick', doSomething);
  }
}

Yeah you are right. Thanks, if we put the above code anywhere, it'll work. — Sujesh, Sep 05 '13 at 07:42

Sudhir Bastakoti · Answer 3 · 2013-09-05T06:45:13.220

1

add it before <body> closing because DOM hasn't got to "my_image_id" by the time your relevant script is executed, like:

<body>
<img src="xxx.png" width="100px" height="100px" id="my_image_id"/>
<script type="text/javascript">
function doSomething() {
    alert('Image clicked');
 }

 var myImage = document.getElementById('my_image_id');

 myImage.addEventListener('click', doSomething, false);
</script>
</body>

Added

if (myImage.addEventListener) {
  myImage.addEventListener('click', doSomething, false);
}
else if(myImage.attachEvent) { // FOR IE
  myImage.attachEvent('onclick', doSomething);
}
else { 
    //
}

edited Sep 05 '13 at 06:45

answered Sep 05 '13 at 06:26

Sudhir Bastakoti

94,682
14
145
149

Hi tried your code and works fine in moz and chrome. but ie giving error "object doesn't support this property or method" – Sujesh Sep 05 '13 at 06:40
@Sujesh see the added code you need to use attachEvent for IE – Sudhir Bastakoti Sep 05 '13 at 06:45
Yeah its working fine, but a small doubt. why we should add the script after the markup? in usual case, if we use "var myImage = document.getElementById('my_image_id'); before, we'll be able to access the image, but why not in this case? – Sujesh Sep 05 '13 at 07:00
@Sujesh as i mentioned in answer comment part above, your javascript code var myImage = document.getElementById('my_image_id'); gets executed before the DOM gets to your image tag, as a result of which, it throws error since it could not find element with id 'my_image_id'.. i hope its clear – Sudhir Bastakoti Sep 05 '13 at 07:06
@Sujesh: why don't put the code inside `window.onload`? it's better as `window.onload` is for this purpose. – Khanh TO Sep 05 '13 at 07:11
Thank you all, I got the concept now. Previously i was doing only inline event handling and i'm new to addEventListener. so there was no problem with the loading. in this case, we can either use "window.onload" as suggested by "Khanh TO" ( we can have the code anywhere inside the – Sujesh Sep 05 '13 at 08:11

score 1 · Answer 4 · answered Sep 05 '13 at 06:28

1

window.onload = function()
{
myImage.addEventListener('click', doSomething, false);
}

answered Sep 05 '13 at 06:28

Artem Gorlachev

517
4
8

working fine in moz and chrome. but ie giving error "object doesn't support this property or method" – Sujesh Sep 05 '13 at 06:44
@Sujesh: the reason is `addEventListener` does not work on all browsers (IE uses `attachEvent`). Check my answer – Khanh TO Sep 05 '13 at 06:47

Please tell me how and where we will define "addEventListener"

4 Answers4