Solved

How to modify addEventListener code to work for IE8

Posted on 2014-11-19
5
182 Views
Last Modified: 2014-11-21
I have the following code that works to get the ID of an element when clicked but I also need this to work in IE8 which doesn't support addEventListener so how can I get this to work in IE8 also (***without browser sniffing - please use feature detection instead)?
document.addEventListener('click', function(e) {
    e = e || window.event;
    var target = e.target || e.srcElement;
    if(target.id != "")
    {
        alert(target.id);
    }
     
}, false);

Open in new window

0
Comment
Question by:894359
  • 3
  • 2
5 Comments
 
LVL 35

Accepted Solution

by:
Robert Schutt earned 500 total points
ID: 40454206
Since you need IE8 specifically what you need to add is attachEvent. There are a lot of nice cross-browser scripts out there on the 'net that do a lot more like making sure the proper context is set, provide access to other properties (text in element, pressed key, mouse coordinates) but for now the following code should do (based on a fiddle from a previous question which I updated).
function addEvent(el, ev, fn, uc) {
    if (el.addEventListener) {
        el.addEventListener(ev, fn, uc);
    } else if (el.attachEvent) { // IE8-
        el.attachEvent('on'+ev, fn);
    }
}

addEvent(document, 'click', function(e) {
    e = e || window.event;
    var target = e.target || e.srcElement;
    if(target.id != "")
    {
        alert(target.id);
    }
    //var text = target.textContent || target.innerText;
}, false);

Open in new window

If you need more/better functionality there are a lot of great generic solutions for this:
* http://javascriptrules.com/2009/07/22/cross-browser-event-listener-with-design-patterns/
* http://blog.stchur.com/2007/04/26/optimize-your-javascript-cross-browser-code-through-branching/
* http://therealcrisp.xs4all.nl/upload/addEvent_dean.html

Also reading MDN about IE8 should clarify some possible issues.

Then if you're still craving more information, read addEvent() considered harmful but like swimming I wouldn't recommend this within 2 hours after eating ;-)
0
 

Author Comment

by:894359
ID: 40455622
What I want is code that listens for a click on an element and then reads the "ID" as the initial code does but also works with IE8 which the current code doesn't do. Ive looked at some of the articles on this but I don't know Javascript enough to to do this without a lot of trial and error.

Thanks!
0
 
LVL 35

Expert Comment

by:Robert Schutt
ID: 40456497
I have tested the updated fiddle with IE8 through the url http://jsfiddle.net/robert_schutt/4pd4xuvs/2/embedded/result/ and it works the same as the previous fiddle on other browsers as far as I can tell. Can you be more specific about what and/or how it's not working for you, have you tried to make a page with this code and debug with F12 for example? Are you able to share a link to a page where it's not working for you?

I know this is not convincing per se but here is a screenshot showing my IE version and the alert working.
capture
0
 

Author Comment

by:894359
ID: 40456740
Hi Robert,
Let me test and I will get back to you.

Thanks,
MJ
0
 

Author Closing Comment

by:894359
ID: 40458025
Thanks Robert!
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
Learn the basics of lists in Python. Lists, as their name suggests, are a means for ordering and storing values. : Lists are declared using brackets; for example: t = [1, 2, 3]: Lists may contain a mix of data types; for example: t = ['string', 1, T…
Learn the basics of modules and packages in Python. Every Python file is a module, ending in the suffix: .py: Modules are a collection of functions and variables.: Packages are a collection of modules.: Module functions and variables are accessed us…

856 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question