SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Sep 2011
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    addEventListener code

    Hello All,

    When the user clicks on a li, this will be highlighted.

    <ul class="outer">
    <li id="wikipedia">This is info for Chino in Reno</li>
    <li>
    <ul class="inner">
    <li>This is info for Chino in Reno</li>
    </ul>
    </li>
    <li>
    <ul class="inner">
    <li>This is info for Chino in Reno</li>
    </ul>
    </li>
    <li>This is info for Chino in Reno</li>
    </ul>

    This javascript code works, but I don't want to use global vars outside of the function object.


    var link = document.getElementById("wikipedia");
    var WikipediaLink =
    {
    init: function()
    {
    link.addEventListener("click", WikipediaLink.clickListener, false);
    },
    clickListener: function()
    {
    link.setAttribute("class","style");
    }
    };
    WikipediaLink.init();

    Instead of copying the var link = document.getElementById("wikipedia"); like this:


    var WikipediaLink =
    {
    init: function()
    {
    var link = document.getElementById("wikipedia");
    link.addEventListener("click", WikipediaLink.clickListener, false);
    },
    var link = document.getElementById("wikipedia");
    clickListener: function(event)
    {
    event.className("style");
    }
    };
    WikipediaLink.init();


    How to make it fall through to the clickListener property? The event object isn't the way, right???

    var WikipediaLink =
    {
    init: function()
    {
    var link = document.getElementById("wikipedia");
    link.addEventListener("click", WikipediaLink.clickListener, false);
    },
    clickListener: function(event)
    {
    event.className("style");
    }
    };
    WikipediaLink.init();

  2. #2
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Sounds like you are potentially repeating this code in a few places?

    If you want to abstract this out, you could make an instantiable function that you can simply pass in an ID to, like so:

    Lets say we have the following markup:
    Code HTML4Strict:
    <ul id="linkList">
    	<li id="someItem"><a href="#">skfjnfv</a></li>
    	<li><a href="#">sdkvjndfv</a></li>
    	<li id="anotherItem"><a href="#">sdkvjnsdfv</a></li>
    	<li><a href="#">dkjvnfv</a></li>
    	<li id="yetAnotherItem"><a href="#">skjvnsfv</a></li>
    </ul>

    You could create event handlers inside of an instantiable function like this:

    Code JavaScript:
    function Linker(id) {
    	var that = this; // to deal with scope issues
     
    	this.link = document.getElementById(id);
     
    	this.init = function() {
    		this.link.addEventListener("click", this.clickListener, false);
    	};
     
    	this.clickListener = function() {
    		that.link.setAttribute("class","something");
    	}
     
    	//execute initialisation
    	this.init();
    	return this;
    }
     
    l1 = new Linker("someItem");
    l2 = new Linker("yetAnotherItem");
     
    //uncomment this line to see the objects that are returned.
    //console.log(l1, l2);

    You could quite easily change this to work on an entire list without requiring IDs on each element:

    Code JavaScript:
    function Linker(el) { //note that we're accepting an Element now, not an ID
    	var that = this; // to deal with scope issues
     
    	this.link = el; //we don't need getElementById as we have an element already
     
    	this.init = function() {
    		this.link.addEventListener("click", this.clickListener, false);
    	};
     
    	this.clickListener = function() {
    		that.link.setAttribute("class","something");
    	}
     
    	//execute initialisation
    	this.init();
    	return this;
    }
     
     
    //get all the LIs in the UL
    listItems = document.getElementById("linkList").getElementsByTagName("li");
     
    for (var li in listItems) {
    	item = listItems[li];
     
    	//check that we have correct node type (i.e. an element and not a textnode)
    	if (item.nodeType !== 1) { 
    		continue;
    	}
     
    	new Linker(item);
    }
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  3. #3
    SitePoint Addict
    Join Date
    Dec 2005
    Posts
    336
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    With this code you can add any event and class to your element(s):

    Code JavaScript:
    function addClass(evt, el, cls) {
    	return el.addEventListener(
    		evt, 
    		function(){
    			this.setAttribute('class', cls);	
    		}, 
    		false
    	);		
    }
     
    // Single Element
    addClass('click', document.getElementById('wikipedia'), 'style');
     
    // Multiple Elements
    elms = document.querySelectorAll('.outer li');
    for(var i = 0; i < elms.length; i++) {
    	addClass('mouseover', elms[i], 'style');
    }


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
  •