Removing in line javascript events

Discussion in 'Javascript' started by m0nkeymafia, Jun 11, 2007.

  1. m0nkeymafia

    m0nkeymafia Guest

    I read about this technique to basically allow you to have a file with
    behaviours and javascript events that attach to various dom objects
    and events but are not done inline.

    so its basically a css file but for javascript.

    anyone know what it is called or where i can get more information
    about it??

    thanks
     
    m0nkeymafia, Jun 11, 2007
    #1
    1. Advertising

  2. m0nkeymafia

    Darko Guest

    On Jun 11, 3:53 pm, m0nkeymafia <> wrote:
    > I read about this technique to basically allow you to have a file with
    > behaviours and javascript events that attach to various dom objects
    > and events but are not done inline.
    >
    > so its basically a css file but for javascript.
    >
    > anyone know what it is called or where i can get more information
    > about it??
    >
    > thanks


    No, the technique looks like the following:
    <html>
    <script href="events.js"></script>
    <body>
    <div id="housing">
    <!------------------------------------------->
    </div>

    <div id="humanitarian">
    <!------------------------------------------->
    </div>
    </body>
    </html>

    // events.js:
    document.onload = function()
    {
    document.getElementById( "housing" ).onclick = function()
    {
    // ...
    }

    document.getElementById( "humanitarian" ).onmousemove =
    function()
    {
    // ...
    }
    }

    Does this serve your needs?
     
    Darko, Jun 11, 2007
    #2
    1. Advertising

  3. m0nkeymafia

    Darko Guest

    On Jun 11, 3:53 pm, m0nkeymafia <> wrote:
    > I read about this technique to basically allow you to have a file with
    > behaviours and javascript events that attach to various dom objects
    > and events but are not done inline.
    >
    > so its basically a css file but for javascript.
    >
    > anyone know what it is called or where i can get more information
    > about it??
    >
    > thanks


    No, the technique looks like the following:
    <html>
    <script href="events.js"></script>
    <body>
    <div id="housing">
    <!------------------------------------------->
    </div>

    <div id="humanitarian">
    <!------------------------------------------->
    </div>
    </body>
    </html>

    // events.js:
    document.onload = function()
    {
    document.getElementById( "housing" ).onclick = function()
    {
    // ...
    }

    document.getElementById( "humanitarian" ).onmousemove = function()
    {
    // ...
    }
    }
     
    Darko, Jun 11, 2007
    #3
  4. m0nkeymafia

    m0nkeymafia Guest

    On Jun 11, 4:24 pm, Darko <> wrote:
    > On Jun 11, 3:53 pm, m0nkeymafia <> wrote:
    >
    > > I read about this technique to basically allow you to have a file with
    > > behaviours and javascript events that attach to various dom objects
    > > and events but are not done inline.

    >
    > > so its basically a css file but for javascript.

    >
    > > anyone know what it is called or where i can get more information
    > > about it??

    >
    > > thanks

    >
    > No, the technique looks like the following:
    > <html>
    > <script href="events.js"></script>
    > <body>
    > <div id="housing">
    > <!------------------------------------------->
    > </div>
    >
    > <div id="humanitarian">
    > <!------------------------------------------->
    > </div>
    > </body>
    > </html>
    >
    > // events.js:
    > document.onload = function()
    > {
    > document.getElementById( "housing" ).onclick = function()
    > {
    > // ...
    > }
    >
    > document.getElementById( "humanitarian" ).onmousemove = function()
    > {
    > // ...
    > }
    >
    > }


    Ah brilliant thanks, is that safe to do [closures etc] ?
    Or is it generally a bad technique?
     
    m0nkeymafia, Jun 11, 2007
    #4
  5. m0nkeymafia

    Darko Guest

    On Jun 11, 4:29 pm, m0nkeymafia <> wrote:
    > On Jun 11, 4:24 pm, Darko <> wrote:
    >
    >
    >
    > > On Jun 11, 3:53 pm, m0nkeymafia <> wrote:

    >
    > > > I read about this technique to basically allow you to have a file with
    > > > behaviours and javascript events that attach to various dom objects
    > > > and events but are not done inline.

    >
    > > > so its basically a css file but for javascript.

    >
    > > > anyone know what it is called or where i can get more information
    > > > about it??

    >
    > > > thanks

    >
    > > No, the technique looks like the following:
    > > <html>
    > > <script href="events.js"></script>
    > > <body>
    > > <div id="housing">
    > > <!------------------------------------------->
    > > </div>

    >
    > > <div id="humanitarian">
    > > <!------------------------------------------->
    > > </div>
    > > </body>
    > > </html>

    >
    > > // events.js:
    > > document.onload = function()
    > > {
    > > document.getElementById( "housing" ).onclick = function()
    > > {
    > > // ...
    > > }

    >
    > > document.getElementById( "humanitarian" ).onmousemove = function()
    > > {
    > > // ...
    > > }

    >
    > > }

    >
    > Ah brilliant thanks, is that safe to do [closures etc] ?
    > Or is it generally a bad technique?


    Well, it is safe per se, but it is true that programmers are prone to
    making mistakes in such contexts, such as not using "this" as they
    should. For example, look at the following example, and think what's
    the problem with it:

    <html>
    <script src="events.js"></script>
    <body>
    <div id="housing">
    housing
    </div>

    <div id="humanitarian">
    humanitarian
    </div>
    </body>
    </html>

    // events.js:

    // instead of creating event handlers on the fly, i.e. in the big
    document.onload function, we shall e.g. create an Event Handlers
    Factory:
    function EventHandlersFactory()
    {
    // the factory keeps track of how many event handlers it created
    so far
    this.nrEventHandlers = 0;
    }

    // the factory has only one method:
    EventHandlersFactory.prototype.getEventHandler = function()
    {
    // it updates the attribute
    this.nrEventHandlers++;
    // and returns the function that will execute at the specified
    moment. It should only alert the ordinal number of the event.
    return function()
    {
    alert( "I am the " + this.nrEventHandlers + ". event handler
    created" );
    }
    }

    window.onload = function()
    {
    alert( "nesto" );
    var ehf = new EventHandlersFactory();
    document.getElementById( "housing" ).onclick =
    ehf.getEventHandler();
    document.getElementById( "humanitarian" ).onclick =
    ehf.getEventHandler();
    }

    // question: what happens when you click on the "humanitarian"-box?

    // Please note the two minor corrections inhere: it's not
    document.onload but window.onload, and it's not <script href=""> but
    <script src=""> ... lapsus calami :)
     
    Darko, Jun 11, 2007
    #5
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Hugo
    Replies:
    10
    Views:
    1,343
    Matt Humphrey
    Oct 18, 2004
  2. Chris  Chiasson
    Replies:
    6
    Views:
    634
    Richard Tobin
    Nov 14, 2006
  3. kaushikshome
    Replies:
    4
    Views:
    792
    kaushikshome
    Sep 10, 2006
  4. scad
    Replies:
    23
    Views:
    1,191
    Alf P. Steinbach
    May 17, 2009
  5. Chris

    Events Events Events Please Help

    Chris, Aug 30, 2005, in forum: ASP .Net Web Controls
    Replies:
    0
    Views:
    387
    Chris
    Aug 30, 2005
Loading...

Share This Page