addEventListener doesn't work in IE (tested in IE8)

Question

Work in Chrome and Firefox but not in IE. Fiddle
I have tried solution from here but doesn't help.

    if(window.attachEvent){
    // Attach event code here   
    window.attachEvent("load", toolify);
}
else{
    // Addeventlistener code here
    window.addEventListener('load',toolify,false);
}

Error from IE:

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E)
Timestamp: Sat, 23 Nov 2013 08:10:42 UTC


Message: Object doesn't support this property or method

Code:

<!DOCTYPE HTML>

<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Your Website</title>
    <script>


    "use strict";
function click(event) {
  var elem = this.parentNode.querySelector('div.info_container');
  if (elem) elem.style.display = elem.style.display === 'block' ? 'none' : 'block';
}
function toolify() {
  var idx,
      len,
      elem,
      info,
      text,
      elements = document.querySelectorAll('div.tooltip'),
      canvas,
      imgurl,
      pointer,
      tipHeight = 20,
      tipWidth = 20,
      width = 200,
      height = 100,
      ctx;

  // Create a canvas element where the triangle will be drawn
  canvas = document.createElement('canvas');
  canvas.width = tipHeight;
  canvas.height = tipWidth;
  ctx = canvas.getContext('2d');

  ctx.strokeStyle = '#000';   // Border color
  ctx.fillStyle = '#fff';     // background color
  ctx.lineWidth = 1;

  ctx.translate(-0.5,-0.5);   // Move half pixel to make sharp lines
  ctx.beginPath();
  ctx.moveTo(1,canvas.height);              // lower left corner
  ctx.lineTo(canvas.width, 1);              // upper right corner
  ctx.lineTo(canvas.width,canvas.height);   // lower right corner
  ctx.fill();                               // fill the background
  ctx.stroke();                             // stroke it with border
  //fix bottom row
  ctx.fillRect(0,canvas.height-0.5,canvas.width-1,canvas.height+2);

  // Create a div element where the triangel will be set as background
  pointer = document.createElement('div');
  pointer.style.width = canvas.width + 'px';
  pointer.style.height = canvas.height + 'px';
  pointer.innerHTML = '&nbsp;' // non breaking space
  pointer.style.backgroundImage = 'url(' + canvas.toDataURL() + ')';
  pointer.style.position = 'absolute';
  pointer.style.top = '2px';
  pointer.style.right = '1px';
  pointer.style.zIndex = '1'; // place it over the other elements

  for (idx=0, len=elements.length; idx < len; ++idx) {
    elem = elements[idx];
    elem.querySelector('img').addEventListener('click',click);
    text = elem.querySelector('div.info');
    // Create a new div element, and place the text and pointer in it
    info = document.createElement('div');
    text.parentNode.replaceChild(info,text);
    info.className = 'info_container';
    info.appendChild(pointer.cloneNode());
    info.appendChild(text);
    //info.addEventListener('click',click);
  }
}
window.addEventListener('load',toolify);
    </script>
    <style>
    div.tooltip
{
  position:relative;
  display:inline-block;
  width:300px;
  text-align:right;
}
div.tooltip > div.info
{
  display:none;
}
div.tooltip div.info_container
{
  position:absolute;
  right:20px;
  width:200px;
  height:100px;
  display:none;
}
div.tooltip div.info
{
  text-align:left;
  position:absolute;
  left:1px;
  right:1px;
  top:20px;
  bottom:1px;
  color:#000;
  padding:5px;
  overflow:auto;
  border:1px solid #000;
}

    </style>
</head>

    <body>
        <div class='tooltip'>
  <img src='http://www.craiglotter.co.za/wp-content/uploads/2009/12/craig_question_mark_icon1.png' alt='Help'/>
  <div class='info'>
    Some text to fill the box with.
  </div>
</div>
<div class='tooltip'>
  <img src='http://www.craiglotter.co.za/wp-content/uploads/2009/12/craig_question_mark_icon1.png' alt='Help'/>
  <div class='info'>
    Some text to fill the box with.   
  </div>
</div>

    </body>

<html>

IE8 uses attachEvent, others addEventLister. You test for one but still use the other? — mplungjan, Nov 23 '13 at 08:40

RobG · Answer 1 · 2013-11-23T09:56:53.220

In IE, the event name is "onload", in W3C compliant browsers it's "load", so:

if (window.addEventListener) {
  window.addEventListener('load', ...);

} else if (window.attachEvent) {
  window.attachEvent('onload', ...);
}

A better function for adding listeners in IE8 is below. It sets this to the element and passes event as the first parameter when using attachEvent to be more like addEventListener. It's not a full replacement for addEventListener, but there's an attempt at one on MDN. I'm not endorsing the function there (I think it will fail miserably in IE 7 and lower), just pointing it out as there is some good information in the article.

  function addListener(element, event, fn) {

    // Use addEventListener if available
    if (element.addEventListener) {
      element.addEventListener(event, fn, false);

    // Otherwise use attachEvent, set this and event
    } else if (element.attachEvent) {
      element.attachEvent('on' + event, (function (el) {
        return function() {
          fn.call(el, window.event);
        };
      }(element)));

      // Break closure and primary circular reference to element
      element = null;
    }
  }

score 0 · Answer 2 · answered Nov 23 '13 at 08:32

0

It's always a good idea to do a little research first. W3Schools (http://www.w3schools.com/jsref/dom_obj_event.asp) clearly gives the answer:

Allows the registration of event listeners on the event target (IE8 = attachEvent())

For knowing which one to use, just use a simple if statement

if(obj.attachEvent){
    // Attach event code here
}
else{
    // Addeventlistener code here
}

answered Nov 23 '13 at 08:32

David

4,744
5
33
64

I have updated question based on your answer. But it still doesn't work in IE did I do something wrong? – 1110 Nov 23 '13 at 08:39
@1110 Not sure. Can you put together a JS fiddle, or, if it's already online, give me that link? – David Nov 23 '13 at 08:41
@1110 - you're still using `.addEventListener` in both blocks.. (use .attachEvent in the IE one) – enhzflep Nov 23 '13 at 08:42
@enhzflep Wow, surprised I missed that. – David Nov 23 '13 at 08:44
http://jsfiddle.net/qAqZK/ just last line in script change with: if(window.attachEvent){ // Attach event code here window.attachEvent("load", toolify); } else{ // Addeventlistener code here window.addEventListener('load',toolify,false); } – 1110 Nov 23 '13 at 08:46
No error for me if I change that last line, but I can't figure out what is supposed to be happening when it does work. – David Nov 23 '13 at 09:07
When you click on image tooltip should be shown bellow image – 1110 Nov 23 '13 at 09:08
And your making those with a canvas? – David Nov 23 '13 at 09:11
Looking at your code more closely, it looks like all your JS is tied into the canvas, which IE8 doesn't support, as that is HTML5. There's where your problem is. – David Nov 23 '13 at 09:15

addEventListener doesn't work in IE (tested in IE8)

2 Answers2

Linked