Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #15358

Re: One Event Listner for Multi-Elements- How?

Show all headers | View raw

On 2012-08-14 06:09, darin.hensley@gmail.com wrote:
> I have 4 seperate '<div class="links"><a href="#div"
> id="b1">home</a></div>' elements.
> 
> Each one has a addEventListner("click", home, false)....one for
> home, photos, media, and bio.
>
> I read where I can have one addEventlistener for all of them and if
> the click is detected just distinguish between each one and then perform
> that action based on the distinction. How would I do this?

This is called "event delegation". The basic idea is that you attach one
listener to an element which contains your links, and decide what to do
in the (single) callback function.

You mentioned addEventListener(). This method is not supported in IE
versions before 9, and there are many other situations in JS DOM event
handling where browser specific behaviors need to be addressed. For the
sake of simplicity, I have omitted them in the code below, so this will
only work in browsers which support the W3C event model (= basically
every current browser apart from IE 8-).

Here's something to get you started:

<div id="container">
    <div class="links"><a href="a.html" id="b1">First link</a></div>
    <div class="links"><a href="b.html" id="b2">Second link</a></div>
    <div class="links"><a href="c.html" id="b3">Third link</a></div>
    <div class="links"><a href="d.html" id="b4">Fourth link</a></div>
</div>

<script>

var container = document.getElementById("container");
container.addEventListener("click", clickHandler, false);

// the single event handler function
function clickHandler (evt) {
    var evtTarget = getEvtTarget(evt);
    if (evtTarget && evtTarget.nodeName.toLowerCase() == "a") {
        evt.preventDefault();  // (IE uses evt.returnValue)
        alert(evtTarget.firstChild.data + " clicked"
            + "; id = " + evtTarget.id
            + "; href = " + evtTarget.href);
    }
}

// makes sure our target is an element node, not just text
function getEvtTarget (evt) {
    var node = evt.target;   // (IE uses evt.srcElement)
    if (node && node.nodeType == 3) {  // 3 = text node
        node = node.parentNode;
    }
    return node;
}

</script>

- stefan

Back to comp.lang.javascript | Previous | Next — Previous in thread | Next in thread | Find similar | Unroll thread

Thread

One Event Listner for Multi-Elements- How? darin.hensley@gmail.com - 2012-08-13 21:09 -0700
  Re: One Event Listner for Multi-Elements- How? Stefan Weiss <krewecherl@gmail.com> - 2012-08-14 16:19 +0200
    Re: One Event Listner for Multi-Elements- How? Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2012-08-15 13:40 +0200
      Re: One Event Listner for Multi-Elements- How? MC <news@aisus.com> - 2012-08-15 09:19 -0500
      Re: One Event Listner for Multi-Elements- How? David Mark <dmark.cinsoft@gmail.com> - 2012-08-16 15:42 -0700
    Re: One Event Listner for Multi-Elements- How? dman777 <darin.hensley@gmail.com> - 2012-08-17 16:03 -0700
      Re: One Event Listner for Multi-Elements- How? "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2012-08-18 07:54 +0000
      Re: One Event Listner for Multi-Elements- How? Mike Winter <usenet@michael-winter.me.invalid> - 2012-08-18 19:50 +0100
        Re: One Event Listner for Multi-Elements- How? Gregor Kofler <usenet@gregorkofler.com> - 2012-08-19 01:35 +0200
          Re: One Event Listner for Multi-Elements- How? Mike Winter <usenet@michael-winter.me.invalid> - 2012-08-19 00:41 +0100

csiph-web