SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Dec 2010
    Location
    Southeast Michigan
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    how to add user defined functions to elements?

    Im trying to add a cross browser event listener to an element so i made my own function that detects weather the browser is IE or Firefox, then add the appropriate eventListener function to the element.

    Code JavaScript:
    		// CROSS-BROWSER ADD EVENT HELPER METHODS
     
    		function addCrossBrowserEventListener (elementName, eventName, functionName) {
    			// does the addEventListener function exist?
    			if(elementName.addEventListener) {
    				// yes - use it
    				elementName.addEventListener(eventName, functionName, false);
    				return true;
    			} else {
    				// otherwise use attachEvent for IE
    				elementName.attachEvent("on" + eventName, functionName);
    				return true;
    			}
    		}
     
    		var name = document.getElementById("name");
     
    		function nameLabel () {
    			name.innerHTML = "Welcome";
    		}
     
    		name.addCrossBrowserEventListener(name,"click", nameLabel);

    but when i run the code inside Firefox i get a error message "name.addCrossBrowserEventListener is not a function".

    So I'm wondering is it possible to add custom functions to elements directly or is there any special way of doing it.

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,191
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    The reason why it's returning undefined is because your function isn't a prototype of the Function object, to my understanding you should simply be able to use the following.

    Code JavaScript:
    // CROSS-BROWSER ADD EVENT HELPER METHODS
     
    Function.prototype.addCrossBrowserEventListener(eventName, functionName) {
        // does the addEventListener function exist?
        if (this.addEventListener) {
            // yes - use it
            this.addEventListener(eventName, functionName, false);
            return true;
        } else {
            // otherwise use attachEvent for IE
            this.attachEvent("on" + eventName, functionName);
            return true;
        }
    }
     
    var name = document.getElementById("name");
     
    function nameLabel() {
        name.innerHTML = "Welcome";
    }
     
    name.addCrossBrowserEventListener("click", nameLabel);

  3. #3
    SitePoint Member
    Join Date
    Dec 2010
    Location
    Southeast Michigan
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by SgtLegend View Post
    The reason why it's returning undefined is because your function isn't a prototype of the Function object, to my understanding you should simply be able to use the following.

    Code JavaScript:
    Function.prototype.addCrossBrowserEventListener(eventName, functionName) {
        // does the addEventListener function exist?
        if (this.addEventListener) {
            // yes - use it
            this.addEventListener(eventName, functionName, false);
            return true;
        } else {
            // otherwise use attachEvent for IE
            this.attachEvent("on" + eventName, functionName);
            return true;
        }
    }
     
    var name = document.getElementById("name");
     
    function nameLabel() {
        name.innerHTML = "Welcome";
    }
     
    name.addCrossBrowserEventListener("click", nameLabel);
    When i use that code i get the following error in firefox " missing ; before statement script.js:1".

  4. #4
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,191
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Worked it out, I'm still new to the idea of prototypes even though i use JavaScript all the time so after a little guess work i came up with.

    Code JavaScript:
    Object.prototype.addCrossBrowserEventListener = function(eventName, functionName) {
        // does the addEventListener function exist?
        if (this.addEventListener) {
            // yes - use it
            this.addEventListener(eventName, functionName, false);
            return true;
        } else {
            // otherwise use attachEvent for IE
            this.attachEvent("on" + eventName, functionName);
            return true;
        }
    };

    You can see this as a working demo at Edit this Fiddle - jsFiddle - Online Editor for the Web (JavaScript, MooTools, jQuery, Prototype, YUI, Glow and Dojo, HTML, CSS)

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,701
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by SgtLegend View Post
    Worked it out, I'm still new to the idea of prototypes even though i use JavaScript all the time
    There is still a major problem with using Microsoft's attachEvent, and that is that the this keyword does not work properly.

    It works properly in Internet Explorer when using traditional event assignments, such as el.onclick = ...
    But when using the attachEvent method, the this keyword instead refers to the window object, and is effectively broken.

    You can get some information from the event object, but there can be major problems there too when the triggering element is different from the target element.

    When someone else wrote an addEvent function that used attachEvent or addEventListener, the problems with attachEvent were delved into in this Quirksmode article on how addEvent is considered harmful

    That inspired a war of sorts, where people tried all sorts of things to fix the problem, which resulted in a series of Rock Solid addEvent functions being created. One of which is Dustin Diaz's rock-solid addEvent function.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #6
    SitePoint Member
    Join Date
    Dec 2010
    Location
    Southeast Michigan
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Instead of all this mess, can i do the same thing using jQuery or prototype? This seems like a lot of work because Microsoft can't follow standards.

  7. #7
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,191
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Yep, in jQuery its actually just as simple as writing something like the below example.

    Code JavaScript:
    $(function() {
     
        $('#name').click(function() {
            $(this).html('Welcome');
        });
     
    });

  8. #8
    SitePoint Member
    Join Date
    Dec 2010
    Location
    Southeast Michigan
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank You to SgtLegend and paul_wilkins, i really appreciate all your help. I finally got the code working by using the jQuery .bind() function.


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
  •