SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    runat="server" Golgotha's Avatar
    Join Date
    Nov 2001
    Location
    Colorado
    Posts
    2,085
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Can't seen to attach event in IE

    Full code below, but the lines that do not work are:

    setExternalFeeds.feeds[i].attachEvent('onmouseover', setExternalFeeds.showTipListener);
    setExternalFeeds.feeds[i].attachEvent('onmouseout', setExternalFeeds.hideTipListener);

    Also, if you wouldn't mind having a quick look at the full code to check if it's solid that would be great...


    Code JavaScript:
    var setExternalFeeds = 
    { 
        feeds: null,
        btnExternalFeeds: null,
     
        init: function()
        {       
            this.feeds = document.getElementById("externalFeeds").getElementsByTagName("img");
     
            //imgBtnExternalFeed is the class on the img tags
            //set event listeners on images
            var pattern = new RegExp("(^| )" + 'imgBtnExternalFeed' + "( |$)");
     
            for (var i = 0; i < setExternalFeeds.feeds.length; i++)
            {
                if(pattern.test(setExternalFeeds.feeds[i].className))
                {
                    if(typeof window.addEventListener != 'undefined')
                    {
                        // not IE
                        setExternalFeeds.feeds[i].addEventListener('mouseover', setExternalFeeds.showTipListener, false);
                        setExternalFeeds.feeds[i].addEventListener('mouseout', setExternalFeeds.hideTipListener, false);
                    } else {
                        // IE
                        setExternalFeeds.feeds[i].attachEvent('onmouseover', setExternalFeeds.showTipListener);
                        setExternalFeeds.feeds[i].attachEvent('onmouseout', setExternalFeeds.hideTipListener);
                    }               
                }
            }
     
        },
     
        showTipListener: function()
        {
            var thisFeed = this.id.substring(this.id.indexOf("F"), this.id.length);
            var summaryID = "summary"+thisFeed;
            var summaryDiv = document.getElementById(summaryID).className = "summaryOver";
        },
     
        hideTipListener: function()
        {
            var thisFeed = this.id.substring(this.id.indexOf("F"), this.id.length);
            var summaryID = "summary"+thisFeed;
            var summaryDiv = document.getElementById(summaryID).className = "summary";
        }
    };
    // set the page load handler
    if(typeof window.addEventListener != 'undefined')
    {
        // not IE
        //window.addEventListener('load', setExternalFeeds.init, false);
        window.addEventListener('load', function () {setExternalFeeds.init(); }, false);
    } else {
        // IE
        //window.attachEvent('onload', setExternalFeeds.init);
        window.attachEvent('onload', function () {setExternalFeeds.init(); });
    }

  2. #2
    runat="server" Golgotha's Avatar
    Join Date
    Nov 2001
    Location
    Colorado
    Posts
    2,085
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    anyone? I'm trying to attach 'onmouseover' and 'onmouseout' to an image. Works in Firefox, but not IE? I know IE uses attachEvent so that's what I'm using. But no luck?

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    On IE the this keyword ends up losing its reference.

    Adding events has been the cause of lots of trouble for cross-browser compatibility, because thing

    Happily a lot of bright minds have been hammering away at the trouble, and come up with good solutions, not only for multiple AddLoadEvents but also a more flexible addEvent function.

    Dustin Diaz came up with a rock solid addEvent() function, which does a really good job of fixing problems with the this keyword and memory leakage. It's been superceeded now by frameworks like YUI and such like, but it still does a good enough job for the purpose.

    Code JavaScript:
    function addEvent( obj, type, fn ) {
    	if (obj.addEventListener) {
    		obj.addEventListener( type, fn, false );
    		EventCache.add(obj, type, fn);
    	}
    	else if (obj.attachEvent) {
    		obj["e"+type+fn] = fn;
    		obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
    		obj.attachEvent( "on"+type, obj[type+fn] );
    		EventCache.add(obj, type, fn);
    	}
    	else {
    		obj["on"+type] = obj["e"+type+fn];
    	}
    }
     
    var EventCache = function(){
      var listEvents = [];
      return {
        listEvents : listEvents,
        add : function(node, sEventName, fHandler){
          listEvents.push(arguments);
        },
        flush : function(){
          var i, item;
          for(i = listEvents.length - 1; i >= 0; i = i - 1){
            item = listEvents[i];
            if(item[0].removeEventListener){
              item[0].removeEventListener(item[1], item[2], item[3]);
            };
            if(item[1].substring(0, 2) != "on"){
              item[1] = "on" + item[1];
            };
            if(item[0].detachEvent){
              item[0].detachEvent(item[1], item[2]);
            };
            item[0][item[1]] = null;
          };
        }
      };
    }();

    This now means that you can add events with

    Code JavaScript:
    addEvent(setExternalFeeds.feeds[i], 'mouseover', setExternalFeeds.showTipListener);
    addEvent(setExternalFeeds.feeds[i], 'mouseout', setExternalFeeds.hideTipListener);

    After you've captured the event you want to do something with it. Both IE and other browsers have different ways of doing this and returning the target of the event, . IE uses window.event.srcElement while other browsers pass the event as a variable where the , commonly called e, , so to return the target of an event requires this kind of code.

    Code JavaScript:
    function eventTarget(e) {
      if (window.event) {
        return window.event.srcElement;
      } else {
        return e.target;
      }
    }

    And here is how you could use it

    Code JavaScript:
    showTipListener: function(e)
    {
      var id = eventTarget(e).id;
      var summaryID = "summary" + id.substring(id.indexOf("F"), id.length);
      var summaryDiv = document.getElementById(summaryID).className = "summaryOver";
    },
    hideTipListener: function(e)
    {
      var id = eventTarget(e).id;
      var thisFeed = id.substring(id.indexOf("F"), id.length);
      var summaryID = "summary"+thisFeed;
      var summaryDiv = document.getElementById(summaryID).className = "summary";
    }

    So putting it all together, I've been using the following sample code to test things with on Firefox and IE.

    Code HTML4Strict:
    <html>
    <head>
    <style type="text/css">
    .summary {
    	float: left;
    	width: 100px;
    	border: 1px solid black;
    }
    .summaryOver {
    	float: left;
    	width: 100px;
    	border: 1px solid black;
    	background: #eee;
    }
    </style>
    </head>
    <body>
    <div id="externalFeeds">
    	<img id="Feed1" src="forum/images/dancing_girl.jpg" class="imgBtnExternalFeed">
    </div>
    <div id="summaryFeed1">Feed 1</div>
    <script type="text/javascript">
    function addEvent( obj, type, fn ) {
    	if (obj.addEventListener) {
    		obj.addEventListener( type, fn, false );
    		EventCache.add(obj, type, fn);
    	}
    	else if (obj.attachEvent) {
    		obj["e"+type+fn] = fn;
    		obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
    		obj.attachEvent( "on"+type, obj[type+fn] );
    		EventCache.add(obj, type, fn);
    	}
    	else {
    		obj["on"+type] = obj["e"+type+fn];
    	}
    }
     
    var EventCache = function(){
    	var listEvents = [];
    	return {
    		listEvents : listEvents,
    		add : function(node, sEventName, fHandler){
    			listEvents.push(arguments);
    		},
    		flush : function(){
    			var i, item;
    			for(i = listEvents.length - 1; i >= 0; i = i - 1){
    				item = listEvents[i];
    				if(item[0].removeEventListener){
    					item[0].removeEventListener(item[1], item[2], item[3]);
    				};
    				if(item[1].substring(0, 2) != "on"){
    					item[1] = "on" + item[1];
    				};
    				if(item[0].detachEvent){
    					item[0].detachEvent(item[1], item[2]);
    				};
    				item[0][item[1]] = null;
    			};
    		}
    	};
    }();
    function eventTarget(e) {
    	if (window.event) {
    		return(window.event.srcElement);
    	} else {
    		return e.target;
    	}
    }
    </script>
    <script type="text/javascript">
    var setExternalFeeds =
    {
        feeds: null,
        btnExternalFeeds: null,
     
        init: function()
        {       
            this.feeds = document.getElementById("externalFeeds").getElementsByTagName("img");
     
            //imgBtnExternalFeed is the class on the img tags
            //set event listeners on images
            var pattern = new RegExp("(^| )" + 'imgBtnExternalFeed' + "( |$)");
     
            for (var i = 0; i < setExternalFeeds.feeds.length; i++)
            {
                if(pattern.test(setExternalFeeds.feeds[i].className))
                {
                    addEvent(setExternalFeeds.feeds[i], 'mouseover', setExternalFeeds.showTipListener);
                    addEvent(setExternalFeeds.feeds[i], 'mouseout', setExternalFeeds.hideTipListener);
                }
            }
     
        },
     
        showTipListener: function(e)
        {
    		var id = eventTarget(e).id;
    		var thisFeed = id.substring(id.indexOf("F"), id.length);
    		var summaryID = "summary"+thisFeed;
    		var summaryDiv = document.getElementById(summaryID).className = "summaryOver";
        },
     
        hideTipListener: function(e)
        {
    		var id = eventTarget(e).id;
    		var thisFeed = id.substring(id.indexOf("F"), id.length);
    		var summaryID = "summary"+thisFeed;
    		var summaryDiv = document.getElementById(summaryID).className = "summary";
        }
    };
    // set the page load handler
    if(typeof window.addEventListener != 'undefined')
    {
        // not IE
        //window.addEventListener('load', setExternalFeeds.init, false);
        window.addEventListener('load', function () {setExternalFeeds.init(); }, false);
    } else {
        // IE
        //window.attachEvent('onload', setExternalFeeds.init);
        window.attachEvent('onload', function () {setExternalFeeds.init(); });
    }
    </script>
    </body>
    </html>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •