addEventListener doesn't work in IE (tested in

This question already has an answer here:

addEventListener not working in IE8 9 answers

Work in Chrome and FF 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>

回答1:

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;
    }
  }

回答2:

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
}